echarts常用实例

1、柱状图：

1、需要动态加载的参数是x轴以及柱状图的数值，legendData和seriesData。demo使用是可以直接写死参数，在执行this.initChart()方法即可。具体代码可以参数以下code.

<!--门禁卡开门统计-->
<template>
  <div class="openCardCountEle" style="height: 90%;width: 100%;padding: 4px;" v-loading="isLoading">
    <div style="width: 100%;height: 100%;z-index: 0">
      <div id="openCardCountEleID"></div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import {getFileDetail30DaysTime} from 'api/viasadmin/arcgisMap/IntelDigCtrl';
  import {openCardCount} from 'api/dashboard';
  export default {
    name: "openCardCountEle",
    props:['curDAItem'],
    data() {
      return {
        chart: null,
        id: 'openCardCountEleID',
        isLoading: false,
        color: [
          '#ff8463','#9bca62','#2ec7c9','#b6a2de','#5ab1ef',
          '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
          '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
          '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
        ],
        legendData: ['0:00-2:00', '2:00-4:00', '4:00-6:00', '6:00-8:00', '8:00-10:00', '10:00-12:00',
          '12:00-14:00','14:00-16:00','16:00-18:00','18:00-20:00','20:00-22:00','22:00-24:00'],
        seriesData:[],
        // seriesData:[10, 52, 200, 334, 390, 330, 220],
      };
    },
    beforeDestroy() {
      if (!this.chart) {return false;}
      this.chart.dispose();
      this.chart = null;
    },
    beforeCreate(){},
    created(){},
    mounted() {
      this.$nextTick(() => {
        this.getList();
        // this.initChart();
      });
    },
    methods: {
      getList(){
         //获取上次的勾选记录
        this.isLoading = true;
        const param ={
          archivesCode:this.curDAItem.archivesCode,
          topNum:
        }
        getFileDetail30DaysTime(param).then(rsp=>{
          this.isLoading = false;
          if(rsp.status ==  && rsp.data){
           this.seriesData = rsp.data;
          } else {
            this.seriesData =[];
          }
          this.initChart();
        })
      },
      initChart() {
        $("#openCardCountEleID").width($(".openCardCountEle").width());
        $("#openCardCountEleID").height($(".openCardCountEle").height());
        this.chart = echarts.init(document.getElementById(this.id));
        this.chart.setOption({
          color: this.color,
          grid: {
            left: '80px',
            right: '50px',
            top: '70px',
            bottom:'30px',

          },
          legend: {
            data: ['感知次数'],
            top: ,
            textStyle:{color:'#E69142', fontWeight:'bold'},
          },
          title: {
            text: '设备感知次数',
            textStyle:{
              fontSize: ,
              fontWeight: "normal",
              color: "#32DBEF"
            }
          },
          tooltip: {
            trigger: 'axis',
            showDelay:,
          },
          xAxis: {
            type: 'category',
            data: this.legendData,
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: ,//这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: false,
              lineStyle:{color: ['#2E65B1'], width: , type: 'solid'}
            }
          },
          yAxis : [{
              axisLine: {lineStyle: {color: '#fff', width: }},
              type : 'value',
              splitLine: {show: true, lineStyle:{color: ['#2E65B1'], width: , type: 'solid'}},
              axisLabel: {show: true, textStyle: {color: '#fff'}}
            }],
          series : [
            {
              name:'感知次数',
              type:'bar',
              data:this.seriesData,
              barMaxWidth: '',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(, , , , [{
                    offset: ,
                    color: "#FFCF68" // 0% 处的颜色
                  },{
                    offset: 0.5,
                    color: "#ff9333" // 100% 处的颜色
                  }, {
                    offset: ,
                    color: "#ff9333" // 100% 处的颜色
                  }], false)
                }
              }
            }
          ]
        },true);

      }
    }
  }
</script>

<style scoped></style>

2、折现图。折线过多，legend需要支持分页。

数据接口格式：

