vue-cli -- 使用echarts

一、安装echarts

npm install echarts --save

二、引入echarts

因为使用的是vue-cli 3.0的ts版本，所以这个模块全局引入总是提示没有声明文件，所以只能退一步，当单个页面引入

const echarts = require('echarts')

三、调用echarts

1、创建画布

首先需要在页面中创建一个DOM，作为展示图表的画布

<div id="chart" style="width: 600px; height: 600px"></div>

2、调用echarts

在methods里面写一个方法，用来声明创建图表

methods: {
    setEchart () {
        const mychart = echarts.init(document.getElementById('chart'))
        // 这一步是设置图表的数据对象
        const option = {
            title: {} // 这个是标题对象，text: value
            tooltip: {} 这个是数据放置点的所有数据提示 trigger: axis
            legeng: {} // 这个是每个数据的说明 data: []
            xAxis: {} // 这个表示X轴的数据内容 data: []
            yAxis: {} // 这个表示Y轴的内容 type: value
            series: [] // 这个表示数据信息{data: [], name: '类名', type: '图表类型', stack: ''}
        }
    }
}

3、初始化echarts

在mounted钩子函数里执行echarts函数

mounted () {
    this.setEcharts()
}

四、按需引入

正常的按上面引入是全局引入，可以按需引入，在script里面引入

// 这个必须，是基础
const echarts = require('echarts/lib/echarts')
// 引入图表类型，bar为柱形图
require("echarts/lib/chart/bar")
// 引入辅助映射组件，如：标题，提示
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");