<template>
  <div>
    <button @click="fang()">x</button>
    <div id="main"></div>
  </div>
</template>
<script>
export default {
  methods: {
    fang(){
      var myChart =  this.echarts.init(document.getElementById('main'))
     let  option={
        //  legend: {},
    tooltip: {},
    dataset: {
        // 提供一份数据。
        source: [
          ['jan',34,20,'xx',52],
          ['feb',28,14,'yy',54],
          ['mar',45,32,'zz',42],
          ['apr',69,46],
          ['may',30,24],
          ['jun',43,23],
          ['jul',33,23],
          ['aug',23,13],
          ['sep',23,20],
        ]
    },
    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    xAxis: {type: 'category'},
    // 声明一个 Y 轴，数值轴。
    yAxis: {},
    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: [{
      type:'pie',
      center:['65%',60],
      radius:35,
      encode:{itemName:3,value:4}
    },
    {
      type:'line',
      encode:{x:0,y:1}
    },
      {
        type:'bar',
      encode:{x:0,y:2}
      }
      
    ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style>
#main{
  width: 100vw;
  height: 100vh;
}
</style>

动态图表

<template>
  <div>
    <button @click="fang()">x</button>
    <div id="main"></div>
  </div>
</template>
<script>
export default {
  methods: {
    fang(){
      var myChart =  this.echarts.init(document.getElementById('main'))
      var data =[]
      for(let i=0;i<5;++i){
        data.push(Math.round(Math.random()*200))
      }
     let  option={
      
    xAxis: {
        max: 'dataMax',
    },
    yAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300,
        max: 4 // only the largest 3 bars will be displayed
    },
    series: [{
        realtimeSort: true,
        name: 'X',
        type: 'bar',
        data: data,
        label: {
            show: true,
            position: 'right',
            valueAnimation: true
        },itemStyle: {
    // 设置扇形的颜色
     color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        ];
                        return colorList[params.dataIndex]},
    // shadowBlur: 200,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}
    }],
    legend: {
        show: true
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
};

function run () {
    var data = option.series[0].data;
    for (var i = 0; i < data.length; ++i) {
        if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 2000);
        }
        else {
            data[i] += Math.round(Math.random() * 200);
        }
    }
    myChart.setOption(option);
}

setTimeout(function() {
    run();
}, 0);
setInterval(function () {
    run();
}, 3000);}
    }

}
</script>
<style>
#main{
  width: 50vw;
  height: 50vh;
}
</style>