Echarts的常用图表的实例使用--饼图

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

这是饼图的一种，圆环图，也是一种常用的图表。现在我就大概得讲解下一些特别的地方的显示和设置。

1、圆环图的设置

center: ['50%', '49%'],
radius: ['45%', '63%'],

2、圆环中心的标题的主标题和副标题的设置

text和subtext是主标题和副标题的文字修改。其中副标题subtext，在设置内容时可以直接使用换行符，/n，如下

x,y的时设置标题在图表所在的位置。

textStyle和subtextStyle设置标题的样式，和正常的css有点区别就是，这里的样式写法必须时驼峰写法，如：正常css：font-size ,图表的样式：fontSize

    show: true,
    text: '人员分类',
    x: 'center',
    y: 'center',
    itemGap: 10,
    textStyle: {
      //主标题的样式修改
      fontSize: 28,
      fontStyle: 'normal',
      fontWeight: 700,
      color: '#fff'
    },
    subtext: '玄幻小说\n(纪元)',
    subtextStyle: {
      //副标题的颜色修改   副标题可以直接使用换行符\n
      fontSize: 14,
      fontStyle: 'normal',
      fontWeight: 400,
      color: '#fff'
    }

3、图表label的设置

想这种导线和文字处于对齐的设置，是有点麻烦，可以多看看，仔细研究（我也一点点弄了很久才出来的）

（1）这个是图表上面的文字的显示

主要使用formatter的函数来进行显示，然后使用rich来设置不同参数显示的样式（这个是可以写成一个单独的函数来进行配置和独立开），如下我设置了不同的显示不同的颜色配置和距离

formatter: function (params) {
          //这个是图表上面的文字的显示
          const name = params.name;
          const percent = params.percent + '%';
          const index = params.dataIndex;
          const value = params.value;
          return [
            `{a${index}|${name}} {b${index}|${value}}{pre${index}|人} \n {c${index}|${percent}} `,
            `{hr${index}|}`
          ].join('\n');
        },
        color: '#fff',
        rich: {
          a: { fontSize: 14, color: '#dfe7fc', align: 'center' },
          b: { padding: 5, color: '#FCAE17', fontSize: 14, align: 'center' },
          c: {
            paddingTop: '10px',
            color: '#CBA0FF',
            fontSize: 14,
            align: 'center'
          }
        }

（2）导线的设置

主要是就是下面这两个模块

labelLine: {
        //这个是图表上面的文字显示的线条设置
        length: 15, //线条的长度
        length2: 240,//线条的长度
        maxSurfaceAngle: 80
},
labelLayout: function (params) {
        //这个是图表上面的文字显示的线条设置，内容换行（刚好在线的上下）
        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
},

但是有时候上面的设置还要加上设置高度和行高才行的

margin: 20,
minMargin: 10,
edgeDistance: 20,
lineHeight: 20,
height: 40,

4、渐变颜色的设置

这也是一个函数的进行的，主要是使用echarts.graphic.LinearGradient，还是就时一个径向的渐变方式，echarts.graphic.RadialGradient

normal: {
          color: function (params) {
            //渐变颜色的设置
            var colorList = [
              {
                c1: '#3288FC',
                c2: '#36B4FD'
              },
              {
                c1: '#FCAE17',
                c2: '#FCDA5B'
              },
              {
                c1: '#CBA0FF',
                c2: '#598EFE'
              },
              {
                c1: '#30DDD8',
                c2: '#84F0F0'
              },
              {
                c1: '#3288FC',
                c2: '#36B4FD'
              },
              {
                c1: '#FCAE17',
                c2: '#FCDA5B'
              },
              {
                c1: '#CBA0FF',
                c2: '#598EFE'
              },
              {
                c1: '#30DDD8',
                c2: '#84F0F0'
              }
            ];
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: colorList[params.dataIndex].c1
              },
              {
                offset: 1,
                color: colorList[params.dataIndex].c2
              }
            ]);
          }
        }

5、完整的案例代码

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;

const that = this;
option = {
  tooltip: {
    show: false,
    trigger: 'item'
  },
  grid: {},
  title: {
    show: true,
    text: '人员分类',
    x: 'center',
    y: 'center',
    itemGap: 10,
    textStyle: {
      //主标题的样式修改
      fontSize: 28,
      fontStyle: 'normal',
      fontWeight: 700,
      color: '#fff'
    },
    subtext: '玄幻小说\n(纪元)',
    subtextStyle: {
      //副标题的颜色修改   副标题可以直接使用换行符\n
      fontSize: 14,
      fontStyle: 'normal',
      fontWeight: 400,
      color: '#fff'
    }
  },
  series: [
    {
      type: 'pie',
      center: ['50%', '49%'],
      radius: ['45%', '63%'],
      // minAngle: 0,
      startAngle: 0, // 渐变角度
      avoidLabelOverlap: true, //是否启用防止标签重叠
      emphasis: {
        label: {
          show: true,
          position: 'center'
        }
      },
      label: {
        //
        position: 'outer',
        alignTo: 'edge',
        margin: 20,
        minMargin: 10,
        edgeDistance: 20,
        lineHeight: 20,
        height: 40,
        formatter: function (params) {
          //这个是图表上面的文字的显示
          const name = params.name;
          const percent = params.percent + '%';
          const index = params.dataIndex;
          const value = params.value;
          return [
            `{a${index}|${name}} {b${index}|${value}}{pre${index}|人} \n {c${index}|${percent}} `,
            `{hr${index}|}`
          ].join('\n');
        },
        color: '#fff',
        rich: {
          a: { fontSize: 14, color: '#dfe7fc', align: 'center' },
          b: { padding: 5, color: '#FCAE17', fontSize: 14, align: 'center' },
          c: {
            paddingTop: '10px',
            color: '#CBA0FF',
            fontSize: 14,
            align: 'center'
          }
        }
      },
      labelLine: {
        //这个是图表上面的文字显示的线条设置
        length: 15,
        length2: 240,
        maxSurfaceAngle: 80
      },
      labelLayout: function (params) {
        //这个是图表上面的文字显示的线条设置，内容换行（刚好在线的上下）
        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
      data: [
        { value: 17, name: '异界' },
        { value: 16, name: '消炎' },
        { value: 24, name: '林动' },
        { value: 5, name: '牧尘' },
        { value: 16, name: '叶凡' },
        { value: 14, name: '石化' },
        { value: 97, name: '周一' }
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          label: {
            show: true
          }
        },
        normal: {
          color: function (params) {
            //渐变颜色的设置
            var colorList = [
              {
                c1: '#3288FC',
                c2: '#36B4FD'
              },
              {
                c1: '#FCAE17',
                c2: '#FCDA5B'
              },
              {
                c1: '#CBA0FF',
                c2: '#598EFE'
              },
              {
                c1: '#30DDD8',
                c2: '#84F0F0'
              },
              {
                c1: '#3288FC',
                c2: '#36B4FD'
              },
              {
                c1: '#FCAE17',
                c2: '#FCDA5B'
              },
              {
                c1: '#CBA0FF',
                c2: '#598EFE'
              },
              {
                c1: '#30DDD8',
                c2: '#84F0F0'
              }
            ];
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: colorList[params.dataIndex].c1
              },
              {
                offset: 1,
                color: colorList[params.dataIndex].c2
              }
            ]);
          }
        }
      }
    }
  ]
};

option && myChart.setOption(option);

欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章