微信小程序想用echarts做出随y轴的大小改变折线颜色的效果，设置了visualMap，颜色也还是默认颜色

想知道是有哪些可以覆盖这种的吗，还是我少了什么东西，设置了visualMap但是没有反映，看了很多其他博客也都是这样设置的。

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    title: {
      text: '数据统计',
      left: 'right'
    },
    // color: ["#6ABD79"],
    legend: {
      data: ['温度'],
      top: 20,
      left: 'center',
      backgroundColor: '#dbdbdb',
      z: 100
    },
    grid: {
        left: 0,//折线图距离左边距
        right: 50,//折线图距离右边距
        top: 30,//折线图距离上边距
        bottom: 10,
        containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      name: '时间',
      type: 'category',
      boundaryGap: false,
      data: ['0','3', '6', '9', '12', '15', '18', '21', '24'],
      axisTick: {
        alignWithLabel:false
      },
      axisLabel: {
        //横坐标最后的标注颜色变深
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      show: true
    },
    yAxis: {
      name: '温度',
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'solid'
        }
      },
      //设置y轴字体样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      show: true
    },
    series: [{
      type: 'line',
      smooth: true,
      data: [23,34,35,33,34,33,31,19,10,20],
    }],
    visualMap: {
      type: 'piecewise',
      show: false, 
      dimension: 0, 
      seriesIndex:0, //第一部分数据  
      pieces: [{
          lte: 10,
          color: 'orange'
      }, {
          gt: 10,
          lte: 20,
          color: 'red'
      }, {
          gt: 20,
          lte: 30,
          color: '#6ABD79'
      }, {
          gt: 30,
          color: 'pink'
      }]
  }
  };
  chart.setOption(option);
  return chart;
}

pieces: [{
lte: 3,
color: 'orange'
}, {
gt: 3,
lte: 6,
color: 'red'
}, {
gt: 6,
lte: 14,
color: '#6ABD79'
}, {
gt: 14,
color: 'pink'
}]
指的是x 轴 不是y轴数据,复制上面把你的替换了试试

参考这个 https://echarts.apache.org/examples/zh/editor.html?c=line-sections 可以把你代码放进去看看行不行