Echarts柱状图柱子上“画线”

需求背景

需要在柱状图上实现“画线”,作为其它数据的标识,图例
在这里插入图片描述

代码实现思路:“画线部分”由两部分组成,一部分透明柱子加线的部分

    let e5Data = {
        lastVal:[10,20,30,40,50],
        stationName:['name1','name2','name3','name4','name5'],
        breakevenEle:[6,30,42,40,10]
        };
    let lastVals = e5Data.lastVal;
    /*计算横线的显示高度,echarts图的y轴是自适应的,所以这里求出最大值,并按照比例计算出线的高度,这里可以自己调整*/
    let lineHeightData = eval("Math.max(" +lastVals.toString()+")") * 0.003;/*计算盈亏点线的高度*/
    let lineHeightDatas = [];
    lastVals.forEach(()=>{ 
        lineHeightDatas.push(lineHeightData);
    });
    option = {
      grid: {
            borderWidth: 1,
        },
      legend: {
            /*这里是四个指标,(去年同期和本月是柱状,增减百分比是折线,平衡点是在柱状上的横线)*/
            data: ['去年同期','盈亏平衡点'],
            textStyle: {
                color: '#A7A7A7',
            },
        },
      yAxis: [
            /*横坐标*/
            {
                axisTick: {show: false},
                type: 'category',
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#f8f8f8',//左边线的颜色
                        width: '1.5'//坐标线的宽度
                    },
                },
                axisLabel: {
                    color: "#A7A7A7",
                },
                data: e5Data.stationName,
                axisPointer: {
                    type: 'shadow'
                }
            },
            /*隐藏一个不显示的横坐标,用作横线的位置*/
            {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: []
            },
        ],
      xAxis: [
                {
                    type:'value',
                    axisLine: {show: false},
                    axisTick: {show: false},
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: ['#F8F8F8'],
                        width: 1,
                        type: 'solid'
                      }
                 },
              axisLabel: {
                color: ['#A7A7A7'],
                showMaxLabel: true,
                formatter: '{value}'
              }}
          ],
      series: [
          {
            // name: '去年同期',/*基础数据*/
            type: 'bar',
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                color: '#238ef8'
              }
            },
            data: e5Data.lastVal
          },
          {
            /* 这个bar是撑起横线的高度,并设置透明*/
            // name: "盈亏平衡点",
            stack: 'breakevenEleGroup', /* 盈亏点数据组,需要设置才能将两个bar堆积在一起*/
            type: 'bar',
            barMaxWidth: 20,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)'/* 设置bar为隐藏,撑起下面横线*/
              }
            },
            data: e5Data.breakevenEle
          },
          {
            /* 这个bar是横线的显示*/
            // name: "盈亏平衡点",
            stack: 'breakevenEleGroup', /* 盈亏点数据组,需要设置才能将两个bar堆积在一起*/
            type: 'bar',
            barMaxWidth: 40,
            yAxisIndex: 1,
            barGap: '0',
            itemStyle: {
              normal: {
                color: '#c6504d'

              }
            },
            data: lineHeightDatas
          }
        ]
      }
  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

Aabigale

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值