Vue中使用Echarts以及遇到的问题

通过npm获取echarts    npm install echarts --save

在package.json文件dependencies中可以看到是否安装成功

在.vue文件内准备画图表

注意 需要指定好dom元素的宽高，不然图表无法显示

// 页面里选好位置
<div id="main"></div>

// 引入配置选项
import { planInOutOptions } from "../assets/js/xxx";

// 在mounted中加载
mounted() {
    // 注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick
    this.drawChart()
}

methods: {
    // 画图表
    drawChart() {
        this.$nextTick(() => {
            var echarts = require("echarts");
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById("main"), "vintage");
            // 绘制图表
            myChart.setOption(planInOutOptions);
        });
    }
}

planInOutOptions 可以参考官网的配置项来画不同的图表，配置项一般都比较长这里一般都会拎出来放在一个单独的js文件内