使用V-chart时配置踩过的一些坑

野性酷女 2021-10-01 07:12 637阅读 0赞

# 如何配置图表信息 #

echart的配置项可谓是相当的海量，能不看就不看。而v-chart对其进行了不少的简化，所以我们想要自定义一个图表时，最好按照以下步骤来检查：

## 图表私有属性 ##

v-chart每一个图表都有自己独有的设置项，想要配置这些项需要在组件上加入 `:setting="chartSettings"`，然后在vue组建的data里设置chartSettings的值，如下:

<template>
      <ve-line :data="chartData" :settings="chartSettings"></ve-line>
    </template>
    
    <script>
      export default {
        data () {
          this.chartSettings = {
            xAxisType: 'time'
          }
          return {
            chartData: {
              columns: ['日期', '访问用户'],
              rows: [
                { '日期': '2018-01-01', '访问用户': 1393 },
                { '日期': '2018-01-02', '访问用户': 3530 },
                { '日期': '2018-01-03', '访问用户': 2923 }
              ]
            }
          }
        }
      }
    </script>

## [图表公有属性][Link 1] ##

v-chart所有图表组件中共有的属性，直接在图标组件上挂载`:属性名称="属性值"`即可设置，下面是一些比较常用的

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data</td> 
   <td>Object</td> 
   <td>无</td> 
   <td>图表的显示数据</td> 
  </tr> 
  <tr> 
   <td>setting</td> 
   <td>Object</td> 
   <td>无</td> 
   <td>图表的私有属性</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>String</td> 
   <td>400px</td> 
   <td>高度</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>String</td> 
   <td>auto</td> 
   <td>宽度，默认根据高度自动适配</td> 
  </tr> 
  <tr> 
   <td>tooltip-visible</td> 
   <td>boolean</td> 
   <td>true</td> 
   <td>是否显示提示框</td> 
  </tr> 
  <tr> 
   <td>legend-visible</td> 
   <td>boolean</td> 
   <td>true</td> 
   <td>是否显示图例</td> 
  </tr> 
  <tr> 
   <td><strong>extend</strong></td> 
   <td>Object</td> 
   <td>无</td> 
   <td>设置echart的详细属性</td> 
  </tr> 
 </tbody> 
</table>

公共属性上最重要的可以说就是extend属性了，在vchart的公共属性里extend居然不在基本属性了，而是放在文档后面专门开了一段讲。当时为了找到这个属性可以说是废了老半天功夫。如果你在前两者中都没有找到想要的设置项，那就可以通过这个属性来设置echart的配置，毕竟是基于echart的嘛，所以echart的所有配置在这里都可以适用，下边是配置示例：

<template>
      <ve-histogram :data="chartData" :extend="chartExtend"></ve-histogram>
    </template>
    
    <script>
      export default {
        data () {
          this.chartExtend = {
              series: {
                barWidth: 10
              },
              tooltip: {
                trigger: 'none'
              }
            }
          /* 等同于
            this.chartExtend = {
              series (v) {
                v.forEach(i => {
                  i.barWidth = 10
                })
                return v
              },
              tooltip (v) {
                v.trigger = 'none'
                return v
              }
            }
            等同于
            this.chartExtend = {
              'series.0.barWidth': 10,
              'series.1.barWidth': 10,
              'tooltip.trigger': 'none'
            }
          */
          return {
            chartData: { ... }
          }
        }
      }
    </script>

## [Echart配置项][Echart] ##

接下来就是重头戏了，如果你在前两者里都没有找到，那就只能从echart的配置项里找了，下面是一些目前比较常用的配置项

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="http://echarts.baidu.com/option.html#legend" rel="nofollow">legend</a></td> 
   <td>Object</td> 
   <td>用于控制图表的图例组件，包括位置、样式、类型、图标等</td> 
  </tr> 
  <tr> 
   <td><a href="http://echarts.baidu.com/option.html#series" rel="nofollow"><strong>series</strong></a></td> 
   <td>Object</td> 
   <td>每个图表的专属设置项，用于控制图表的详细样式位置等</td> 
  </tr> 
 </tbody> 
</table>

其中series的属性就可以完成绝大多数配置了，下边是一个配置示例 实现的效果为：

*  图例位于图表右方，且距右边缘20px
 *  图例颜色\#A0A0A0，字体12px
 *  环图中心相对于左上角距离112px, s92px
 *  隐藏环图上的文本标签和引导线
 *  环图内半径55px与外半径72px

//template
    <ve-ring :settings="chartSetting" legend-position="right" :extend="chartExtend"></ve-ring>
    
    ...
    
    //script
    data () {
      return {
        chartExtend: {
          series: {
            center: [112, 92]
          },
          legend: {
            right: 20,
            textStyle: {
              color: '#A0A0A0',
              fontSize: 12
            }
          }
        }
        chartSetting: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          radius: [55, 72]
        }
      }
    }

[Link 1]: https://v-charts.js.org/#/props
[Echart]: http://echarts.baidu.com/option.html#title