Echarts横向堆叠柱状图和markLine实例详解
更新时间：2022年06月02日 17:00:48 作者：vaelcy
一些柱形图在数据量比较多的时候,横向排列受到挤压,导致柱形图,变的非常细,影响整体的效果,所以应该将柱形图堆叠起来,这样就会好很多,下面这篇文章主要给大家介绍了关于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的文章就介绍到这了,更多相关Echarts堆叠柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
非常不错的思路，用js实现表格的随机排序，建议大家看代码，学习编程思路2008-09-09
这篇文章主要介绍了BootStrap学习笔记之nav导航栏和面包屑导航的相关资料,需要的朋友可以参考下2017-01-01
继承机制是面向对象程序设计使代码可以复用的最重要的手段，它允许程序员在保持原有的特性基础上进行扩展，增加功能，这样产生新的类，称作是派生类。继承呈现了面向对象程序设计的层析结构，体现了由简单到复杂的认知过程。继承是类设计层次的复用2022-12-12
JavaScript事件代理（委托）一般用于以下情况：1. 事件注册在祖先级元素上，代理其子级元素。可以减少事件注册数量，节约内存开销，提高性能。2. 对js动态添加的子元素可自动绑定事件。本文主要介绍用原生 js 实现该功能。下面跟着小编一起来看下吧2016-12-12
这篇文章主要为大家详细介绍了javaScript实现放大镜特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
下面小编就为大家带来一篇js中遍历Map对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
玩微博的朋友都上传过图像吧，当图片上传后用户是可以随意拖动图片的，调整图片的顺序，那么此功能是怎么实现的，下面小编通过此篇文章给大家详解基于avalon js实现仿微博拖动图片排序，需要的朋友可以参考下2015-08-08
js HTML DOM EventListener功能与用法实例分析
这篇文章主要介绍了js HTML DOM EventListener功能与用法,结合实例形式分析了js HTML DOM EventListener事件监听相关用法及操作注意事项,需要的朋友可以参考下2020-04-04
闭包实质上是函数作用域的副产物,下面这篇文章主要给大家介绍了关于浏览器是如何看闭包的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2021-11-11
这篇文章主要给大家介绍了关于微信开发相关功能之使用微信JS-SDK接口的相关资料,微信SDK是一套开发工具包,为开发者提供了许多API接口,使得开发一个微信公众号变得更加简单,需要的朋友可以参考下2023-12-12
最新评论