echarts 折线图根据x轴时间渲染不同颜色的折线

小刘先生很努力

已于 2024-01-02 13:57:49 修改

阅读量1.1k

点赞数 11

CC 4.0 BY-SA版权

文章标签： echarts javascript ecmascript

于 2023-12-29 13:37:53 首次发布

本文链接：https://blog.csdn.net/lzfengquan/article/details/135289031

可以使用 lt（小于，less than），gt（大于，greater than），lte（小于等于 less than or equals），gte（大于等于，greater than or equals）来表达边界：在这里插入图片描述
如上图所示一条折线多种颜色
后端数据返回"data": [
{
“dateTime”: “2023-10-11 00:02:10”,
“pos”: 6,
“curr”: 104.6
},
{
“dateTime”: “2023-10-11 00:02:39”,
“pos”: 7,
“curr”: 104.6
}， …]

  我们拿到后端返回的res.data传递给我们的echarts 组件
  进行渲染，数据处理。
  export const pressureLineEcharts = (data, params) => {
	  if (data && data.length > 0) {
	    const color = [
	      '#84909E', '#51B4FF', '#50CF5A', '#FDCC10', '#FF1212'
	    ]
	    let pieces = []
	    data.forEach((item, index) => {
	      const curr = Math.floor(item.curr / 50) > 4 ? 4 : Math.floor(item.curr / 50)
	      if (index < data.length - 1) {
	        pieces.push({
	          gte: window.$moment(item.dateTime).valueOf(),
	          lte: window.$mo