echart 之仪表盘 动态分段颜色实现

时间:2021-08-05
本文章向大家介绍echart 之仪表盘 动态分段颜色实现,主要包括echart 之仪表盘 动态分段颜色实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

直接切入

需求

上图(已实现的)

 重点:

1、三段颜色,小于34% 蓝色, 34%-67% 黄色,大于67% 橙色

2、数值到达地方才显示颜色,颜色是动态的

区别于这种固定三种颜色  

这种实现比较简单,随便贴一下

 lineStyle: {
                color: [
                  [0, '#2CFAFC'],
                  [0.33, '#4BAEFD'],
                  [0.67, '#FFE24D'],
                  [0.99, '#F85C1D'],
                  [1, '#0b275B'] // 底色
                ],
}   

核心代码实现如下,实现原理还是在实现三种颜色基础上,根据数据判断是否到达分割点,否则给底色


// that.value 是data里面的数据

lineStyle: { color: [ [
0, '#2CFAFC'], [that.value < 34 ? that.value / 100 : 0.33, '#4BAEFD'], [that.value > 34 && that.value < 67 ? that.value / 100 : 0.67, that.value > 34 ? '#FFE24D' : '#0b275B'], [that.value > 67 ? that.value / 100 : 0.99, that.value > 67 ? '#F85C1D' : '#0b275B'], [1, '#0b275B'] // 底色 ],
}

-----------------------------------------end-------------

series的仪表盘代码,本地是封装的,切勿整段复制

 {
            name: '进度条',
            type: 'gauge',
            center: ['50%', '50%'],
            radius: '90%',
            z: 10,
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0, '#2CFAFC'],// [0.33, '#4BAEFD'],
                  // [0.67, '#FFE24D'],
                  // [0.99, '#F85C1D'],
                  [that.value < 34 ? that.value / 100 : 0.33, '#4BAEFD'],
                  [that.value > 34 && that.value < 67 ? that.value / 100 : 0.67, that.value > 34 ? '#FFE24D' : '#0b275B'],
                  [that.value > 67 ? that.value / 100 : 0.99, that.value > 67 ? '#F85C1D' : '#0b275B'],
                  [1, '#0b275B']
                ],
                width: px2px(8)
              }
            },
            detail: {
              offsetCenter: ['10%', '80%'],
              fontSize: px2px(24),
              lineHeight: px2px(12),
              x: 'center',
              y: 'center',
              width: px2px(60),
              height: px2px(60),
              formatter: (value) => {
                return `{valueStyle|${value}}{unitStyle|%}`
              },
              rich: {
                valueStyle: {
                  color: '#fff',
                  fontSize: px2px(24)
                },
                unitStyle: {
                  color: '#fff',
                  padding: [0, 0, 10, 0],
                  fontSize: px2px(11)
                }
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            // itemStyle: {
            //   color: '#ccc'
            // },
            label: {
              show: false
            },
            pointer: {
              show: true,
              length: '45%',
              radius: '80%',
              width: px2px(5), // 指针粗细
              itemStyle: {
                color: 'red'
              }
            },
            data: [that.value]
          }

原文地址:https://www.cnblogs.com/yflbk-2016/p/15102310.html