xhz-echarts

提供给 xhz 前端开发者使用的 echarts 组件

目的

简化echarts配置，针对柱状图、折线图进行了优化，使其更加符合业务场景的需要同时减轻开发人员的工作量

如何使用

安装

yarn add xhz-echarts
# or
npm install xhz-echarts

引入

全局引入：在main.js文件中添加如下代码

import XhzEcharts from 'xhz-echarts'

Vue.use(XhzEcharts)

按需引入：在页面文件中添加如下代码

import XhzEcharts from 'xhz-echarts'

export default {
	name: 'Index'
	components: {
    	XhzEcharts
  	},
}

页面中加入如下代码：

<xhz-echarts
    dom-id="lineId"
    chart-type="bar"
    multiple
    :y-data="yData"
    :x-data="xData"
    style="height: 500px;width: 1000px">
</xhz-echarts>

属性

| 名称 | 描述 | | -------------- | ------------------------------------------------------------ | | :domId | 类型String，作为echarts的渲染dom节点id，当页面存在多个echarts图表时，请指定不同的domId，否则会导致图表渲染不成功 | | :option | echarts图表配置项，可参考官网进行配置。默认配置为空 | | :manul | 类型Boolean，默认值为false，值为true时，请传入自定义option | | :chartType | 类型String，图表类型，默认值为line，目前仅支持line以及bar类型 | | :xData | 类型Array，当manul值为false时，x轴的数据 | | :yData | 类型Array，当manul值为false时，y轴的数据 | | :multiple | 类型Boolean，图表是否为多数据 | | :chartOption | 类型Object、图表初始化配置 | | :height | 类型String，图表高度，默认为auto，即跟随组件样式。须于width一同设置，单位为px。 | | :width | 类型String，图表宽度，默认为auto，即跟随组件样式。须于height一同设置，单位为px。 |

注意事项

属性注意事项

1. domId一般情况下建议必填，避免产生domId重复的情况。可设置为图表数据相关的英文解释。

2. option的配置请参考官网。xhz-echarts针对业务场景常用图表简化了此项配置，目前已简化的图表类型有柱状图以及折线图。默认的option如下：

   xAxis: {
       type: 'category',
       data: undefined,
   },
   yAxis: {
   	type: 'value',
       axisLabel: {
           margin: 2,
           formatter: function(value, index) {
               if (value >= 10000 && value < 10000000) {
                   value = value / 10000 + '万';
               } else if (value >= 10000000) {
                   value = value / 10000000 + '千万';
               }
               return value;
           }
       }
   },
   series: []

   使用者也可以传入其他配置（当manul为true时下述不生效），类似于

   title: {
   	text: 'xhz-echarts'
   },
   legend: {
   	data: ['一','二','三']
   },
   xAxis: {
   	type: 'category',
       axisLabel: {
       	interval: 0,
       	rotate: '25'
       },
   },
   yAxis: {
   	type: 'value',
   	axisLabel: {
   		margin: 3,
   	}
   },

   当传入option为上方代码时，xhz-echarts会将默认配置以及使用者传入的option进行整合，且以使用者设置的option配置优先，上述例子整合结果如下：

   title: {
   	text: 'xhz-echarts'
   },
   legend: {
   	data: ['一','二','三']
   },
   xAxis: {
       type: 'category',
       data: undefined,
       axisLabel: {
       	interval: 0,
       	rotate: '25'
       },
   },
   yAxis: {
   	type: 'value',
   	axisLabel: {
   		margin: 3,
   		formatter: function(value, index) {
               if (value >= 10000 && value < 10000000) {
                   value = value / 10000 + '万';
               } else if (value >= 10000000) {
                   value = value / 10000000 + '千万';
               }
               return value;
           }
   	}
   },

3. manul为true时，传入的option将成为图表渲染配置的唯一值，此时echarts的配置完全由外部传入的option决定，属性chartType、xData、yData、multiple等设置都将失效

4. chartType目前仅支持到line以及bar，后续会有更多图表得到支持

5. yData仅接收数组形式的数据，可单独指定某一条数据的图表类型，如不设置，则默认设置为chartType类型值，可接受数据结构如下：

   普通数组结构（multiple为false）

   var arr = [10,20,30,40,50]

   多数据结构（multiple为true）

   var arr = [[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,16]]

   对象数组结构（multiple为true）

   var arr = [
   	{
           name: '一',
           type: 'line',
           data: [80, 200, 170, 80, 70, 110, 130]
       },
       {
           name: '二',
           data: [120, 200, 280, 80, 70, 110, 150]
       },
       {
           name: '三',
           data: [111, 269, 150, 25, 70, 156, 130],
       }
   ]

6. multiple仅在图表为多数据时进行配置，默认为false

7. chartOption配置详见官网中init方法的opt参数

8. height以及width配置详见官网中init方法的opt参数

用法注意事项

• 可在组件上使用内联样式指定图表的宽高，也可传入chartOption，或者是height以及width。此时需要注意的是设置height以及width的优先级高于chartOption，chartOption高于内联样式。如以上三种方式都未设置，图表将无法正常显示。

更多使用细节

想了解更多内容请联系作者。

• 邮箱：[email protected]
• qq：1048438791