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");

转载于:https://www.cnblogs.com/zjh-study/p/10775764.html

相关资源：vue-cli项目中使用echarts图表实例