# vc-chart

> 图表组件

Latest version **0.3.17** (published 2022-05-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install vc-chart
pnpm add vc-chart
yarn add vc-chart
bun add vc-chart
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.17 |
| Published | 2022-05-23 |
| First published | 2021-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 677.1 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | smite |

## Links

- npm: https://www.npmjs.com/package/vc-chart
- npm.io page: https://npm.io/package/vc-chart

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [echarts](https://npm.io/package/echarts.md) ^5.3.2
- [codemirror](https://npm.io/package/codemirror.md) ^5.62.0
- [utils-lite](https://npm.io/package/utils-lite.md) ^0.1.15
- [echarts-liquidfill](https://npm.io/package/echarts-liquidfill.md) ^3.1.0

## Recent versions

- 0.3.17 (latest) — 2022-05-23
- 0.3.16 — 2022-05-23
- 0.3.15 — 2022-05-23
- 0.3.14 — 2022-05-23
- 0.3.13 — 2022-05-23
- 0.3.12 — 2022-05-23
- 0.3.11 — 2022-05-11
- 0.3.10 — 2022-05-11
- 0.3.9 — 2022-05-10
- 0.3.8 — 2022-05-10
- 0.3.7 — 2022-05-10
- 0.3.6 — 2022-05-10
- 0.3.5 — 2022-05-10
- 0.3.4 — 2022-05-09
- 0.3.3 — 2022-05-09
- … 36 more at https://npm.io/package/vc-chart/versions

## README

# vc-chart


### 安装


```javascript
npm i vc-chart echarts echarts-liquidfill
```


### 使用


```javascript
import Vue from 'vue'
import App from './App.vue'
import VcChart from 'vc-chart'

Vue.use(VcChart)
new Vue({
  render: h => h(App),
}).$mount('#app')
```


```vue
<template>
  <div id="app">
    <vc-chart :data='chartData'
              type='histogram'
              :extend='extend'
              :setting='chartSetting'
              ref="reHistogramChart" />
  </div>
</template>

<script>

export default {
  data(){
    return{
      chartSetting:{},
      extend:{}, 
      chartData:{
            columns:['date','test1'],
            rows:[
                {'date':'1/1','test1':150,'test2':100,'test3':100,'test4':100},
                {'date':'1/2','test1':100,'test2':150,'test3':150,'test4':150},
                {'date':'1/3','test1':200,'test2':250,'test3':250,'test4':250},
                {'date':'1/4','test1':200,'test2':300,'test3':300,'test4':300},
                {'date':'1/1','test1':150,'test2':100,'test3':100,'test4':100},
              ]
            }
    }
  },
}
</script>
```


> #### 图表配置项

| 配置项 | 简介 | 类型 | 默认值 |
| --- | --- | --- | --- |
| colors | 设置图表的系列颜色 | array | - |
| height | 设置图表的高度 | string | 400px |
| setting | 配置项 | object | - |
| extend | 更方便的设置图表的属性,对配置项设置的属性进行并和 | object | - |
| type | 设置图片类型 | string | line |
| isDark | 是否设置黑暗模式 | boolean | false |
| data | 数据 | object,number,string,array | - |



> **extend**



为了能够更方便的设置属性配置项等，可以通过extend属性实现对已配置好的内部属性进行单独的设置， extend为对象类型，对象内的属性可以是函数，也可以对象，也可以是其他类型的值


- 当属性为函数时，设置的是函数的返回值
- 当属性为对象时，如果在options中对应的属性为对象(eg: tooltip)或包含对象的数组(eg: series)， 对应的配置会被合并，否则将直接覆盖对应的配置



> **data**



针对不同的的图表data的数据结构是多变的，但一般情况都会使用下面的结构进行


```javascript
data:{
    columns:['date','test1','test2','test3'],
    rows:[
          {'date':'1/1','test1':150,'test2':100,'test3':1000,'test4':100},
          {'date':'1/2','test1':100,'test2':150,'test3':150,'test4':150},
          {'date':'1/3','test1':200,'test2':250,'test3':250,'test4':250},
          {'date':'1/4','test1':200,'test2':300,'test3':300,'test4':300},
          {'date':'1/1','test1':150,'test2':100,'test3':100,'test4':100},
          {'date':'1/2','test1':100,'test2':150,'test3':150,'test4':150},
         ]
}
```


- columns 中是维度和指标的集合，vc-chart 中的大部分图表都是单维度多指标，所以默认第一个值为 维度，剩余的值为指标
- rows 中是数据的集合。



**一些特殊的图表则会以其他的数据结构进行**


环形进度条图(ring-progress-bar) 、仪表板(gauge)、栅格占比仪表板(grid-gauge)这三种图表的data形式则会通过填写数字的形式进行


```
data:20
```


水球图(liquidfill) 则是通过传递一个数组来展示数据


```
data:[0.6,0.4,0.2]
```

> 获取图表的dom

```js
// xxxx代表自己定义的名称
this.$ref['xxxxx'].getDom()
```



### 折线图

> #### **标识	line**

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1632881188585-bb09c5b9-72b3-4a3e-985f-d73bff58680d.png)
> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| legend | 是否显示图例组件 | boolean | - |
| dataZoom | 是否显示缩放工具 | boolean | - |
| area | 是否显示为面积图 | boolean | - |
| forecast | 是否显示为预测图 | boolean | 虚线为预测值，实线为实际值 |
| forecastPoint | 预测点 | number | 当forecast为true时生效 |
| label | 是否显示每个点的数值 | boolean | - |
| smooth | 设置曲线是否圆滑 | boolean | - |
| boundaryGap | 坐标两边是否要要留白  | boolean | 默认为true |
| legendName | 设置图表上方图例的别名 | object | - |
| yAxisName | 纵坐标的标题 | array | - |
| stack | 是否展示堆叠层 | boolean | 当forecas为true时无效，且该配置项配合area使用 |
| itemStyle | 设置图表的样式 | object | forecast 值为true是失效 |

> #### itemStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| label | 指定类型 | string | - |
| backgroundColor | 设置线条颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置转折点的颜色 | string | - |
| borderWidth | 设置转折点大小 | number/string | - |

> legendName 可以设置 图表上的图例别名 例如：legendName :{ 'test1': '测试1' } 即将test1的图例名称修改为‘测试1’



### 柱状图
> #### 标识  histogram

![histogram.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1632880583895-e03bbc95-bfcf-4b92-8daa-f0899ffab245.png)
> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| dataZoom | 设置是否显示缩放条 | boolean | - |
| legend | 是否显示图例组件 | boolean | - |
| legendName | 设置图表上方图例的别名 | object | - |
| yAxisName | 设置纵坐标的标题 | array | - |
| stack | 是否展示堆叠层 | boolean | - |
| dataOrder | 设置排序 | object | 默认不排序 |
| label | 是否显示数据的文本 | boolean | - |
| radius | 设置柱状图的圆角 | number | - |
| isAllRadius | 是否四个角都使用圆角 | boolean | 当radius有值时生效 |
| itemStyle | 设置柱状图的样式 | array | - |
| zebraCrossing | 是否添加斑马线 | boolean | 当stack为true时失效 |
| zebraCrossingStyle | 设置斑马线的样式 | object | 当zebraCrossing为true时生效 |
| groupColor | 以组为单位进行颜色设置                 | boolean | 默认为false                 |
| groupColorStyle    | 设置组的颜色                           | array   | 在groupColor开启时生效 |
| showLine | 设置一个或者几个指标以折线图的形式展示 | array | - |

> dataOrder 可以设置 desc 和 acs  设置   dataOrder: { label: 'test1',order: 'acs' }  即将test1的数据从小到大排序

> legendName 可以设置 图表上的图例别名 例如：legendName :{ 'test1': '测试1' } 即将test1的图例名称修改为‘测试1’

> groupColor 设置为true后柱状图中的，将为每一组数据设置为同一种颜色，不同组的数据颜色将不一样，可以通过groupColorStyle属性对每一组数据的颜色进行设置。

> 以下为 groupColor 关闭 和 开启 后柱状图的显示情况

![img](https://cdn.nlark.com/yuque/0/2021/png/22826202/1635150172233-139a4c3a-c374-4d19-b4bd-863aaa922974.png)![img](https://cdn.nlark.com/yuque/0/2021/png/22826202/1635150136735-e2634812-2508-4aca-b5c3-cea9a4cfbaec.png)

> 可以通过groupColorStyle属性对柱状图的颜色进行修改，groupColorStyle:['red',['#01EAED','#029ED9'],'green'],如果填入的是一个数组的话就会以渐变的形式进行展示





> #### itemStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| label | 指定类型 | string | - |
| backgroundColor | 设置柱状图颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置柱状图边框颜色 | string | - |
| borderWidth | 设置柱状图边框大小 | number/string | - |



> #### zebraCrossingStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| backgroundColor | 设置斑马线状态下的背景颜色 | string | - |
| lineColor | 设置斑马线的颜色 | string | - |



### 条形图
> #### 标识  bar

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1632885285502-444c0cff-9f1a-449d-8f82-5492b0866243.png)
> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| dataZoom | 设置是否显示缩放条 | boolean | - |
| legend | 是否显示图例组件 | boolean | - |
| legendName | 设置图表上方图例的别名 | object | - |
| yAxisName | 设置纵坐标的标题 | array | - |
| stack | 是否展示堆叠层 | boolean | - |
| dataOrder | 设置排序 | object | 默认不排序 |
| label | 是否显示数据的文本 | boolean | - |
| radius | 设置柱状图的圆角 | number | - |
| isAllRadius | 是否四个角都使用圆角 | boolean | 当radius有值时生效 |
| itemStyle | 设置柱状图的样式 | array | - |
| zebraCrossing | 是否添加斑马线 | boolean | 当stack为true时失效 |
| zebraCrossingStyle | 设置斑马线的样式 | object | 当zebraCrossing为true时生效 |
| groupColor | 以组为单位进行颜色设置 | boolean | 默认为false |
| groupColorStyle | 设置组的颜色 | array | 在groupColor开启时生效 |

> dataOrder 可以设置 desc 和 acs  设置   dataOrder: { label: 'test1',order: 'acs' }  即将test1的数据从小到大排序

> legendName 可以设置 图表上的图例别名 例如：legendName :{ 'test1': '测试1' } 即将test1的图例名称修改为‘测试1’

> groupColor 设置为true后柱状图中的，将为每一组数据设置为同一种颜色，不同组的数据颜色将不一样，可以通过groupColorStyle属性对每一组数据的颜色进行设置。

> 以下为 groupColor 关闭 和 开启 后柱状图的显示情况



![img](https://cdn.nlark.com/yuque/0/2021/png/22826202/1635151718632-0492289c-679f-4bc6-9704-8990a8fc561d.png)

![img](https://cdn.nlark.com/yuque/0/2021/png/22826202/1635151770626-38c70e30-a556-453e-b3ad-18f950448c1f.png)

> 可以通过groupColorStyle属性对柱状图的颜色进行修改，groupColorStyle:['red',['#01EAED','#029ED9'],'green'],如果填入的是一个数组的话就会以渐变的形式进行展示



> #### itemStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| label | 指定类型 | string | - |
| backgroundColor | 设置柱状图颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置柱状图边框颜色 | string | - |
| borderWidth | 设置柱状图边框大小 | number/string | - |

> **zebraCrossingStyle**

| 配置项          | 简介                       | 类型   | 备注 |
| --------------- | -------------------------- | ------ | ---- |
| backgroundColor | 设置斑马线状态下的背景颜色 | string | -    |
| lineColor       | 设置斑马线的颜色           | string | -    |

### 塔状图
> #### 标识  tower

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1632886771418-9ea7a2fb-4b0e-439e-b5c5-ae4a868a5b3c.png)
> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| dataZoom | 设置是否显示缩放条 | boolean | - |
| yAxisName | 设置纵坐标的标题 | array | - |
| label | 是否显示数据的文本 | boolean | 默认true |
| itemStyle | 设置柱状图的样式 | array | - |

> #### itemStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| label | 指定类型 | string | - |
| backgroundColor | 设置柱状图颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置柱状图边框颜色 | string | - |
| borderWidth | 设置柱状图边框大小 | number/string | - |



### 双向图
> #### 标识  biaxial

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1632887576951-3c09735d-3b3a-4b27-ae21-7830136ac747.png)
> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| dataZoom | 设置是否显示缩放条 | boolean | - |
| yAxisName | 设置纵坐标的标题 | array | - |
| legendName | 设置图表上方图例的别名 | object | - |
| label | 是否显示数据的文本 | boolean | 默认true |
| itemStyle | 设置柱状图的样式 | array | - |

> legendName 可以设置 图表上的图例别名 例如：legendName :{ 'test1': '测试1' } 即将test1的图例名称修改为‘测试1’



> #### itemStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| label | 指定类型 | string | - |
| backgroundColor | 设置柱状图颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置柱状图边框颜色 | string | - |
| borderWidth | 设置柱状图边框大小 | number/string | - |



### 饼图
> #### 标识  pie

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1632894888802-ac5d268d-3f5f-4129-81bc-f9c6ce00416b.png)
> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| legend | 是否显示图例组件 | boolean | - |
| radius | 设置半径 | number | 默认100 |
| center | 设置圆心位置 | array | 默认['50%','50%'] |
| level | 设置多圆饼图 | array | - |
| hoverAnimation | 是否开启 hover 在扇区上的放大动画效果 | boolean | 默认值为true |
| roseType | 设置为玫瑰图图 | string | 可选值:'radius'和'area' |
| legendName | 设置图表上方图例的别名 | object | - |
| label | 是否显示数据的文本 | boolean | 默认true |
| itemStyle | 设置饼图的样式 | array | - |

> level 的值接受二维数组，例如：[['a', 'b'], ['c', 'd']], 表示的含义是内层展示的是维度中的'a', 'b'的指标加在一起组成的饼图，外层为'c', 'd'的指标加在一起组成的环图。

>  roseType 接收两个值 'radius' 和 'area'
> - 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
> - 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。

> legendName 可以设置 图表上的图例别名 例如：legendName :{ '1/1': '测试1' } 即将 1/1 的图例名称修改为‘测试1’
> **注意：上面所描述的 '1/1' 为 rows 中的维度里的值**



> #### itemStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| label | 指定类型 | string | - |
| backgroundColor | 设置饼图颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置饼图边框颜色 | string | - |
| borderWidth | 设置饼图边框大小 | number/string | - |



### 雷达图

> #### 标识  radar

![img](https://cdn.nlark.com/yuque/0/2021/png/22826202/1635411422520-3041a1e9-d009-4e84-8e5b-dbb0d0597fba.png)



> #### **配置项**

| 配置项         | 简介                 | 类型    | 备注              |
| -------------- | -------------------- | ------- | ----------------- |
| legend         | 是否显示图例组件     | boolean | -                 |
| radius         | 设置半径             | array   | 默认[70,100]      |
| center         | 设置圆心位置         | array   | 默认['50%','50%'] |
| indicatorName  | 设置指标名称         | object  | -                 |
| symbolSize     | 设置数据标记的大小   | number  | 默认为0           |
| indicatorColor | 设置指标的颜色       | string  | -                 |
| axisLineColor  | 设置坐标轴轴线的颜色 | string  | -                 |
| splitLineColor | 设置分隔线的颜色     | string  | -                 |
| splitArea      | 设置分隔区域的颜色   | array   | -                 |
| itemStyle      | 设置区域填充的颜色   | array   | -                 |

>  indicatorName可以设置图表上的指标别名 例如：indicatorName :{ 'test1': '测试1' } 即将 test1 的指标名称修改为‘测试1’

>  splitArea通过在数组中加入设置的颜色即可修改分隔区域的颜色，例如：splitArea:['red','blue','green']



> #### **itemStyle**

| 配置项          | 简介               | 类型   | 备注                                             |
| --------------- | ------------------ | ------ | ------------------------------------------------ |
| label           | 指定类型           | string | 例如上图的 '1/1'                                 |
| backgroundColor | 设置区域填充的颜色 | array  | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| x               | 渐变圆心的横坐标   | number | 默认0.5                                          |
| y               | 渐变圆心的纵坐标   | number | 默认0.5                                          |
| r               | 渐变圆心的半径     | number | 默认0.5                                          |

### 环形图
> #### 标识  ring

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1632897425678-ef70d75a-a4c3-4569-a3ad-fdf2cbade237.png)
> #### **配置项**

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| legend | 是否显示图例组件 | boolean | - |
| radius | 设置半径 | array | 默认[70,100] |
| center | 设置圆心位置 | array | 默认['50%','50%'] |
| hoverAnimation | 是否开启 hover 在扇区上的放大动画效果 | boolean | 默认为true |
| roseType | 设置为玫瑰图图 | string | 可选值:'radius'和'area' |
| interval | 开启饼图的间隔 | boolean | 默认为false |
| outerRing | 显示外环 | boolean | 默认为false |
| innerRing | 显示内环 | boolean | 默认为false |
| innerRingAnimation | 是否开启内环的旋转动画 | boolean | 默认为false |
| borderRadius | 设置圆角 | number | 默认为0 |
| legendName | 设置图表上方图例的别名 | object | - |
| label | 是否显示数据的文本 | boolean | 默认true |
| itemStyle | 设置饼图的样式 | array | - |

>  roseType 接收两个值 'radius' 和 'area'
> - 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
> - 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。

> legendName 可以设置 图表上的图例别名 例如：legendName :{ '1/1': '测试1' } 即将 1/1 的图例名称修改为‘测试1’
> **注意：上面所描述的 '1/1' 为 rows 中的维度里的值**



> #### itemStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| label | 指定类型 | string | - |
| backgroundColor | 设置环形图颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置环形图边框颜色 | string | - |
| borderWidth | 设置环形图边框大小 | number/string | - |

> 当 innerRing 为 true 时backgroundColor只会取数组中的第一位作为背景颜色



### 环形进度条
> #### 标识  ring-progress-bar

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1633914494972-01a5e063-87bb-4841-b80b-2f887c3d36f2.png)
> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| radius | 设置半径 | array | 默认[70,100] |
| center | 设置圆心位置 | array | 默认['50%','50%'] |
| label | 是否显示数据的文本 | boolean | 默认true |
| labelSize | 设置文本的大小 | number | 默认50 |
| labelColor | 设置文字的颜色 | string | 默认'#888888' |
| labelShadowColor | 设置文字的阴影颜色 | string | - |
| labelShadowBlur | 设置文字的阴影大小 | number | - |
| pieces | 自定义进度条的颜色 | array | - |
| backgroundStyle | 设置圆环的底色 | string | 默认'#464451' |
| itemStyle | 设置饼图的样式 | array | 当pieces启用时，itemStyle的backgroundColor样式失效 |

> pieces 属性可以设置圆环在处于不同数值下是颜色状态，例如：pieces:[{ min: 10, max: 50, color: 'red' }]  这里表示当数值处于10-50之间时圆环的颜色为红色，而在这个区间之外的数值因为没有设置的将为默认颜色展示。
> 具体设置可以参照 [echart的分段式视觉映射组件](https://echarts.apache.org/zh/option.html#visualMap-piecewise.pieces)



> #### itemStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| backgroundColor | 设置圆环的颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置圆环边框颜色 | string | - |
| borderWidth | 设置圆环边框大小 | number/string | - |



### 仪表板
> #### 标识  gauge

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1633915979673-7523f7dc-357e-459b-bdeb-e2e02947f79a.png)
> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| radius | 设置半径 | array | 默认[70,100] |
| center | 设置圆心位置 | array | 默认['50%','50%'] |
| label | 是否显示数据的文本 | boolean | 默认true |
| name | 设置名称 | string | - |
| unifiedColor | 设置是否样式统一 | boolean | 默认false |
| axisTickLabel | 是否显示轴刻度文字 | boolean | 默认true |
| axisTickLabelColor | 设置轴刻度文字的颜色 | string | - |
| axisTick | 设置是否显示轴刻度 | boolean | 默认true |
| axisTickStyle | 设置仪表盘轴刻度样式 | object | - |
| progress | 设置是否显示进度条 | boolean |  默认false |
| progressStyle | 设置进度条样式 | object | 当progress启用时，生效 |
| lineStyle | 设置仪表盘轴线样式 | object | - |
| pointerStyle | 设置指针样式 | object | - |

>  unifiedColor 启动时仪表盘的样式以轴线样式的样式为准，将轴刻度和指针的样式统一。



> #### axisTickStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| backgroundColor | 设置轴刻度的颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |

> #### progressStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| backgroundColor | 设置进度条的颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置进度条边框颜色 | string | - |
| borderWidth | 设置进度条边框大小 | number/string | - |

> #### lineStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| backgroundColor | 设置进度条的颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| value | 设置轴线分段的位置  | number | 值的范围 0-1 之间 |

> #### pointerStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| backgroundColor | 设置指针的颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置指针边框颜色 | string | - |
| borderWidth | 设置指针边框大小 | number/string | - |



### 栅格占比仪表板
> #### 标识  grid-gauge

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1633919671935-2d6a964a-7606-4525-9db9-9da43b36fa66.png)
> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| radius | 设置半径 | array | 默认[70,100] |
| center | 设置圆心位置 | array | 默认['50%','50%'] |
| label | 是否显示数据的文本 | boolean | 默认true |
| name | 设置名称 | string | - |
| fontSize | 文本的大小 | number | 默认40 |
| labelColor | 设置文本的颜色 | string | 默认'#464646' |
| labelShadowColor | 设置文本的阴影颜色 | string | - |
| labelShadowBlur | 设置文本阴影大小 | number | - |
| splitNumber | 设置栅格的数量 | number | 默认100 |
| backgroundColor | 设置栅格背景颜色样式 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| lineColor | 设置栅格颜色样式 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |



### 水球图
> #### 标识  liquidfill

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1633921224190-b8b29964-9971-4789-95ec-a5acf1174bec.png)
> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| label | 是否显示数据的文本 | boolean | 默认true |
| fontSize | 设置文本的字体大小 | number | 默认50 |
| colors | 设置波浪的颜色 | array | - |
| opacity | 设置波浪的透明度 | number | 默认0.95 |
| hoverOpacity | 设置波浪hover效果的透明度 | number | 默认0.8 |
| animation | 设置是否启用动画 | boolean | 默认true |
| amplitude | 设置波浪的幅度 | string | 默认:'8%' |
| direction | 设置波浪的方向 | string | 默认'right' |
| outlineShow | 设置外轮廓是否显示 | boolean | 默认true |
| shape | 设置水球的形状  | string | 默认'circle' |
| itemStyle | 设置水球图的样式 | object | - |
| outlineStyle | 设置水球图外框的样式 | object | - |
| waveStyle | 设置波浪的样式 | object | - |

