首页 > 其他分享> 文章详细

Vue 系列(一): Vue + Echarts 开发可复用的柱形图组件

2019-08-02 15:03:24 阅读：226 来源： 互联网

标签：Vue option type 柱形图 echarts 组件 data Echarts

前置条件
安装echarts
引入echarts
柱形图组件开发
在何时初始化组件？
完整的代码
记得注册组件!!!

本文归柯三（kesan）所有，转载请注明出处 https://www.cnblogs.com/kesan/p/11255859.html

前置条件

系统中已经安装如下组件

node.js
npm
vue
vue-cli

安装echarts

npm install echarts

引入echarts

在组件源码处引入echarts组件

import echarts from 'echarts'

如果需要按需引入，请参考官方文档
点此查看官方文档

柱形图组件开发

先定义一个宽高均为500px的div以供echarts绘出组件

<template>
    <div>
        <div id="test" style="width:500px;height:500px">
        </div>
    </div>
</template>

定义组件需要的属性
在本例中，我们定义了两个需要由用户来提供数据的属性

xData 即x轴的数据
yData 即y轴的数据

  props: {
    'xData': Array,
    'yData': Array
  }

初始化柱形图组件

首先我们需要定义柱形图的option (title也可以抽出来设置为属性)

option: {
        title: {
            text: 'Vue柱形图组件'
        },
          xAxis: {
            type: 'category',  
            data: []
          },
          yAxis: {
              type: 'value'
          },
          series: [
            {
              name: '销量',
              type: 'bar',
              data: []
            }
          ]
      }

** 初始化组件 **

    this.chart = echarts.init(document.getElementById("test"))
    this.option.xAxis.data = this.xData
    this.option.series[0].data = this.yData
    this.chart.setOption(this.option)

在何时初始化组件？

首先来看一看著名的Vue生命周期图:

很显然在Created时组件都还没渲染，因此比较合适的时机是在mounted完成之后执行ECharts组件初始化的操作。

也就是说我们要将ECharts初始化工作放到mounted函数中执行，如果放入到Created中就会出错，因为Created时组件还未进行渲染工作。

完整的代码

<template>
    <div>
        <div id="test" style="width:500px;height:500px">
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import echarts from 'echarts'
export default {
  name: 'Histogram',
  data: function () {
    return {
      option: {
        title: {
            text: 'Vue柱形图组件'
        },
          xAxis: {
            type: 'category',  
            data: []
          },
          yAxis: {
              type: 'value'
          },
          series: [
            {
              name: '销量',
              type: 'bar',
              data: []
            }
          ]
      },
      chart: {} 
    }
  },
  props: {
    'xData': Array,
    'yData': Array
  },
  methods: {
    updateData: function () {
      console.log("update data")
    }
  },
  created: function (){
      console.log(this.xData)
      console.log('created')
  },
  mounted: function(){
    this.chart = echarts.init(document.getElementById("test"))
    this.option.xAxis.data = this.xData
    this.option.series[0].data = this.yData
    this.chart.setOption(this.option)
  }
}
</script>

记得注册组件!!!

Vue.component('组件名', 组件)

标签：Vue,option,type,柱形图,echarts,组件,data,Echarts
来源： https://www.cnblogs.com/kesan/p/11255859.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9