vue使用echarts方式

首先再package.json中的 

"dependencies": {

//添加echarts  echarts-wordcloud热词云需单独引用

"echarts": "^4.2.0-rc.2",

"echarts-wordcloud": "^1.1.3"

}

建立图表文件 文件内为初始化方法和公用属性

<template>
  <div :style="{height: height + 'px'}" class="w100" :id="chartId"></div>
</template>

 import customed from './json/customed.json'

  export default{
    data(){
      return {
        initOptions: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          }
        },
        str: 'abcdefghijklmnopqrstuvwxyz0123456789',
        chartId: '',
        chart: null,
      }
    },
    methods: {
      initChart(){
        this.$nextTick(function () {
          let _this = this,
              id = _this.chartId
          _this.chart = _this.$echarts.init(document.getElementById(id), customed)
          let opt = Object.assign({}, _this.initOptions, _this.chartOpt)
          _this.chart.setOption(opt, true)
          _this.chart.resize()
          _this.chart.off('click');
          _this.chart.on('click', function (param) {
            _this.$emit('barChartClick', param)
          })
          _this.chart.on('finished', function () {
            _this.chartBase64 = _this.chart.getConnectedDataURL({
              pixelRatio: 2,
              type: 'jpeg',
              backgroundColor: '#fff',
              excludeComponents: ['toolbox']
            })
          })
          window.resize = function () {
            _this.chart.resize()
          }
        })
      },
      resizeChart(){
        this.$nextTick(function () {
          if(this.chart != null){
            this.chart.resize()
          }
        })
      }
    },
    mounted(){
      var id = 'chart-'
      for(let i = 0; i < 3; i++){
        id += this.str.charAt(Math.floor(Math.random() * 34));
      }
      this.chartId = id;
    },
    props:['height', 'chartOpt'],
    watch:{
      chartOpt(){
        if(this.chartOpt.series.length > 0){
          this.initChart();
        }
      }
    }
  }

axios成功后即可这样赋值 仅赋值需要改变属性即可
this.carrierOption = this.$utils.initPieOpt()
this.carrierOption.series[0].data=res.data.data
this.carrierOption.series[0].radius=['30%', '50%']