好 耶 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 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)