vue中使用echarts

1.安装

cnpm install echarts --save

2.html

<template>
  <div class="charts">
    <div id="myCharts" :style="{width:'800px',height:'380px'}"></div>
  </div>
</template>

3.js

import echarts from 'echarts'
export default {
  name: 'myCharts',
  data () {
    return {
      myCharts:'',
      options:{}                                //echarts初始配置信息
    }
  },
  mounted() {
    this.myCharts=echarts.init(document.getElementById('myCharts'));
    this.myCharts.setOption(this.options);
    this.getchart();
  },
  methods:{
    getchart:function(){
        this.$ajax.get('url')
        .then((reps)=>{
            this.myCharts.setOption({
                xAxis: {data:data_x},           //动态配置信息及数据
                series: [
                    {data: data_1},
                    {data: data_2}
                ]
            });
        })
        .catch((error)=>{});
    }
  }
}

4.同一个组件引入多个图表

修改div及getElementById部分的id,保证各个图表之间不同即可