好 耶 2021-08-04 23:36 采纳率: 60.9%
浏览 79
已结题

微信小程序想用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;
}

  • 写回答

2条回答 默认 最新

  • god_yu_ 2021-08-05 14:45
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月13日
  • 已采纳回答 8月5日
  • 创建了问题 8月4日

悬赏问题

  • ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 关于大棚监测的pcb板设计
  • ¥15 stm32开发clion时遇到的编译问题
  • ¥15 lna设计 源简并电感型共源放大器
  • ¥15 如何用Labview在myRIO上做LCD显示?(语言-开发语言)
  • ¥15 Vue3地图和异步函数使用