vue使用Echarts图表

先贴个图：

用的就是admin后台的Echarts图表，因为给的都是静态的数据，这里是调用的接口重新赋值的，
我这里还多了一个功能，就是通过时间查询

<template>
  <div class="app-container">
    <!--表单-->
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-date-picker
            v-model="searchObj.begin"
            type="date"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchObj.end"
            type="date"
            placeholder="选择截止日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-button
          :disabled="btnDisabled"
          type="primary"
          @click="showChart()"
          icon="el-icon-search"
        >查询</el-button>
      </el-form>
    </div>

    <div class="chart-container">
      <div :class="className" :id="id" :style="{height:height,width:width}" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from '../../components/Charts/mixins/resize'
import actCharts from '@/api/charts/actCharts'

export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      }
    },
    data() {
      return {
        searchObj:{},
        btnDisabled:false,
        xData:[],
        yData:[]
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },

这些是Echarts模板有的
重点来了：

后台接口数据写的明明白白的，
点击按钮，判断是否有值

 showChart() {      
       if(this.searchObj.begin == undefined & this.searchObj.end == undefined){
         this.$message.error("每一项不能为空");
       }else{
         actCharts.getActCharts(this.searchObj).then(res => {
         console.log(res)
         this.yData = res.data.series
         this.xData = res.data.xAxis    
         console.log(this.yData[0].number);
         //调用下面生成图表的方法，改变值
         this.setChart()
         
        })
       }       
      
     },

 setChart(){
       this.chart = echarts.init(document.getElementById(this.id))
       var option = {
          backgroundColor: '#344b58',
          title: {
           text: '活动审核统计',
           x: '20',
           top: '20',
           textStyle: {
             color: '#fff',
             fontSize: '22'
           },
           subtextStyle: {
             color: '#90979c',
             fontSize: '16'
           }
         },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             textStyle: {
               color: '#fff'
             }
           }
         },
          grid: {
           left: '5%',
           right: '5%',
           borderWidth: 0,
           top: 150,
           bottom: 95,
           textStyle: {
             color: '#fff'
           }
         },
         legend: {
           x: '5%',
           top: '10%',
           textStyle: {
             color: '#90979c'
           },
          data: [this.yData[0].countName, this.yData[1].countName, this.yData[2].countName, this.yData[3].countName]
         },
         calculable: true,
         // x轴是类目轴（离散数据）,必须通过data设置类目数据
         xAxis: {
             type: 'category',
             data: this.xData,
             stack: 'total',
             symbolSize: 10,
             symbol: 'circle',
             itemStyle: {
               normal: {
                 color: '#90979c',
                 barBorderRadius: 0,
                 label: {
                   show: true,
                   position: 'top',
                   formatter(p) {
                     return p.value > 0 ? p.value : ''
                   }
                 }
               }
             },
             axisLabel: {
               color: "rgba(255,255,255,.6)",
               fontSize: "12"
           },
           
         },
         // y轴是数据轴（连续数据）
        yAxis: [{
           type: 'value',
           splitLine: {
             show: false
           },
           axisLine: {
             lineStyle: {
               color: '#90979c'
             }
           },
           axisTick: {
             show: false
           },
           axisLabel: {
             interval: 0,
             textStyle: {
               color: "rgba(255,255,255,.6)",
               fontSize: "12"
             }
           },
           splitLine: {
               lineStyle: {
                   color: "rgba(255,255,255,.1)"
               }
           },
           splitArea: {
             show: false
           }
         }],
         dataZoom: [{
           show: true,
           height: 30,
           xAxisIndex: [
             0
           ],
           bottom: 30,
           start: 10,
           end: 80,
           handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
           handleSize: '110%',
           handleStyle: {
             color: '#d3dee5'

           },
           textStyle: {
             color: '#fff' },
           borderColor: '#90979c'

         }, {
           type: 'inside',
           show: true,
           height: 15,
           start: 1,
           end: 35
         }],
         // 系列列表。每个系列通过 type 决定自己的图表类型
               series: [
               {
                   // 系列中的数据内容数组
                   data: this.yData[1].number,
                   name: this.yData[1].countName,
                   // 柱形图
                   type: 'bar',
                   stack: 'total',
                   itemStyle: {
                     normal: {
                       color: 'rgba(0,191,183,1)',
                       barBorderRadius: 0,
                       label: {
                         show: true,
                         position: 'insideTop',
                         formatter(p) {
                           return p.value > 0 ? p.value : ''
                         }
                       }
                     }
                   }
               },
               {
                   // 系列中的数据内容数组
                   data: this.yData[2].number,
                   name: this.yData[2].countName,
                   // 柱形图
                   type: 'bar',
                   stack: 'total',
                   barMaxWidth: 35,
                   barGap: '10%',
                   itemStyle: {
                     normal: {
                       color: 'rgba(255,144,128,1)',
                       label: {
                         show: true,
                         textStyle: {
                           color: '#fff'
                         },
                         position: 'insideTop',
                         formatter(p) {
                           return p.value > 0 ? p.value : ''
                         }
                       }
                     }
                   }
               },
               {
                   // 系列中的数据内容数组
                   data: this.yData[3].number,
                   name: this.yData[3].countName,
                   // 柱形图
                   type: 'bar',
                   barMaxWidth: 35,
                   barGap: '10%',
                   stack: 'total',
                   itemStyle: {
                     normal: {
                       color: 'rgba(155,100,77,1)',
                       label: {
                         show: true,
                         textStyle: {
                           color: '#fff'
                         },
                         position: 'insideTop',
                         formatter(p) {
                           return p.value > 0 ? p.value : ''
                         }
                       }
                     }
                   }
               },
               {
                   // 系列中的数据内容数组
                   data: this.yData[0].number,
                   name: this.yData[0].countName,
                   
                   // 折线图
                   type: 'line',
                   stack: 'total',
                   symbolSize: 10,
                   symbol: 'circle',
                   itemStyle: {
                     normal: {
                       color: 'rgba(252,230,48,1)',
                       barBorderRadius: 0,
                       label: {
                         show: true,
                         position: 'top',
                         formatter(p) {
                           return p.value > 0 ? p.value : ''
                         }
                       }
                     }
                   }
               },
               ]
           }
           this.chart.setOption(option)
       }

太长了，重点就是调用接口那段，图表重新赋值就可以