v-charts环形图颜色渐变效果展示

效果展示

参考文档：v-charts官网
echarts官网

在vue项目中按需引入

1. npm安装 npm i v-charts echarts -S
2. 按需引入环形图表，全局注册组件 在main.js文件中添加以下代码

//按需引入环形统计图组件
import VeRing from 'v-charts/lib/ring.common';
//注册全局的v-charts组件
Vue.component(VeRing.name, VeRing);`

3.在项目中使用VeRing组件

 chartData: {
        columns: ['方式', '人数'],
        rows: [
          { 方式: '在线', 人数: 32371 }
          // { 方式: '离线', 人数: 12328 },
          // { 方式: '隐身', 人数: 92381 }
        ]
      },
      chartData1: {
        columns: ['方式', '人数'],
        rows: [
          { 方式: '在线', 人数: 32371 },
          { 方式: '离线', 人数: 12328 },
          { 方式: '隐身', 人数: 25678 },
          { 方式: '忙碌中', 人数: 34567 },
          { 方式: '空闲中', 人数: 12349 },
          { 方式: '勿扰', 人数: 2345 }
        ]
      },
      chartSettings: {
        radius: [25, 45], //环图外半径与内半径
        offsetY: 58, //纵向偏移量
        itemStyle: {
          //设置阴影效果
          shadowOffsetX: 4,
          shadowOffsetY: 5,
          shadowBlur: 6,
          shadowColor: 'rgba(0,0,0,.3)',
          // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.6,
            colorStops: [
              {
                offset: 0,
                color: '#ffcf90' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#80aa45' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }, //图形样式
        label: {
          show: true,
          position: 'center'
        } //环图图形上的文本标签
        // roseType: 'area',//显示为南丁格尔玫瑰图, 默认不展示为南丁格尔玫瑰图，可设置为'radius', 'area'
        // dimension: '日期一', //	维度 默认columns第一项为维度
        // metrics: 'fang1', //指标 默认columns第二项为指标
        // dataType: '', //可选值: KMB, normal, percent
        // legendLimit: 8, //legend显示数量限制,legend数量过多会导致环图样式错误，限制legend最大值并且当超过此值时，隐藏legend可以解决这个问题
        // selectedMode: true, //选中模式,可选值：single(单选), multiple(多选)，默认为false
        // hoverAnimation: true //是否开启 hover 在扇区上的放大动画效果，默认true
      },
      chartExtend: {
        series: {
          itemStyle: {
            shadowOffsetX: 4,
            shadowOffsetY: 5,
            shadowBlur: 6,
            shadowColor: 'rgba(0,0,0,.3)',
            color: {
              // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#f8aba6' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#ffc20e' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      },
      colorList: ['#7d5886', '#faa755', '#d93a49', '#6950a1', '#ffc20e'],
      chartExtend1: {
        offsetY: 34, //纵向偏移量
        series: {
          label: {
            show: true
          },

          itemStyle: {
            shadowOffsetX: 4,
            shadowOffsetY: 5,
            shadowBlur: 6,
            shadowColor: 'rgba(0,0,0,.3)',
            color: (e) => {
              return this.colorList[e.dataIndex];
            }
          }
        }
      }