Vue 中使用 ECharts 展现图表

ECharts 是著名的 Web 端图表展现工具库,可以方便的绘制各种数据分析图像,比如柱状图,折线图…等等。

在 Vue 生态中,已经有了将 ECharts 包装为 Vue 的组件的库,我们可以直接使用。

增加 ECharts

在已有的 Vue 项目中,我们可以通过执行:

1
yarn add echarts vue-echarts

按照需要的第三方包。

如果你使用 npm 作为项目的包管理工具,可以执行:

1
npm install echarts vue-echarts -D

引入 ECharts 组件

在本文中,我们以一个常用的柱状图为样例来说明 ECharts 组件的使用。

在 main.js 中添加以下代码以引入 ECharts 组件:

1
2
3
4
5
import Echarts from 'vue-echarts';

import 'echarts/lib/chart/bar';

Vue.component('chart', Echarts);

构建柱状图

打开页面文件(比如 vue 示例的 views\Home.vue 文件),在 template 段中添加如下代码:

1
<chart :options="chartOptionsBar" style="width:100%;height:100%"></chart>

chart 就是我们刚才在 main.js 中引入的组件, chartOptionsBar 是传入组件中的参数。

然后在 script 中定义一组数据,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default {
name: "Home",
data() {
return {
chartOptionsBar: {
xAxis: {
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [50, 31, 28, 86]
}
]
}
}
}

}

然后就可以运行程序并从浏览器访问了。

本文标题:Vue 中使用 ECharts 展现图表

文章作者:梅老师

发布时间:2020年04月12日 - 17:04

最后更新:2020年05月28日 - 16:05

原始链接:https://www.mls-tech.info/web/vue/vue-use-echarts/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。