echarts柱状图上升时显示 markArea背景色

echarts柱状图上升时显示 markArea背景色

展示，低于20%变色 2.充电（波形上升时带markArea

方法：

• 在series方法内

 series: [
        {
          name: 'bar',
          type: 'bar',
          data: data1,
          emphasis: {
            focus: 'series',
          },
          color: '#4cc759',
          animationDelay: function (idx) {
            return idx * 10;
          },
  //----------低于目标值20则显示红色，高于20则显示绿色           
          itemStyle: {
            normal: {
              // 使用回调函数根据数据来设置颜色
              color: function (params) {
                // params.value 表示当前柱子的数据值
                // 假设目标值是 20
                const targetValue = 20;
                if (params.value > targetValue) {
                  return '#4cc759'; // 高于目标值显示绿色
                } else {
                  return '#f94238'; // 低于或等于目标值显示红色
                }
              },
            },
          },
//----------在此设置！！！markArea
          markArea: {
            silent: true, // 设置为 true 以不响应鼠标事件
            itemStyle: {
              color: 'rgba(207, 239, 215, 0.4)',
            },
            data: (function () {
              const data: any = []; // 初始化 markArea 数据数组
              const len = data1.length;
              for (let i = 1; i < len; i++) {
                if (data1[i] > data1[i - 1]) {
                  // 当后一项比前一项高时
                  data.push([
                    {
                      xAxis: i - 1,
                    },
                    {
                      xAxis: i,
                    },
                  ]);
                }
              }
              return data;
            })(),
          },
        },
     
      ],

完整echarts代码：

•     var xAxisData: any = [];
      var data1: any = [];
      var data2: any = [];
      var startDate = new Date(); // 假设从当前时间开始
      startDate.setHours(0, 0, 0, 0); // 设置为午夜00:00:00
  
      for (var i = 0; i < 200; i++) {
        // 每1小时更新一次
        xAxisData.push(('0' + i).slice(-2) + ':00'); // 格式化小时，不足10小时的前面补0
        // xAxisData.push('A' + i);
        var value1 = (Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 2;
        data1.push(Math.min(100, Math.max(0, value1)));
        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
      }
  
      setOptions({
        title: {
          text: '电池电量',
          subtext: '',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: true, // 显示分割线
            lineStyle: {
              type: 'dashed', // 设置为点线型
              color: '#c9c9c9', // 分割线的颜色
              width: 1, // 分割线的宽度
            },
          },
          axisLine: {
            lineStyle: {
              color: '#c9c9c9', // 设置X轴线的颜色
            },
            show: false,
          },
        },
        yAxis: {
          position: 'right', // 将Y轴设置在右边
          axisLabel: {
            formatter: function (value) {
              // 这里可以自定义如何添加单位，例如添加'元'作为单位
              return value + '%';
            },
          },
          axisLine: {
            lineStyle: {
              color: '#c9c9c9', // 设置y轴线的颜色
            },
          },
        },
        grid: { left: '3%', right: '2%', top: '23%', bottom: '1%', containLabel: true },
        series: [
          {
            name: 'bar',
            type: 'bar',
            data: data1,
            emphasis: {
              focus: 'series',
            },
            color: '#4cc759',
            animationDelay: function (idx) {
              return idx * 10;
            },
            itemStyle: {
              normal: {
                // 使用回调函数根据数据来设置颜色
                color: function (params) {
                  // params.value 表示当前柱子的数据值
                  // 假设目标值是 20
                  const targetValue = 20;
                  if (params.value > targetValue) {
                    return '#4cc759'; // 高于目标值显示绿色
                  } else {
                    return '#f94238'; // 低于或等于目标值显示红色
                  }
                },
              },
            },
            markArea: {
              silent: true, // 设置为 true 以不响应鼠标事件
              itemStyle: {
                color: 'rgba(207, 239, 215, 0.4)',
              },
              data: (function () {
                const data: any = []; // 初始化 markArea 数据数组
                const len = data1.length;
                for (let i = 1; i < len; i++) {
                  if (data1[i] > data1[i - 1]) {
                    // 当后一项比前一项高时
                    data.push([
                      {
                        xAxis: i - 1,
                      },
                      {
                        xAxis: i,
                      },
                    ]);
                  }
                }
                return data;
              })(),
            },
          },
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return idx * 5;
        },
      });