vue + 动态 echart

.一, 安装 echarts 安装包

npm install echarts --save

二, 引入依赖
这里注释掉的写法, 报错了; 后面的写法, 可以正常使用

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

<template>
  <div class="con_3_echart"   id="con_3_echart"    >  </div>
  </template>

import echarts from 'echarts'

  mounted: function () {
    this.drawEchart([0], 0, [0])   //在这里初始化一个echart,   参数全部为空 , 等于是 绘制个空echart占位 ; 之后, 数据有变化,再注入新数据
  },
    methods: {
    drawEchart (time, unit, data) {					// 注意, 第一次绘制, 也要传 参数
      // console.log('tt', time, unit, data)
      this.charts = this.$echarts.init(document.getElementById('con_3_echart'));     // 这里写入要绘制的DOM
      this.charts.setOption({
        tooltip: {
          trigger: 'axis',
          backgroundColor: "rgba(0,0,0,0.6)",
          textStyle: {
            color: "#fff" //设置文字颜色
          },
          borderWidth: "0", //边框宽度设置1
        },
        xAxis: {
          type: 'category',
          data: time,         //this.xAxisTime
        },
        yAxis: [
          {
            name: '当前值' + '(' + unit + ')',   //yAxisUnit
            type: 'value',
          }
        ],
        series: [{
          data: data,      // this.seriesData
          type: 'line',
          showSymbol: false,
          name: '',
          lineStyle: {
            color: '#2b91ff',
            width: 1.5
          },
        }]
      })
    },
    // 这里是处理数据, 后台传的数据, 不一定就是 echart 需要的格式; 
   doEchart2 (arr) {
      // console.log('doEchart2', arr)
      var times = [];
      var datas = [];
      arr.forEach(function (item) {
        times.push(item.time);
        datas.push(item.value)
      })
      this.drawEchart(times, 'XX', datas)      // 数据处理好了, 传给 echart 渲染
    },
    otherFUn(){
   		// 当数据有变化的时候, 处理数据 , 并通知 echart
		this.doEchart2(data)
	}
    }