一、安装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");