【可视化开发】仪表盘的绘制

 不同于可视化开发中常见的饼状图、折线图、柱状图，仪表盘所用的例子相对比较少。当我们遇到需要用仪表盘的形式展示数据的需求时，应该怎么配置ECharts的选项数据呢？

其实实现思路也是大同小异的，我们可以在series一个个配置所需绘制的图形。

绘制最内层

    {
      name: '最内层',
      type: 'gauge',
      startAngle: 190,
      endAngle: -10,
      radius: '94%',
      center: ['50%', '80%'],
      axisLine: {
        lineStyle: {
          color: [[1, '#DCE1E5']],
          width: 1,
        },
      },
      splitLine: {
        show: false,
      },
      anchor: {
        show: false,
        showAbove: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      pointer: {
        show: false,
      },
      detail: {
        show: false,
      },
      title: {
        show: false,
      },
      data: [
        {
          value: 0,
        },
      ],
    },

绘制最外层 

{
      name: '最外层',
      type: 'gauge',
      startAngle: 190,
      endAngle: -10,
      radius: '125%',
      center: ['50%', '80%'],
      axisLine: {
        lineStyle: {
          color: [[1, '#DCE1E5']],
          width: 2,
        },
      },
      splitLine: {
        show: false,
      },
      anchor: {
        show: false,
        showAbove: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      pointer: {
        show: false,
      },
      detail: {
        show: false,
      },
      title: {
        show: false,
      },
      data: [
        {
          value: 0,
        },
      ],
    },

 绘制表盘

{
      name: '保护状态',
      type: 'gauge',
      min: 0, // 起始最小刻度值
      max: orgData.max, // 最大刻度值
      startAngle: 190,
      endAngle: -10,
      radius: '110%',
      center: ['50%', '80%'],
      axisLine: {
        lineStyle: {
          width: 18,
          color: [
            [
              orgData.handled / orgData.max,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0.1,
                  color: '#CFE2FF',
                },
                {
                  offset: 1,
                  color: '#2681FF',
                },
              ]),
            ],
            [1, '#F56F63'],
          ],
        },
      },
      pointer: {
        length: '80%',
        itemStyle: {
          color: 'auto',
        },
      },
      axisTick: {
        distance: -25,
        length: 5,
        lineStyle: {
          color: '#DCE1E5',
          width: 1,
        },
      },
      splitLine: {
        distance: -32,
        length: 10,
        lineStyle: {
          color: '#DCE1E5',
          width: 2,
        },
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 18,
        itemStyle: {
          borderWidth: 8,
          color: 'auto',
          borderColor: '#B0D0FF',
        },
      },
      axisLabel: {
        show: false,
        color: '#464646',
        fontSize: 16,
        distance: -20,
        rotate: 'tangential',
        formatter: function (value) {
          if (value < orgData.handled) {
            return '已处理';
          } else {
            return '未处理';
          }
        },
      },
      title: {
        offsetCenter: [0, '-38%'],
        fontSize: 20,
        color: '#555555',
      },
      detail: {
        show: true,
        color: '#464646',
        fontSize: 16,
        offsetCenter: [0, '-20%'],
      },
      data: [
        {
          value: orgData.data || 0,
          name: '已处理问题',
        },
      ],
    },

至此完成上图仪表盘的绘制^-^