Echarts橫向堆疊柱狀圖和markLine實(shí)例詳解
更新時(shí)間：2022年06月02日 17:00:48 作者：vaelcy
一些柱形圖在數(shù)據(jù)量比較多的時(shí)候,橫向排列受到擠壓,導(dǎo)致柱形圖,變的非常細(xì),影響整體的效果,所以應(yīng)該將柱形圖堆疊起來,這樣就會(huì)好很多,下面這篇文章主要給大家介紹了關(guān)于Echarts橫向堆疊柱狀圖和markLine的相關(guān)資料,需要的朋友可以參考下
1.Echarts 橫向堆疊柱狀圖 + markLine
效果圖
根據(jù)月份計(jì)算百分比展示markLine
思路： 根據(jù)月份計(jì)算百分比展示markLine，例如3月就是25%，這里的圖表是數(shù)值，所以markLine要展示百分比需要進(jìn)行一下計(jì)算，思路是在series里添加一個(gè)專門為了markLine處理的（這里是雙柱子所以要采用這種方法，如果是單個(gè)柱子就不需要，可以直接在series里邊項(xiàng)寫markLine），具體計(jì)算方式在option代碼上面，大家自行看一下這里不復(fù)制重復(fù)寫了
驗(yàn)證：我這里的x軸隱藏掉了，大家為了驗(yàn)證計(jì)算的對(duì)不對(duì)可以把a(bǔ)xisLabel show: 改為true,對(duì)比下數(shù)值和markLine值是否正確
代碼如下：
mychart() {
var myChart = echarts.init(document.getElementById('profitTotal6'));
let echartData = [{
name: "其他",
value1: 64,
value2: 84,
},
{
name: "運(yùn)輸",
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: "風(fēng)電",
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);//設(shè)置x軸最大值
let date_ = new Date();
let month = date_.getMonth() + 1;
let markyAxis = maxxAxis / 12 * month; //markLine值
let markyvalueText = parseInt(markyAxis / maxxAxis * 100); //為了控制百分樣式
let paddingStyle;//根據(jù)數(shù)值動(dòng)態(tài)設(shè)置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: ['年度投資完成額(滯后)', '年度投資計(jì)劃'],
orient: "horizontal",//vertical
x: 'center',
// y: 'bottom',
// right: '-50%',
bottom: '2%',
icon: "roundRect1",
selectedMode: false,//取消圖例上的點(diǎn)擊事件
itemWidth: 16, // 設(shè)置寬度
itemHeight: 10, // 設(shè)置高度
itemGap: 10,// 設(shè)置間距
textStyle: {//文字根據(jù)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//文字旋轉(zhuǎn)角度
},
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: '年度投資計(jì)劃',
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: '最長(zhǎng)背景',
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
效果圖
根據(jù)數(shù)據(jù)計(jì)算百分比展示markLine
代碼如下
根據(jù)數(shù)據(jù)計(jì)算百分比展示markLine，和上面基本同理，這個(gè)只是數(shù)值上的轉(zhuǎn)換，和月份沒有關(guān)系了
mychart() {
var myChart = echarts.init(document.getElementById('profitTotal2'));
let echartData = [{
name: "其他",
value1: 64,
value2: 84,
},
{
name: "運(yùn)輸",
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: "風(fēng)電",
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);//設(shè)置x軸最大值
let markyAxis = maxxAxis * 0.9; //markLine值90%
let markyvalueText = parseInt(markyAxis / maxxAxis * 100); //為了控制百分樣式
let paddingStyle;//根據(jù)數(shù)值動(dòng)態(tài)設(shè)置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: ['合同總額（預(yù)警）', '項(xiàng)目概算'],
orient: "horizontal",//vertical
x: 'center',
// y: 'bottom',
// right: '-50%',
bottom: '2%',
icon: "roundRect1",
selectedMode: false,//取消圖例上的點(diǎn)擊事件
itemWidth: 16, // 設(shè)置寬度
itemHeight: 10, // 設(shè)置高度
itemGap: 10,// 設(shè)置間距
textStyle: {//文字根據(jù)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//文字旋轉(zhuǎn)角度
},
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: '合同總額（預(yù)警）',
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: '項(xiàng)目概算',
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: '最長(zhǎng)背景',
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);
},總結(jié)
到此這篇關(guān)于Echarts橫向堆疊柱狀圖和markLine的文章就介紹到這了,更多相關(guān)Echarts堆疊柱狀圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果的方法,涉及javascript鼠標(biāo)事件及頁面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
JavaScript實(shí)現(xiàn)簡(jiǎn)單的日歷效果
本文給大家分享的是一個(gè)簡(jiǎn)單的JavaScript制作的日歷模板，小伙伴們可以根據(jù)自己的需求，繼續(xù)補(bǔ)充，希望大家能夠喜歡2016-09-09
js滾輪事件 js自定義滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了js滾輪事件，自定義滾動(dòng)條的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了微信小程序如何使用globalData的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
inner join 內(nèi)聯(lián)與left join 左聯(lián)的實(shí)例代碼
這篇文章主要介紹了inner join 內(nèi)聯(lián)與left join 左聯(lián)的實(shí)例代碼,需要的朋友可以參考下2017-09-09
JS數(shù)組方法concat()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法concat()用法,結(jié)合實(shí)例形式分析了JS數(shù)組concat()方法具體功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例
本篇文章主要介紹了微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
JavaScript 是一種有趣的語言，我們都喜歡它，因?yàn)樗男再|(zhì)。這篇文章主要介紹了8個(gè)有意思的JavaScript面試題 ,需要的朋友可以參考下2019-07-07
JavaScript實(shí)現(xiàn)table切換的插件封裝
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)table切換的插件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
用jscript實(shí)現(xiàn)獲取登錄時(shí)間的腳本2008-05-05