ElementUI中使用ECharts

1. 直接引入echarts (安装echarts项目依赖)

   npm install echarts --save
   //或者
   npm install echarts -S
   

2. 全局引入(我们安装完成之后，可以在 main.js 中全局引入 echarts)

   import echarts from "echarts";
   Vue.prototype.$echarts = echarts;
   

3. 举例饼图
   

   <el-row :gutter="20">
       <el-col :span="12">
          <el-card header="车辆类型统计" style="font-weight: bold;">
               <div ref="myEchart1" style="height: 350px;">
               div>
           el-card>
       el-col>
       <el-col :span="12">
           <el-card header="车辆出租状态统计" style="font-weight: bold;">
               <div ref="myEchart2" style="height: 350px;">
               div>
           el-card>
       el-col>
   el-row>
   

    //车辆类型统计
   initChart1(typeTitle, typeData) {
       let app = this;
       let myChart = app.$echarts.init(this.$refs.myEchart1);
   
       let option = {
           tooltip: {
               trigger: 'item',
               formatter: '{a} 
   {b}: {c} ({d}%)'
           },
           legend: {
               orient: 'vertical',
               left: 10,
               data: typeTitle
           },
           series: [
               {
                   name: '车辆类型统计',
                   type: 'pie',
                   radius: ['50%', '70%'],
                   avoidLabelOverlap: false,
                   label: {
                       normal: {
                           show: false,
                           position: 'center'
                       },
                       emphasis: {
                           show: true,
                           textStyle: {
                               fontSize: '30',
                               fontWeight: 'bold'
                           }
                       }
                   },
                   labelLine: {
                       normal: {
                           show: false
                       }
                   },
                   data: typeData
               }
           ]
       };
       myChart.setOption(option);
   },
   //车辆出租状态统计
   initChart2(num1, num2, num3) {
       let app = this;
       let myChart = app.$echarts.init(this.$refs.myEchart2);
   
       let option = {
           tooltip: {
               trigger: 'item',
               formatter: '{a} 
   {b} : {c} ({d}%)'
           },
           legend: {
               bottom: 10,
               left: 'center',
               data: ['已出租', '未出租', '已预约']
           },
           series: [
               {
                   name: '车辆出租状态',
                   type: 'pie',
                   radius: '55%',
                   center: ['50%', '40%'],
                   data: [
                       {value: num1, name: '已出租'},
                       {value: num2, name: '未出租'},
                       {value: num3, name: '已预约'}
                   ],
                   emphasis: {
                       itemStyle: {
                           shadowBlur: 10,
                           shadowOffsetX: 0,
                           shadowColor: 'rgba(0, 0, 0, 0.5)'
                       }
                   }
               }
           ]
       };
       myChart.setOption(option);
   },
   

   获取数据函数

     //获取统计图数据
   queryStatisticData(formData) {
       let app = this;
       app.$Api.queryStatisticData(formData, function (result) {
           var carStatus1 = result.car1;
           var carStatus2 = result.car2;
           var carStatus3 = result.car3;
           app.initChart2(carStatus1, carStatus2, carStatus3);
           app.carTypes = result.carTypes;
           app.carTypeNum = result.carTypeNum;
   
           var typeTitle = [];
           var typeData = [];
           for (var i = 0; i < app.carTypes.length; i++) {
               var itemArr = {
                   value: app.carTypeNum[i],
                   name: app.carTypes[i]
               };
               typeData.push(itemArr);
   
               typeTitle.push(app.carTypes[i]);
           }
           app.initChart1(typeTitle, typeData);
       })
   },
   

   在mounted中加载queryStatisticData函数即可向后端索取数据实现饼图显示