Vue中使用Echarts【第一篇】实现简单柱状图

所需工具: Vue + Vue CLI + Echarts

第一步，初始化Vue项目&引入Echarts

1.使用Vue CLi构建Vue项目，并引入Echarts，引入方式见官网
在这里用npm的方式引入:

npm install echarts --save

第二步，如果上述步骤没出啥意外，就可以在Vue项目中愉快的使用Echarts了;-)

现在开始尝试实现官网给出的柱状图示例。

1.在script里引入echarts

import echarts from 'echarts'

2.在data初始化一个Echarts示例并配置option

data() {
      return {
        chart: null,
        option:  {
            title: {
                text: 'Biu~简单柱状图示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }],
            color: ['#66FF99']
        }
      }

关于option的配置项说明:

• title: 标题组件，包含主标题和副标题。
• tooltip: 提示框组件
• legend: 图例组件
• xAxis: 直角坐标系 grid 中的 x 轴
• yAxis: 直角坐标系 grid 中的 y 轴
• series: 系列列表,具体设置图标项的样式，图形展示类型等。

3.接下来就是模板里的内容了，写一个极简的例子,创建一个div,并绑定ref

 <div ref="echarts">
  </div>

4.如何将模板和写好的option实例绑定起来呢，这时候就需要用到Echarts提供的API啦
（1）调用init()API,创建一个 ECharts 实例
（2）调用setOption()API,设置图表实例的配置项以及数据

methods: {
      getPage() {
        this.chart = echarts.init(this.$refs.echarts);
        // 使用刚指定的配置项和数据显示图表。
        this.chart.setOption(this.option);
      }
    }

5.到此，一个简单的Echarts柱状图就完成啦~

​

未完待续;-)

需要查看源码请移步我的github: Echarts-Demos