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 | import Echarts from 'vue-echarts'; |
构建柱状图
打开页面文件(比如 vue 示例的 views\Home.vue 文件),在 template 段中添加如下代码:
1 | <chart :options="chartOptionsBar" style="width:100%;height:100%"></chart> |
chart 就是我们刚才在 main.js 中引入的组件, chartOptionsBar 是传入组件中的参数。
然后在 script 中定义一组数据,代码如下:
1 | export default { |
然后就可以运行程序并从浏览器访问了。