2021-8-13 前端達人
-
//var myChart = this.$echarts.init(document.getElementById("echart-twoline")); //vue
-
var myChart = echarts.init(document.getElementById("echart-twoline"));//jquery
-
var option = {
-
tooltip: {
-
trigger: 'axis',
-
axisPointer: {
-
type: 'shadow'
-
}
-
},
-
legend: {
-
data: ['計劃勞務資源', "實際勞務資源"],
-
//align: 'left',
-
right: 10,
-
textStyle: {
-
color: "#fff"
-
},
-
itemWidth: 14,
-
itemHeight: 10,
-
itemGap: 13,
-
},
-
grid: {
-
left: '3%',
-
right: '4%',
-
bottom: '3%',
-
containLabel: true
-
},
-
xAxis: [{
-
type: 'category',
-
data: ['1月','2月','3月', '4月'],
-
axisLine: {/x軸線的顏色以及寬度
-
show: true,
-
lineStyle: {
-
color: "rgba(219,225,255,1)",
-
width: 0,
-
type: "solid"
-
}
-
},
-
axisTick: {
-
show: false,
-
},
-
axisLabel: {//x軸文字的配置
-
show: true,
-
textStyle: {
-
color: "rgba(219,225,255,1)",
-
}
-
},
-
splitLine: {//分割線配置
-
show:false,
-
lineStyle: {
-
color: "rgba(219,225,255,1)",
-
}
-
}
-
}],
-
yAxis: [{
-
type: 'value',
-
name:"單位：人",//y軸上方的單位
-
nameTextStyle:{//y軸上方單位的顏色
-
color:'#151515'
-
},
-
axisLabel: {//y軸文字的配置
-
textStyle: {
-
color: "rgba(219,225,255,1)",
-
margin: 15
-
},
-
// formatter: '{value} %'//y軸的每一個刻度值后面加上‘%’號
-
},
-
axisTick: {
-
show: false,
-
},
-
axisLine: {//y軸線的顏色以及寬度
-
show: false,
-
lineStyle: {
-
color: "rgba(219,225,255,1)",
-
width: 1,
-
type: "solid"
-
},
-
},
-
splitLine: {//分割線配置
-
show:false,
-
lineStyle: {
-
color: "rgba(219,225,255,1)",
-
}
-
}
-
}],
-
series: [{
-
name: '計劃勞務資源',
-
type: 'bar',
-
data: [38,38,42,48],
-
barWidth: 10, //柱子寬度
-
barGap: .5, //柱子之間間距
-
itemStyle: {
-
normal: {
-
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-
offset: 0,
-
color: 'rgba(0, 153, 239, 0.8)'
-
}, {
-
offset: 1,
-
color: 'rgba(66, 187, 255, 1)'
-
}]),
-
opacity: 1,
-
}
-
}
-
}, {
-
name: '實際勞務資源',
-
type: 'bar',
-
data: [40, 30, 42, 50],
-
barWidth: 10,
-
barGap: .5,
-
itemStyle: {
-
normal: {
-
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-
offset: 0,
-
color: 'rgba(0, 242, 159, 1)'
-
}, {
-
offset: 1,
-
color: 'rgba(76, 240, 254, 1)'
-
}]),
-
opacity: 1,
-
}
-
}
-
}]
-
};
-
-
myChart.setOption(option);
-
window.addEventListener("resize", () => {
-
myChart.resize();
-
});
文章來源：csdn + 博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.wtxcl.cn