ECharts 仪表盘 label和刻度线根据值数据内容动态颜色变化 - 以空气质量指数为例 - 附完整示例

ECharts：一个基于 JavaScript 的开源可视化图表库。

目录

效果

 一、介绍

 1、官方文档：Apache ECharts

2、官方示例

二、准备工作

1、安装依赖包

 2、示例版本 

三、使用步骤

1、在单页面引入 ' echarts '

2、指定容器并设置容器宽高

3、数据处理（关键点）

        1)  设置itemStyle的颜色

        2）设置axisLine的颜色

        3）设置title的颜色（inherit）

四、完整示例

 欢迎扫描下方二维码关注VX公众号

---

效果

 一、介绍

 1、官方文档：Apache ECharts

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

2、官方示例

​

二、准备工作

1、安装依赖包

npm install echarts --save

 2、示例版本 

"echarts": "^5.4.2",

三、使用步骤

1、在单页面引入 ' echarts '

import * as echarts from "echarts";

注：上面的代码会引入 ECharts 中所有的图表和组件，如果你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。详见官方文档：在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

2、指定容器并设置容器宽高

<template>
  <div id="main"></div>
</template>

<script setup lang="ts">
  import * as echarts from "echarts";

  const trendsTooltip = ref();

  initChart() {
    let chartDom = document.getElementById("main");
    let myChart = echarts.init(chartDom);
    let option;

    ...详见完整示例   
  };
</script>

<style scoped>
  #main {
    width: 1000px;
    height: 500px;
  }
</style>

3、数据处理（关键点）

        1)  设置itemStyle的颜色

itemStyle: {
  color: itemStyleHandler(dataValue)
},

        2）设置axisLine的颜色

axisLine: {
  lineStyle: {
   width: 20,
   color: axisLineHandler(dataValue)
  }
},

        3）设置title的颜色（inherit）

title: {
  show: true,
  offsetCenter: [0, '15%'],
  fontSize: 20,
  color: 'inherit'
 },
data: [
  {
    value: dataValue,
    name: dataNameHandler(dataValue)
  }
]

注：相关方法详见下方完整示例

四、完整示例

<template>
  <div id="main"></div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts';

  type EChartsOption = echarts.EChartsOption;


  initChart() {
    let chartDom = document.getElementById('main')!;
    let myChart = echarts.init(chartDom);
    let option: EChartsOption;

    const dataValue = 236;

    const axisLineHandler = (value) => {
      let ratio = Number(value / 500);
      if (ratio <= 0.1) {
        return [
          [ratio, '#56BC91'], // 进度色
          [1, 'rgba(216, 216, 216, 1)'] // 背景色
        ];
      } else if (ratio <= 0.2) {
        return [
          [ratio, '#E5D49E'], // 进度色
          [1, 'rgba(216, 216, 216, 1)'] // 背景色
        ];
      } else if (ratio <= 0.3) {
        return [
          [ratio, '#DF5C4A'], // 进度色
          [1, 'rgba(216, 216, 216, 1)'] // 背景色
        ];
      } else if (ratio <= 0.4) {
        return [
          [ratio, '#AB3941'], // 进度色
          [1, 'rgba(216, 216, 216, 1)'] // 背景色
        ];
      } else if (ratio <= 0.6) {
        return [
          [ratio, '#7B61A4'], // 进度色
          [1, 'rgba(216, 216, 216, 1)'] // 背景色
        ];
      } else if (ratio <= 1) {
        return [
          [ratio, '#9B0115'], // 进度色
          [1, 'rgba(216, 216, 216, 1)'] // 背景色
        ];
      }
    };

    const itemStyleHandler = (value) => {
      if (value <= 50) {
        return `#56BC91`;
      } else if (value <= 100) {
        return `#E5D49E`;
      } else if (value <= 150) {
        return `#DF5C4A`;
      } else if (value <= 200) {
        return `#AB3941`;
      } else if (value <= 300) {
        return `#7B61A4`;
      } else if (value <= 500) {
        return `#9B0115`;
      }
      return '';
    };

    const dataNameHandler = (value) => {
      if (value <= 50) {
        return `优`;
      } else if (value <= 100) {
        return `良`;
      } else if (value <= 150) {
        return `轻度污染`;
      } else if (value <= 200) {
        return `中度污染`;
      } else if (value <= 300) {
        return `重度污染`;
      } else if (value <= 500) {
        return `严重污染`;
      }
      return '';
    };

    option = {
      series: [
        {
          type: 'gauge',
          center: ['50%', '60%'],
          startAngle: 210,
          endAngle: -30,
          min: 0,
          max: 500,
          splitNumber: 10,
          itemStyle: {
            color: itemStyleHandler(dataValue)
          },
          progress: {
            show: true,
            width: 20
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 20,
              color: axisLineHandler(dataValue)
            }
          },
          axisTick: {
            distance: -35,
            splitNumber: 5,
            lineStyle: {
              width: 2,
              color: 'auto'
            }
          },
          splitLine: {
            distance: -42,
            length: 14,
            lineStyle: {
              width: 3,
              color: 'auto'
            }
          },
          axisLabel: {
            distance: -30,
            color: 'inherit',
            fontSize: 18
          },
          anchor: {
            show: false
          },
          title: {
            show: true,
            offsetCenter: [0, '15%'],
            fontSize: 20,
            color: 'inherit'
          },
          detail: {
            valueAnimation: true,
            width: '60%',
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, '-15%'],
            fontSize: 60,
            fontWeight: 'bolder',
            formatter: '{value}',
            color: 'inherit'
          },
          data: [
            {
              value: dataValue,
              name: dataNameHandler(dataValue)
            }
          ]
        }
      ]
    };

    option && myChart.setOption(option);
  };


  onMounted(() => {
    initChart();
  }
</script>

<style scoped>
  #main {
    width: 1000px;
    height: 500px;
  }
</style>

 欢迎扫描下方二维码关注VX公众号