Vue中使用折线图(不定期更新)

1。
npm i echarts --s // 下载安装依赖

因为项目较小，所以采用了按需引入(只引入折线图所需组件)
2。
// 引入 ECharts 主模块
var echarts = require(‘echarts/lib/echarts’)
/* 引入折线图所需组件 */
require(‘echarts/lib/chart/line’) // 按需导入折线组件
require(‘echarts/lib/component/dataZoom’) // 按需导入滑块组件
require(‘echarts/lib/chart/effectScatter’) // 拐点出闪烁，高亮
require(‘echarts/lib/component/title’) // 引入提示框和标题组件
require(‘echarts/lib/component/tooltip’) // 提示组件
require(‘echarts/lib/component/legend’) // 图例组件
// require(‘echarts/lib/component/markPoint’) // 标注组件
require(‘echarts/lib/component/markLine’)
Vue.prototype.$echarts = echarts

3。
下面是一些折线图中的一些不常用属性(因为常用属性官网都有实例，可以自己修改实时查看效果更为方便，所以这里就写点儿不常用的属性，再次用到时可以方便查看)
// 首先找到dom节点作为echarts的容器
myChart = this.$echarts.init(document.getElementById(‘myEcharts’))
//setOptions 属性中可以配置echarts