Echarts横向堆叠柱状图和markLine怎么使用

这篇文章主要介绍“Echarts横向堆叠柱状图和markLine怎么使用”，在日常操作中，相信很多人在Echarts横向堆叠柱状图和markLine怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Echarts横向堆叠柱状图和markLine怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

1.Echarts 横向堆叠柱状图 + markLine

效果图

根据月份计算百分比展示markLine

思路： 根据月份计算百分比展示markLine，例如3月就是25%，这里的图表是数值，所以markLine要展示百分比需要进行一下计算，思路是在series里添加一个专门为了markLine处理的（这里是双柱子所以要采用这种方法，如果是单个柱子就不需要，可以直接在series里边项写markLine），具体计算方式在option代码上面，大家自行看一下这里不复制重复写了

验证：我这里的x轴隐藏掉了，大家为了验证计算的对不对可以把axisLabel show: 改为true,对比下数值和markLine值是否正确

代码如下：

mychart() {    var myChart = echarts.init(document.getElementById('profitTotal6'));    let echartData = [{        name: "其他",        value1: 64,        value2: 84,    },    {        name: "运输",        value1: 104,        value2: 164,    },    {        name: "化工",        value1: 619.59,        value2: 354.00,    },    {        name: "煤炭",        value1: 338.01,        value2: 154.00,    },    {        name: "光伏",        value1: 248.69,        value2: 934.00,    },    {        name: "风电",        value1: 556.43,        value2: 654.00,    },    {        name: "水电",        value1: 816.31,        value2: 354.00,    },    {        name: "火电",        value1: 221.87,        value2: 154.00,    }    ];    let xAxisData = echartData.map(v => v.name);    let yAxisData1 = echartData.map(v => v.value1);    let yAxisData2 = echartData.map(v => v.value2);    let bgdata = [];    echartData.map(item => {        bgdata.push(parseInt(item.value1 + item.value2) + 100);    })    let maxxAxis = Math.max.apply(null,bgdata);//设置x轴最大值    let date_ = new Date();    let month = date_.getMonth() + 1;    let markyAxis = maxxAxis / 12 * month;  //markLine值    let markyvalueText = parseInt(markyAxis / maxxAxis * 100); //为了控制百分样式    let paddingStyle;//根据数值动态设置padding样式    if (0 <= markyvalueText && markyvalueText < 10) {        paddingStyle = [10, 7];    } else if (10 <= markyvalueText && markyvalueText < 100) {        paddingStyle = [10, 5];    } else {        paddingStyle = [14, 5];    }    option = {        // tooltip: {        //     trigger: 'axis',        //     axisPointer: {        //         type: 'shadow'        //     }        // },        legend: {            data: ['年度投资完成额(滞后)', '年度投资计划'],            orient: "horizontal",//vertical            x: 'center',            // y: 'bottom',            // right: '-50%',            bottom: '2%',            icon: "roundRect1",            selectedMode: false,//取消图例上的点击事件            itemWidth: 16,  // 设置宽度            itemHeight: 10, // 设置高度            itemGap: 10,// 设置间距            textStyle: {//文字根据legend显示                 color: "#FFFFFF",                fontSize: 12,            },        },        grid: {            left: '8%',            top: '18%',            right: '8%',            bottom: '12%',            containLabel: true        },        yAxis: {            type: 'cateGory',            triggerEvent: true,            data: xAxisData,            axisLine: {                show: false            },            axisLabel: {                color: "#FFFFFF",                fontSize: '14',                // interval: 0,                // rotate: rotate//文字旋转角度            },            axisTick: {                show: false,                alignWithLabel: true,                lineStyle: {                    color: '#0C4F81',                    type: 'solid'                }            },        },        xAxis: {            type: 'value',            max: maxxAxis,            nameTextStyle: {                color: '#4F88BD',                padding: [0, 25, -5, 0],                fontSize: 12,                fontFamily: 'Microsoft YaHei',            },            axisLine: {                show: false,                lineStyle: {                    color: "#0C4F81"                }            },            axisLabel: {                show: false,//                color: "#4F88BD",                fontSize: '12',                fORMatter: '{value}'            },            splitLine: {                show: false,                lineStyle: {                    type: "dotted",                    color: "#0C4F81"                }            },            axisTick: {                show: false            },        },        series: [            {                name: '年度投资完成额(滞后)',                type: 'bar',                barMaxWidth: 15,                stack: 'Ad',                emphasis: {                    focus: 'series'                },                itemStyle: {                    normal: {                        label: {                            show: true,                            // position: 'top',                            color: '#ffffff'                        },                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{                            offset: 0,                            color: "rgba(128, 123, 254, 1)"                        },                        {                            offset: 1,                            color: "rgba(230, 143, 252, 1)"                        }                        ]),                    }                },                data: yAxisData1,            },            {                name: '年度投资计划',                type: 'bar',                barMaxWidth: 15,                stack: 'Ad',                emphasis: {                    focus: 'series'                },                itemStyle: {                    normal: {                        label: {                            show: true,                            // position: 'top',                            color: '#ffffff'                        },                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                            offset: 0,                            color: "rgba(13, 78, 137, 1)"                        },                        {                            offset: 1,                            color: "rgba(13, 78, 137, 1)"                        }                        ]),                    }                },                data: yAxisData2,            },            {                // 为了处理markline                name: '最长背景',                type: 'bar',                barMaxWidth: 5,                color: 'transparent',                data: bgdata,                markLine: {                    data: [                        { name: '考核临界线',xAxis:markyAxis},                    ],                    silent: true,                    symbol:'none',//去掉箭头                    itemStyle: {                        normal: {                            lineStyle: {                                color: '#FA7F3C',                                type: 'solid'                            },                            label:{                                // color: '#FA7F3C',                                formatter:'{c}%',                                show:true,                                backgroundColor: '#FFF7F2',                                color: '#DB6525',                                fontSize: '100%',                                borderColor: '#FFF7F2',                                formatter: function(v){                                    var s = parseInt(v.value / maxxAxis * 100);                                    return s + '%';                                },                                padding:paddingStyle,                                borderRadius: 50,                            }                        }                    },                },            },        ]    };    myChart.clear();    myChart.setOption(option);},

2.Echarts 横向堆叠柱状图 + markLine

效果图

根据数据计算百分比展示markLine

代码如下

根据数据计算百分比展示markLine，和上面基本同理，这个只是数值上的转换，和月份没有关系了

mychart() {    var myChart = echarts.init(document.getElementById('profitTotal2'));    let echartData = [{        name: "其他",        value1: 64,        value2: 84,    },    {        name: "运输",        value1: 104,        value2: 164,    },    {        name: "化工",        value1: 619.59,        value2: 354.00,    },    {        name: "煤炭",        value1: 338.01,        value2: 154.00,    },    {        name: "光伏",        value1: 248.69,        value2: 934.00,    },    {        name: "风电",        value1: 556.43,        value2: 654.00,    },    {        name: "水电",        value1: 816.31,        value2: 354.00,    },    {        name: "火电",        value1: 221.87,        value2: 154.00,    }    ];    let xAxisData = echartData.map(v => v.name);    let yAxisData1 = echartData.map(v => v.value1);    let yAxisData2 = echartData.map(v => v.value2);    let bgdata = [];    echartData.map(item => {        bgdata.push(parseInt(item.value1 + item.value2) + 100);    })    let maxxAxis = Math.max.apply(null,bgdata);//设置x轴最大值    let markyAxis = maxxAxis  * 0.9;  //markLine值90%    let markyvalueText = parseInt(markyAxis / maxxAxis * 100); //为了控制百分样式    let paddingStyle;//根据数值动态设置padding样式    if (0 <= markyvalueText && markyvalueText < 10) {        paddingStyle = [10, 7];    } else if (10 <= markyvalueText && markyvalueText < 100) {        paddingStyle = [10, 5];    } else {        paddingStyle = [14, 5];    }    option = {        // tooltip: {        //     trigger: 'axis',        //     axisPointer: {        //         type: 'shadow'        //     }        // },        legend: {            data: ['合同总额（预警）', '项目概算'],            orient: "horizontal",//vertical            x: 'center',            // y: 'bottom',            // right: '-50%',            bottom: '2%',            icon: "roundRect1",            selectedMode: false,//取消图例上的点击事件            itemWidth: 16,  // 设置宽度            itemHeight: 10, // 设置高度            itemGap: 10,// 设置间距            textStyle: {//文字根据legend显示                 color: "#FFFFFF",                fontSize: 12,            },        },        grid: {            left: '8%',            top: '18%',            right: '8%',            bottom: '12%',            containLabel: true        },        yAxis: {            type: 'category',            triggerEvent: true,            data: xAxisData,            axisLine: {                show: false            },            axisLabel: {                color: "#FFFFFF",                fontSize: '14',                // interval: 0,                // rotate: rotate//文字旋转角度            },            axisTick: {                show: false,                alignWithLabel: true,                lineStyle: {                    color: '#0C4F81',                    type: 'solid'                }            },        },        xAxis: {            type: 'value',            max: maxxAxis,            nameTextStyle: {                color: '#4F88BD',                padding: [0, 25, -5, 0],                fontSize: 12,                fontFamily: 'Microsoft YaHei',            },            axisLine: {                show: false,                lineStyle: {                    color: "#0C4F81"                }            },            axisLabel: {                show: false,                color: "#4F88BD",                fontSize: '12',                formatter: '{value}'            },            splitLine: {                show: false,                lineStyle: {                    type: "dotted",                    color: "#0C4F81"                }            },            axisTick: {                show: false            },        },        series: [            {                name: '合同总额（预警）',                type: 'bar',                barMaxWidth: 15,                // zlevel: 1,                stack: 'Ad',                emphasis: {                    focus: 'series'                },                itemStyle: {                    normal: {                        label: {                            show: true,                            // position: 'top',                            color: '#ffffff'                        },                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{                            offset: 0,                            color: "rgba(252, 175, 159, 1)"                        },                        {                            offset: 1,                            color: "rgba(241, 88, 135, 1)"                        }                        ]),                    }                },                data: yAxisData1,            },            {                name: '项目概算',                type: 'bar',                barMaxWidth: 15,                // zlevel: 1,                stack: 'Ad',                emphasis: {                    focus: 'series'                },                itemStyle: {                    normal: {                        label: {                            show: true,                            // position: 'top',                            color: '#ffffff'                        },                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                            offset: 0,                            color: "rgba(13, 78, 137, 1)"                        },                        {                            offset: 1,                            color: "rgba(13, 78, 137, 1)"                        }                        ]),                    }                },                data: yAxisData2,            },            {                // 为了处理markline                name: '最长背景',                type: 'bar',                barMaxWidth: 5,                // barGap: '-100%',                color: 'transparent',                // itemStyle: {                //     normal: {                //         color: '#1B375E',                //         barBorderRadius: 0,                //     },                // },                data: bgdata,                markLine: {                    data: [                        { name: '考核临界线',xAxis:markyAxis},                    ],                    silent: true,                    symbol:'none',//去掉箭头                    itemStyle: {                        normal: {                            lineStyle: {                                color: '#FA7F3C',                                type: 'solid'                            },                            label:{                                formatter:'{c}%',                                show:true,                                backgroundColor: '#FFF7F2',                                color: '#DB6525',                                fontSize: '100%',                                borderColor: '#FFF7F2',                                formatter: function(v){                                    var s = parseInt(v.value / maxxAxis * 100);                                    return s + '%';                                },                                padding:paddingStyle,                                borderRadius: 50,                            }                        }                    },                },            },        ]    };    myChart.clear();    myChart.setOption(option);},

到此，关于“Echarts横向堆叠柱状图和markLine怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！