v-charts 的使用

echarts 官网地址：https://echarts.apache.org/examples/zh/index.html
vue 使用 v-charts：https://woolen.gitee.io/v-charts/#/
options 属性操作文档：https://echarts.apache.org/zh/option.html

以环形图为例，记录 v-charts 使用方法

1. 使用组件

<ve-ring 
  :after-config="afterConfig"
  :data="ringData"
  :settings="chartSettings"
  :extend="extendRing"
>
</ve-ring>

2. 普通配置 settings

• settings 为 v-charts 提供的设置项，包含的是 echarts 中常用的一些配置项，绝大多数时候均满足需要
• chartSettings 为结构体，与自定义的结构体一样；放在 data() 的 return 中：

export default {
  data() {
    // ...
    return {
      // ...
      chartSettings: {
        radius: [80, 100],
        limitShowNum: 15,
        label: {
          show: false,
          position: 'center'
        },
      },
      // ...
    }
  },
}

3. 额外配置 extend

• extend 属性为 echarts 原生的 options 属性配置；
• 详细配置请参考 echarts 官网
• 要注意的是，需要在 data() 的最开始进行配置

export default {
  data() {
    this.extendRing = {
      title: {
        text: 0,
        subtext: '总数',
        // left: '49%',
        left: 'center',
        top: 'center',
      },
      // ...
    }
    return {
      // ...
    }
  }
}

4. 钩子函数

• https://woolen.gitee.io/v-charts/#/props?id=钩子函数
• 其中一个使用场景：使用请求后端的数据修改 options 中属性值
• 比如环形图的 title 文字为后端返回的数据总数，无法直接使用自定义的属性或者自定义的函数来进行返回给它；这时候就可以定义 after-config钩子函数来进行处理了；函数与自定义函数一样，在 methods 中定义即可

5. 常用诀窍

5.1 饼图中间显示总数值

使用 options.title 属性，将他的位置定位到中间；显示效果就是会处于饼图中间

5.2 饼图的文本标签在饼图中间显示

1. 关闭标签，并设置显示位置为 center
2. 配置 emphasis 属性

export default {
  data() {
    this.extendRing = {
      title: {
        // ...
      },
      series: {
        tooltip: {
          formatter: '{b}',
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            formatter: '{c}',
            fontSize: 30,
            fontWeight: 'bold'
          }
        },
      }
    }
  }
}