<!--视频门禁-->
<template>
  <div class="videoDoorCtrl" v-loading="isLoading">
    <div class="videoDoorTitle">
      <span class="title">视频门禁进出数据统计</span>
      <span class="mapSelectBox">
        <el-select class="selectCls" v-model="regionTypeVal"  multiple collapse-tags @change="outInTypeChange">
         <el-option v-for="item in AreaOptionList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </span>
    </div>
    <div style="width: 100%;height: 100%;z-index: 0">
      <div :class="className" id="videoDoorID"></div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import {doorCount} from 'api/viasadmin/arcgisMap/arcgisMap';
  import {residentialAreaDoorList} from '../../../api/com';

  export default {
    name: "videoDoorCtrl",
    props: {
      className: { type: String, default: 'chart'},
      id:        { type: String, default: 'videoDoorID' },
    },
    data() {
      return {
        chart: null,
        regionTypeVal:[],
        outInTypeOpt:[{value:'',label:'出门'},{value:'',label:'入门'}],
        isLoading:false,
        color:[
          '#ff8463','#9bca62','#2ec7c9','#b6a2de','#5ab1ef',
          '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
          '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
          '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
        ],
        legendData:[],
        seriesData:[],
        selected:{},
        AreaOptionList:[],
        param : {
          esList:[],    // 空的话默认查询全部
          startDate:'', // 默认当天
          endDate:''
        }
      };
    },
    beforeDestroy() {
      if (!this.chart) {return false;}
      this.chart.dispose();
      this.chart = null;
    },
    beforeCreate(){},
    created(){
      this.getAreaList();
    },
    methods: {
      getAreaList(){
        const paramList = {};
        let getLastSet=[];
        if(window.localStorage.getItem("mapHomeVideoDoorSelectList")){
          getLastSet = JSON.parse(window.localStorage.getItem("mapHomeVideoDoorSelectList"));
        }

        //获取上次的勾选记录
        this.isLoading = true;
        residentialAreaDoorList(paramList).then(rsp =>{
          this.isLoading = false;
          if(rsp.status == ){
            for(let i = ;i<rsp.result.length;i++){
              this.AreaOptionList.push({'value': rsp.result[i].value, 'label': rsp.result[i].label});
            }
            if(getLastSet){
              for(let i =;i<getLastSet.length;i++){
                this.regionTypeVal.push(getLastSet[i].id);
                this.param.esList.push({id:getLastSet[i].id})
              }
            }
          } else {
            this.AreaOptionList = [];
          }
          this.getChartData();
        })
      },
      getChartData(){
        doorCount(this.param).then(rsp => {
          this.legendData = [];
          this.seriesData= [];
          this.selected= [];
          if (rsp.status == ) {
            for (let i = ; i < rsp.data.list.length; i++) {
              this.legendData.push(rsp.data.list[i].esName);
              this.seriesData.push({
                name: rsp.data.list[i].esName,
                type: 'line',
                stack: '总量',
                data: rsp.data.list[i].list
              })
              this.selected[rsp.data.list[i].esName] = i;
            }
          } else{
            this.seriesData = [];
            this.legendData = [];
            this.selected = {};
          }
          this.initChart();
        })
      },
      initChart() {
        // $("#videoDoorID").width($(".videoDoorCtrl").width());
        // $("#videoDoorID").height($(".videoDoorCtrl").height());
        $("#videoDoorID").width($(window).width() * 0.20); // 和首页的initPage方法进行对应。
        $("#videoDoorID").height(($(window).height()-)*0.25);

        this.chart = echarts.init(document.getElementById(this.id));
        this.chart.setOption({
          color: this.color,
          grid: {
            left: '50px',
            right: '30px',
            top: '50px',
            bottom:'80px'
          },
          legend: {
            type: 'scroll',
            orient: 'horizontal',//vertical
            right: ,
            bottom: ,
            data: this.legendData,
            textStyle:{
              color:'#E69142',
              fontWeight:'bold'
            },
            pageTextStyle:{ //图例页信息的文字样式。
              color:'#fff'
            },
            animation:true,
            selected: this.selected,
            pageIconColor: '#00FFFF', //翻页按钮的颜色。
            pageIconInactiveColor:'#ADE5E5',  // 翻页按钮不激活时（即翻页到头时）的颜色
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            showDelay:,
            confine :true,  //是否将 tooltip 框限制在图表的区域内
        },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00', '13:00',
              '14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00'],
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: ,//这里是为了突出显示加上的
              }
            },
            splitLine: {
              show: false,
              lineStyle:{color: ['#666'], width: , type: 'solid'}
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {lineStyle: {color: '#fff', width: }},
            splitLine: {
              show: true,
              lineStyle:{color: ['#666'], width: , type: 'solid'}
            },
            axisLabel: {show: true, textStyle: {color: '#fff'}
            }
          },
          series: this.seriesData
        },true);

      },
      outInTypeChange(val){
        this.regionTypeVal = val;
        this.param.esList = [];
        for(let i = ;i<this.regionTypeVal.length;i++){
          this.param.esList.push({id:this.regionTypeVal[i]});

        }
        // 把勾选的结果保存到localstroage
        window.localStorage.setItem("mapHomeVideoDoorSelectList",JSON.stringify(this.param.esList));
        this.getChartData();
      }
    }
  }
