Morning Star's blog
  2. 前端开发
  3. Vue框架

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]
                    }
                ]
            }
        }
    }

}

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

TAGS