vc-chart v0.3.17

vc-chart

安装

npm i vc-chart echarts echarts-liquidfill

使用

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')

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

图表配置项

extend

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

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

data

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

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

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

折线图

标识 line

配置项

itemStyle

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

柱状图

标识  histogram

配置项

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

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

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

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

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

itemStyle

zebraCrossingStyle

条形图

标识  bar

配置项

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

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

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

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

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

itemStyle

zebraCrossingStyle

塔状图

标识  tower

配置项

itemStyle

双向图

标识  biaxial

配置项

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

itemStyle

饼图

标识  pie

配置项

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

雷达图

标识  radar

配置项

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

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

itemStyle

环形图

标识  ring

配置项

roseType 接收两个值 'radius' 和 'area'

• 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
• 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。

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

itemStyle

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

环形进度条

标识  ring-progress-bar

配置项

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

itemStyle

仪表板

标识  gauge

配置项

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

axisTickStyle

progressStyle

lineStyle

pointerStyle

栅格占比仪表板

标识  grid-gauge

配置项

水球图

标识  liquidfill

配置项

itemStyle

outlineStyle

waveStyle

3d柱状图

标识  histogram-3d

注意：该图表在宽度狭窄或者数量过多的情况下会出现柱状图重叠或者变形的情况

配置项

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

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

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

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

自定义图表

标识 custom

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

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