Echart-折线图根据区间设置折线的样式

theLuckyLong

于 2024-05-16 10:40:24 发布

阅读量168

点赞数 1

分类专栏： Echarts 文章标签： echarts

本文链接：https://blog.csdn.net/theLuckyLong/article/details/138943867

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

根据X轴区间设置折线样式

完整配置如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ],
  //【注】：如果一个图中有多个折线，则visualMap是一个数组
  visualMap:{
	show: false,
	type:'piecewise',
	dimension: 0,
	seriesIndex: 0, 
    pieces:[
      {
      	/*	这里的-1,3表示X轴的第几个区间，而非具体数值
      		0为区间下标，0是第1个区间，1是第二个区间...
      		gt:-1
      		lt:3 
      		上述配置的含义是，X轴区间[-1+1,3]的折线样式
      	*/
        gt:-1, 
        lt:3,
        color:"blue"
      },
      {
        gt:3,
        lt:7,
        color:"red"
      }
    ]
  }
};