</script>

<style scoped>
  .videoDoorCtrl {
    color: #;
    padding: 5px;
    width: %;
    height: %;
    position: relative;
  }
  .videoDoorTitle {
    position: absolute;
    top: 5px;
    z-index: ;
    width: %;
  }
  .selectCls {
    width: %;
    border-radius: 6px;
    float: right;
    margin-right: 10px;
  }
  .videoDoorTitle .title{
    color: #ffffff;
    font-weight: ;
    /*font-size: 15px;*/
    font-size: .18rem;
    margin-top: 8px;
    display: inline-block;
  }

</style>

3、饼状图。　

此处是2个冰柱图进行轮播，没有截图出图二。

数据格式如下：

 <!--辖区基础数据-->
 <template>
   <div style="margin: 2%;height: 100%;width: 100%;" class="communityPolice">
     <el-carousel height="100%" :autoplay=false :interval = 1000*30>
       <el-carousel-item>
         <el-col :span="4">
           <span style="display: inline-block;text-align: center;width: 100%;">今日告警<br/>总数：</span>
           <span class="totalCls">
             {{policeData.totalCount}}
           </span>
         </el-col>
         <el-col :span="20">
           <div class="chartsOutter" style="width: 98%;height: 100%;">
             <div id="policID" style="width: 100%;"></div>
           </div>
         </el-col>
       </el-carousel-item>
       <el-carousel-item>
         <el-col :span="4">
           <span style="display: inline-block;text-align: center;width: 100%;">警情总数：</span>
           <span class="totalCls">
               {{warnDetilData.totalCount}}
             </span>
         </el-col>
         <el-col :span="20">
           <div class="chartsOutter" style="width: 98%;height: 100%;">
             <div id="warnDetilID" style="width: 100%;"></div>
           </div>
         </el-col>
       </el-carousel-item>
     </el-carousel>
    </div>
 </template>

 <script>
   import {communityCount,communityXQCount,communityXQWarnCount} from 'api/viasadmin/arcgisMap/arcgisMap';
   import {filterFieldFun,curTimeFun} from 'filters/index';
   import { mapGetters } from 'vuex';
   import echarts from 'echarts';

   export default {
     name: "communityPolice",
     data() {
       return {
         esListParam:[],
         color:[
           '#3CA45C','#EB6F13','#C9C438','#5BB7EC','#D882C3',
           '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
           '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
           '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
         ],
         listQueryWarn:{
           startTime:'',
           endTime:'',
           esList:[]
         },
         warnDetilData:{
           totalCount:'',
           seriesData:[],
           legendData:[],
         },
         listQueryPolice:{
           endDate:'',
           startDate:'',
           esList:[]
         },
         policeData:{
           totalCount:'',
           seriesData:[],
           legendData:[],
         }
       }
     },
     computed: {
       ...mapGetters([ 'mapGlobalCommunityIDGetter'])
     },
     watch: {
       // 监听所选社区数据变化
       mapGlobalCommunityIDGetter(val) {
         this.listQueryPolice.esList = val;
         this.getPoliceChartData();
       },
     },
     created() {
       let timeTodayStart = curTimeFun('1','-')+' 00:00:00';
       let timeTodayEnd = curTimeFun('1','-')+' 23:59:59';
       this.listQueryPolice.startDate = timeTodayStart;
       this.listQueryPolice.endDate = timeTodayEnd;
       this.listQueryWarn.startTime = timeTodayStart;
       this.listQueryWarn.endTime = timeTodayEnd;
     },
     mounted() {
       this.$nextTick(() => {
         this.listQueryPolice.esList = this.$store.getters.mapGlobalCommunityIDGetter;
         this.getPoliceChartData();
         this.getWarnDetilChartData();
       });
     },
     methods: {
       getWarnDetilChartData(){  // 警情总数
         communityXQWarnCount(this.listQueryWarn).then(rsp=>{
           if(rsp.status == 200){
             let total= 0;
             this.warnDetilData.legendData = [];
             this.warnDetilData.seriesData = [];
             for(let i = 0;i<rsp.data.length;i++){
               total +=rsp.data[i].policeCaseNum;
               this.warnDetilData.legendData.push(rsp.data[i].policeCaseType);
               this.warnDetilData.seriesData.push({
                 value:rsp.data[i].policeCaseNum,
                 name:rsp.data[i].policeCaseType
               })
             }
             this.warnDetilData.totalCount = total;
             this.initWainDetilChart();
           }
         })
       },
       initWainDetilChart() {  // 警情总数
         $("#warnDetilID").width($(window).width() * 0.20*0.9); // 和首页的initPage方法进行对应。
         $("#warnDetilID").height(($(window).height()-80)*0.13);
         this.chart = echarts.init(document.getElementById("warnDetilID"));
         this.chart.setOption({
           color: this.color,
           tooltip : {trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"},
           grid: {top: '0px', bottom:'80px', right:'10px'},
           legend: {
             orient: 'vertical',
             type: 'scroll',
             left: 'right',
             icon:'circle',
             right: 30,
             pageTextStyle:{color:'#fff'}, //图例页信息的文字样式。
             textStyle:{color:'#fff',},
             animation:true,
             data: this.warnDetilData.legendData,
             selected: this.policeData.legendData,
             pageIconColor: '#00FFFF', //翻页按钮的颜色。
             pageIconInactiveColor:'#ADE5E5',  // 翻页按钮不激活时（即翻页到头时）的颜色
           },
           series : [{
             name: '警情总数',
             type: 'pie',
             radius : '38%',
             center: ['35%', '40%'],
             data: this.warnDetilData.seriesData,
             itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}},
             label:{
               normal:{
                 formatter: "{b}（{c}个）"
               }
             }
           }]
         },true);
       },
       getPoliceChartData(){ // 警情告警
         communityXQCount(this.listQueryPolice).then(rsp=>{
           if(rsp.status == 200){
             this.policeData.totalCount = rsp.data.totalCount;
             this.policeData.legendData = [];
             this.policeData.seriesData = [];
             for(let i = 0;i<rsp.data.list.length;i++){
               this.policeData.legendData.push(filterFieldFun(rsp.data.list[i].alarmType,'alarmTypeGetter'));
               this.policeData.seriesData.push({
                 value:rsp.data.list[i].alarmCount,
                 name:filterFieldFun(rsp.data.list[i].alarmType,'alarmTypeGetter')
               })
             }
             this.initPolicChart();
           }
         })
       },
       initPolicChart() {  // 今日告警

         $("#policID").width($(window).width() * 0.20*0.9); // 和首页的initPage方法进行对应。
         $("#policID").height(($(window).height()-80)*0.13);
         this.chart = echarts.init(document.getElementById("policID"));
         this.chart.setOption({
           color: this.color,
           tooltip : {trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"},
           grid: {top: '0px', bottom:'80px', right:'10px'},
           legend: {
             type: 'scroll',
             orient: 'vertical',
             icon:'circle',
             left: 'right',
             right: 30,
             pageTextStyle:{color:'#fff'}, //图例页信息的文字样式。
             textStyle:{color:'#fff',},
             animation:true,
             data: this.policeData.legendData,
             selected: this.policeData.legendData,
             pageIconColor: '#00FFFF', //翻页按钮的颜色。
             pageIconInactiveColor:'#ADE5E5',  // 翻页按钮不激活时（即翻页到头时）的颜色
           },
           series : [{
             name: '今日告警总数',
             type: 'pie',
             radius : '38%',
             center: ['35%', '40%'],
             data: this.policeData.seriesData,
             itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}},
             label:{
               normal:{
                 formatter: "{b}({c}个)"
               }
             }
           }]
         },true);
       },
     },
   }
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
   .el-col {
     height: 100%;
   }
   .communityPolice td {
     padding: 8px;
   }
   .communityPolice .tdnum {
     color: #ff9333;
     font-weight: 600
   }
   .communityPolice .totalCls {
     display: inline-block;
     text-align: center;
     width: 100%;
     font-size: 16px;
     font-weight: 600;
     background: #1b3a74;
     border-radius: 100%;
     height: 30px;
     color: yellow;
     line-height: 30px;
     margin-top: 10px;
   }
 </style>