echarts折柱混合结合目标线使用

mmyy_

已于 2022-04-28 14:14:02 修改

阅读量2.6k

点赞数 1

文章标签：前端框架前端 javascript

于 2022-04-07 15:43:36 首次发布

本文链接：https://blog.csdn.net/mmyy_/article/details/124017721

版权

首先看需求：

产品图中内容可以看出来此图表涉及到两个y轴同时折煮混合折线图会有目标线，柱形图也有目标线。

根据echarts的配置项来看，目标线我们可以使用警戒线markline进行设置，但是警戒线的长度一般是横穿整个图表的虚线，折线图数据可以使用marklin来展示，但是对于柱形图的需求，柱形图要求每个柱状图上方有一截和此柱状图等宽的目标线，如果使用警戒线来设置，宽度不好控制。

由此想到一个办法可以通过xAxis属性设置两个横坐标，第一个展示真实数据，第二个展示目标值数据，但是由于第二个只能展示一条线，那么第二个坐标的值为目标的值颜色设为透明色，并在这个设为透明色的目标值上叠加一个数据很小的柱状图这样的话，效果看起来是和产品图类似的，同时图例也可以同时控制这三个柱状图，上代码：

两个横坐标:

xAxis: [
     { type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
     },
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisPointer: {
          type: 'none',
        }
      }//这个坐标的不显示横坐标等等属性
  ],

坐标数据：

 series: [
    {
      name: 'Evaporation',
      type: 'bar',
      xAxisIndex:0,//展示在第一层横坐标上
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
      ]
    },//实际数据展示，
    {
      name: 'Evaporation',
      xAxisIndex:1,//展示在第二层横坐标上
      stack: 'Group1',//透明的目标柱状图叠加一小段横线，属性为相同值便可垂直叠加
      type: 'bar',
      itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)' /* 设置bar为透明色隐藏，撑起下面横线 */,
            },
          },
      data: [
         15, 76, 7.0, 23.2, 25.6, 76.7, 135.6,
      ]//目标值的数据
    },
    {
      name: 'Evaporation',
      xAxisIndex:1,//展示在第二层横坐标上
      stack: 'Group1',//叠在透明的目标值柱状图上当做横线
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
       itemStyle: {
            normal: {
              color: 'red' /* 设置bar为隐藏，撑起下面横线 */,
            },
          },
      data: [
        0.5,  0.5,0.5,  0.5, 0.5,  0.5,0.5, 
      ]
    },
    ]

简单效果如图：