eacharts多曲线情况下自定义y轴分割线

最新推荐文章于 2023-12-18 10:45:53 发布

三岁很ok

最新推荐文章于 2023-12-18 10:45:53 发布

阅读量1.4k

点赞数 6

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_45525250/article/details/123352802

版权

echarts 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文介绍了如何在ECharts中动态设置Y轴的最大值、最小值和平均值，并详细展示了如何绘制自定义分割线。通过示例代码，演示了在已有曲线基础上添加和修改分割线的方法，包括直接修改已有系列的属性和通过ID查找并更新分割线位置。

摘要由CSDN通过智能技术生成

*** eacharts多曲线情况下自定义y轴绘制分割线 ***

之前有算过动态去求最大值、最小值、平均值
仙人指路 =》 echarts动态设置y轴刻度的最大值、最小值、平均值

如何现在，我们要绘制自定义分割线~
何为自定义分割线？

绘制图如下图所示：

多曲线情况下绘制分割线

绘制第一步：

先绘制出简单的模块：

option = {
  title: {
    text: '自定义最大值-最小值-平均值',
    left: 'left'
  },
  legend: {
    // left: 'left',
    icon: 'rect' //矩形  //itemWidth: 25,  // 设置宽度 itemHeight: 15, // 设置高度itemGap: 40 ,// 设置间距,
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      id: 'AreaChart',
      type: 'line',
      symbolSize: 1,
      itemStyle: {
        normal: {
          color: 'rgb(0,153,255)'
        }
      },
      markArea: {
        silent: true,
        itemStyle: {
          normal: {
            color: 'rgb(0,153,255,0.2)'
          }
        },
        data: [
          [
            {
              yAxis: 0
            },
            {
              yAxis: 0
            }
          ]
        ]
      },
      markLine: {
        silent: true,
        data: [
          {
            yAxis: 0,
            lineStyle: {
              type: 'dashed',
              width: 1.2,
              color: 'rgb(0,103,255)'
            }
          },
          {
            yAxis: 0
          },
          {
            yAxis: 0
          }
        ]
      }
    },
    {
      name: 'get',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

得到图形如下请添加图片描述

我认为将绘制分割线在series里绘制出来是一种比较简单的办法，你后续可以动态绘制曲线，新增曲线，改变曲线值

绘制第二步

曲线绘制好了，分割线也绘制好了，现在要将自定义的分割线值传入option,改变值

如果将分割线曲线绘制在第一条的时候，可以直接使用option.series[0].方法去改变

方法如下：

option.series[0].markLine.data[0].yAxis = 200; // 中间高亮额定值线
option.series[0].markLine.data[1].yAxis = 150; // 下箭头
option.series[0].markLine.data[2].yAxis = 250; // 上箭头
option.series[0].markArea.data[0][0].yAxis = 250; // 区域
option.series[0].markArea.data[0][1].yAxis =150; // 区域
myChart.setOption(option);

如果分割线是后续绘制上去的，无法确定曲线位置，可以给分割线曲线加个id

后续找曲线位置的方法如下

//分割线曲线的位置
var areaI = 0;
var series = myChart.getOption().series;
$.each(series, function(i, serie) {
		if (serie.id == "AreaChart") {
				area = true;
				areaI = i;
		}
});
//绘制曲线
	option.series[areaI].markLine.data[0].yAxis =自定义的值；
	****省略

做个笔记，放上来，以后我忘了还能看看~