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

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

悬赏问题

  • ¥50 关于#html5#的问题:H5页面用户手机返回的时候跳转到指定页面例如(语言-javascript)
  • ¥15 无法使用此凭据登录,因为你的域不可用,如何解决?(标签-Windows)
  • ¥15 yolov9的训练时间
  • ¥15 二叉树遍历没有报错但无法正常运行
  • ¥15 在linux系统下vscode运行robocup3d上场球员报错
  • ¥15 Python语言实验
  • ¥15 SAP HANA SQL 增加合计行
  • ¥20 用C#语言解决一个英文打字练习器,有偿
  • ¥15 srs-sip外部服务 webrtc支持H265格式
  • ¥15 在使用abaqus软件中,继承到assembly里的surfaces怎么使用python批量调动