【Vue】Vue 中引入 ECharts

目录

1、安装

2、在 main.js 中引入

3、在需要调用的页面中的 js 使用

4、最重要的一点！

---

介绍

Echarts 是百度开发优秀的图表控件，种类全，易上手，本文将介绍如何在 Vue 中引入该组件

示例默认引入整个 echarts 模块，包会相对较大。对性能要求较高的，可以进行按需引入，参考官方文档

1、安装

npm install echarts -S

2、在 main.js 中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、在需要调用的页面中的 js 使用

setEcharts:function(){
    var echarts = require('echarts');

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});
}

4、最重要的一点！

生成图表的函数（以上述代码为例即：setEcharts() ）需要在 mounted 生命周期中去调用进行实例化，因为这时 dom 元素才挂载到页面中，图表才能显示出来！