在vue项目中安装ECharts组件

npm install echarts --save

在main.js中引用并全局化

**
import echarts from 'echarts'

Vue.prototype.$echarts = echarts //绑定在原型链上全局使用
**

image.png

然后在相应的组件中开始写你的ECharts组件:

<div id="main" style="border-radius: 4px;height: 400px; background: #fff;"></div> //表格的大小和位置

然后就是js内容:

export default {

  name: 'HelloWorld',

  data () {

    return {

    }

  },

  mounted(){

    this.init();

  },

  methods:{

    init(){

        let myChart = this.$echarts.init(document.getElementById('main'));

        window.onresize = function () {

            myChart.resize()

        }

        // 绘制图表

        myChart.setOption({

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            xAxis: {

                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

        });

    }

  }

}

image.png

多图表要自适应页面，创建图表节点后面添加事件，并在事件函数里面添加对应的代码：
图表自适应页面
window.addEventListener("resize", function () {
myChart01.resize();
myChart02.resize();
myChart03.resize();
myChart04.resize();
myChart05.resize();
});
参考：https://www.jianshu.com/p/99e958a30b84
参考：https://www.cnblogs.com/cuixiaozhen/p/9817893.html