ECHARTS-水球图按照结果展示不同颜色

结果演示：

              <el-col style="height: 100%">
                <div
                  style="
                    height: 100%;
                    padding-top: 50px;
                    padding-right: 25px;
                  "
                >
                  <vab-chart
                    :init-options="initOptions"
                    :option="setOption"
                    theme="vab-echarts-theme"
                    style="height: 90%; width: 100%"
                  />
                </div>

---

点击查看代码

			// 设置背景颜色 70%以上绿色  30% - 70% 蓝色， 小于 30% 黄色
        var color0;
        if (result > 70) {
          //绿色
          color0 = '#8CCF76'
        } else if (result <= 70 && result > 30) {
          //蓝色
          color0 = '#0000FF'
        } else {
          //黄色
          color0 = '#FFFF00'
        }
        this.setOption = {
          // 图表主标题
          title: {
            show: true,
            text: '配送完成率',
            // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'center',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: '30%',
            // itemGap设置主副标题纵向间隔，单位px，默认为10，
            itemGap: 30,
            //backgroundColor: "#fff",

            // 主标题文本样式设置
            textStyle: {
              fontSize: 16,
              fontWeight: '600',
              color: '#000000',
            },

            // 副标题文本样式设置
          },
          // 提示框组件
          tooltip: {
            trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            textStyle: {
              color: '#fff', // 文字颜色
            },
            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            // 水球图: {a}（系列名称），{b}（无），{c}（数值）
            // 使用函数模板   传入的数据值 -> value: number|Array,
            formatter: function (value) {
              var a =
                value.seriesName + ':' + (value.value * 100).toFixed(3) + 'KW'
              console.log(a)
              return a
            },
          },
          series: [
            {
              clickable: false,
              hoverAnimation: false,
              silent: true,
              type: 'liquidFill',
              name: '', // 系列名称，用于tooltip的显示，legend 的图例筛选

              radius: '95%', // 水球图的半径 // 水球图的半径

              //center: ["52%", "55%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
              // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
              // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
              shape: 'circle',
              //amplitude: 0,//水面静止
              phase: 100, // 波的相位弧度 不设置  默认自动
              //waveAnimation: false,
              waveLength: 175,
              direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
              outline: {
                show: true,
                borderDistance: 2, // 边框线与图表的距离 数字
                itemStyle: {
                  opacity: 0.9, // 边框的透明度   默认为 1
                  borderWidth: 1, // 边框的宽度
                  shadowBlur: 0, // 边框的阴影范围 一旦设置了内外都有阴影

                  shadowColor: '#FFFFFF', // 边框的阴影颜色,
                  borderColor: '#FFFFFF', // 边框颜色
                  //shadowColor: "#fff", // 边框的阴影颜色,
                },
              },

              backgroundStyle: {
                color: '#ffffff', // 水球未到的背景颜色
              },

              // 图形的高亮样式
              emphasis: {
                itemStyle: {
                  opacity: 1, // 鼠标经过波浪颜色的透明度
                },
              },
              // 图形上的文本标签
              label: {
                fontSize: 20,
                fontWeight: 400,
                color: 'green',
              },
              color: [
                {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  //color:color0,
                  colorStops: [
                    {
                      offset: 1,
                      color: color0, // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: 'red', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              ],

              data: [
                { name: '', value: result / 100 - 0.03 },
                { name: '', value: result / 100 - 0.02 },
                { name: '', value: result / 100 - 0.01 },
                { name: '', value: result / 100 },
              ],

              label: {
                normal: {
                  formatter:
                    '\n' + parseFloat(parseFloat(result).toFixed(2)) + '%',
                  textStyle: {
                    color: '#FFFFFF',
                    fontSize: 25,
                  },
                  insideColor: '#FFFFFF',
                },
              },
            },
          ],
        }