> #### itemStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| backgroundColor | 设置水球图的颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置水球图边框颜色 | string | - |
| borderWidth | 设置水球图边框大小 | number/string | - |
| shadowColor | 控制水球图阴影颜色 | string | - |
| shadowBlur | 控制阴影大小 | number | - |

> #### outlineStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| backgroundColor | 设置水球图外框的颜色 | array | 一种颜色是时候为单色，多于一种颜色的时候为渐变色 |
| borderColor | 设置水球图外框边框颜色 | string | - |
| borderWidth | 设置水球图外框边框大小 | number/string | - |
| shadowColor | 控制水球图外框阴影颜色 | string | - |
| shadowBlur | 控制外框阴影大小 | number | - |
| borderDistance | 控制图表外框的边界距离 | number | - |

> #### waveStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| shadowColor | 控制波浪阴影颜色 | string | - |
| shadowBlur | 控制波浪阴影大小 | number | - |

### 3d柱状图
> #### 标识  histogram-3d

![image.png](https://cdn.nlark.com/yuque/0/2021/png/22826202/1633931616622-e4e0085c-d7fc-42a3-bc47-151c84d8a3c3.png)
> **注意：该图表在宽度狭窄或者数量过多的情况下会出现柱状图重叠或者变形的情况**

> #### 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| legend | 是否显示图例组件 | boolean | 默认true |
| legendName | 设置图例名称 | object | - |
| yAxisName | 设置纵坐标的标题 | array | - |
| stack | 是否展示堆叠层  | boolean | 默认false |
| backrgoundStyle | 设置图表的样式 | object | - |

> legendName 可以设置 图表上的图例别名 例如：legendName :{ 'test1': '测试1' } 即将test1的图例名称修改为‘测试1’

> 只有在stack开启时才会展示多组数据，当该属性为关闭状态时只会展示第一组数据

```javascript
chartData:{
            columns:['date','test1','test2','test3','test4'],
            rows:[
                {'date':'1/1','test1':150,'test2':100,'test3':100,'test4':100},
                {'date':'1/2','test1':100,'test2':150,'test3':150,'test4':150},
                {'date':'1/3','test1':200,'test2':250,'test3':250,'test4':250},
                {'date':'1/4','test1':200,'test2':300,'test3':300,'test4':300},
                {'date':'1/1','test1':150,'test2':100,'test3':100,'test4':100},
                {'date':'1/2','test1':100,'test2':150,'test3':150,'test4':150},
                {'date':'1/1','test1':150,'test2':100,'test3':100,'test4':100},
                {'date':'1/2','test1':100,'test2':150,'test3':150,'test4':150},
              ]
            }

// 当stack开启时会展示 test1到test4的数据，关闭时只会展示test1的数据
```
> #### itemStyle

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| label | 指定类型 | string | - |
| frontBg | 控制柱状图正面颜色 | array | - |
| rightBg | 控制柱状图右侧面颜色 | array | - |
| topBg | 控制柱状图顶部面颜色 | array | - |

>  以上的颜色设置都是一种颜色是时候为单色，多于一种颜色的时候为渐变色



### 自定义图表

> #### 标识 custom

当设置了该标识符后只需要在 `extend` 这个属性中填写echarts配置即可，例如配置一个散点图

![img](https://cdn.nlark.com/yuque/0/2021/png/22826202/1634709657595-fd863fe1-2b2f-4608-9fcb-36b55a84e484.png)

```vue
<template>
  <div id="app">
    <div class="title">自定义</div>
    <vc-chart type='custom'
              :extend='extend'
              ref="reCustomChart" />
  </div>
</template>

<script>

export default {
  data(){
    return{
      extend:{
         xAxis: {},
         yAxis: {},
         series: [
           {
             symbolSize: 20,
             data: [
               [10.0, 8.04],
               [8.07, 6.95],
               [13.0, 7.58],
               [9.05, 8.81],
               [11.0, 8.33],
               [14.0, 7.66],
               [13.4, 6.81],
               [10.0, 6.33],
               [14.0, 8.96],
               [12.5, 6.82],
               [9.15, 7.2],
               [11.5, 7.2],
               [3.03, 4.23],
               [12.2, 7.83],
               [2.02, 4.47],
               [1.05, 3.33],
               [4.05, 4.96],
               [6.03, 7.24],
               [12.0, 6.26],
               [12.0, 8.84],
               [7.08, 5.82],
               [5.02, 5.68]
             ],
             type: 'scatter'
           }
         ]
      }, 
    }
  },
}
</script>

```

---
_Source: https://npm.io/package/vc-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._