Echarts3实例叠加柱状图

本文主要是介绍Echarts3实例叠加柱状图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

堆叠柱状图本身是不难实现的，在项目上需求遇到在柱状图上边，添加统计label。

实现效果

在这里插入图片描述

实现代码

    思路：
        添加新的series放在最上层，让series隐藏，并设置label显示统计label
        tooltip隐藏最后一列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html,body{height: 100%;}*{margin: 0px;height: 0px;}#chartDiv{width: 650px;height: 370px;border: 1px solid red;}</style><script src="js/echarts.min.js"></script>
</head>
<body>
<div id="chartDiv"></div><script>var chartDiv = echarts.init(document.getElementById('chartDiv'));var option = option = {title:{text:"带统计的堆叠柱状图"},legend: {data:['百度','谷歌','必应','其他']},tooltip : {//过滤掉统计的seriestrigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'},formatter: function(params){var res=params[0].name+"<br/>";for(let i=0;i<params.length-1;i++){res+=params[i].seriesName+":"+params[i].value+"<br/>"}return res;}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type : 'category',data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value'}],series : [{name:'百度',type:'bar',barWidth : 35,stack: '搜索引擎',data:[620, 732, 701, 734, 1090, 1130, 1120]},{name:'谷歌',type:'bar',stack: '搜索引擎',data:[120, 132, 101, 134, 290, 230, 220]},{name:'必应',type:'bar',stack: '搜索引擎',data:[60, 72, 71, 74, 190, 130, 110]},{name:'其他',type:'bar',stack: '搜索引擎',data:[62, 82, 91, 84, 109, 110, 120]},{name:'统计',type:'bar',stack: '搜索引擎',data:[0.3, 0.6, 0.9, 0.84, 0.36, 0.11, 0.66],//模拟数据label: {normal: {offset:[0, -10],//左右，上下show: true,position: 'insideLeft',formatter:function(params){if(params.data==0){return "0%";}else{return params.data*100+"%";}},fontSize:14,fontWeight:'bold',textStyle:{ color:'#199ED8' }}},itemStyle:{normal:{color:'rgba(128, 128, 128, 0)'}},}]};chartDiv.setOption(option);</script></body>
</html>

这篇关于Echarts3实例叠加柱状图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！