标签：bar show color 0.3 柱状图 false 目标线 data echarts

1. 思路

画第二个x轴，在这个轴上绘制堆叠柱状图，下面的柱状图隐藏，上面的柱状图设置成白色，data取小一点，就可以看成一条直线了

2. 代码

xAxis: [
    {
        type: 'category',
        data: data.xArray,
        splitLine: {
            show: false
        },
        axisLabel: {// x轴字体设置
            fontSize: 12,
            color: '#ffffff',// 字体颜色
            interval: 0,// 不间隔显示标签，即显示所以标签
            rotate: 30// 标签倾斜角度
        },
        axisLine: {// x轴轴线设置
            lineStyle: {
                color: '#ffffff',
                width: 2,// 这里是为了突出显示加上的
            }
        }
    },
    {// 第二个x轴，不显示
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisPointer: {
            type: 'none',
        },
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
        data: data.xArray
    }
],
// series里面加入2个bar(想在每个柱子上都画横线的话，则增加2n个bar，每两个bar为一组，构成一个bar)
{
    name: "目标值",
    stack: 'breakevenEleGroup',
    type: 'bar',
    barWidth: "75%",
    xAxisIndex: 1,
    itemStyle: {
        normal: {
            color: 'rgba(0,0,0,0)',/*设置bar为隐藏*/
            label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                formatter: function (params) {
                    //console.log(params);
                    return params.value;
                },// 百分比显示
                textStyle: { // 数值样式
                    color: 'white',
                    fontSize: 12,
                }
            }
        }
    },
    data: data.goal
},
{
    /*这个bar是横线的显示*/
    name: "目标值上面的柱子",
    stack: 'breakevenEleGroup',
    type: 'bar',
    xAxisIndex: 1,
    barWidth: "75%",
    itemStyle: {
        normal: {
            color: 'white'
        }
    },
    data: [0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3],
},

3. 效果

标签：bar,show,color,0.3,柱状图,false,目标线,data,echarts
来源： https://www.cnblogs.com/yddwinter/p/16326630.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。