/*工资项目趋势分析堆积图*/
function wagesStr(dataName, dataList1, dataList2, dataList3, dataList4) {
var myChart = echarts.init(document.getElementById('wages'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
data: [
{"name": "工资"},
{"name": "提成"},
{"name": "其他"},
{"name": "总收入"}
],
icon: "circle",
"bottom": "2%",
textStyle: {
"color": "rgba(255,255,255,0.9)"
}
},
"xAxis": [
{
type: "category",
data: dataName,
axisLine: {show: false},
axisLabel: {
textStyle: {color: "rgba(255,255,255,.6)", fontSize: '14',},
}
}
],
"yAxis": [
{
type: "value",
name: "",
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false}
}
],
"grid": {
"top": "0%",
"right": "5%",
"bottom": "15%",
"left": "0%",
containLabel: true
},
series: [
{
"name": "工资",
"type": "bar",
stack: '总量',
barWidth: "30%",
barGap: "40%",
"data": dataList1,
itemStyle: {
barBorderRadius: 20,
color: "#2e4e6d"
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
},
{
"name": "提成",
"type": "bar",
"data": dataList2,
stack: '总量',
barWidth: "30%",
barGap: "40%",
itemStyle: {
barBorderRadius: 20,
color: "#38636f"
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
}
},
{
"name": "其他",
"type": "bar",
stack: '总量',
"data": dataList3,
barWidth: "30%",
barGap: "40%",
itemStyle: {
barBorderRadius: 20,
color: "#293d42"
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#fba145'},
{offset: 0.7, color: '#fed53f'},
{offset: 1, color: '#fbe247'}
]
)
}
},
"barGap": "0"
},
{
"name": "总收入",
"type": "line",
"yAxisIndex": 0,
"data": dataList4,
lineStyle: {
normal: {
width: 3
},
},
itemStyle: {
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [
{
"offset": 0,
"color": "#2c86e1"
},
{
"offset": 0.5,
"color": "#d4f170"
},
{
"offset": 1,
"color": "#ff943c"
}
],
"globalCoord": false
}
},
"smooth": true
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
Echarts实战案例代码(1):柱图堆叠方案备选案例
原创
©著作权归作者所有:来自51CTO博客作者漏刻有时的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
echarts: 堆叠柱状图
stack属性相同的series会进行堆叠。
echarts 前端 javascript bc -
[echarts] 用graphic模拟可移动的markline
【代码】[echarts] 用graphic模拟可移动的markline。
echarts 前端 javascript Math ci -
echarts 多个柱状堆叠图 顶部显示总数
左边的柱状图顶部显示所有堆叠图数据的总和 右边柱状图顶部也显示所有堆叠数据的总和
柱状图 echarts vue.js -
[echarts] 两侧堆叠柱状图
【代码】[echarts] 两侧堆叠柱状图。
echarts 前端 javascript 图例 坐标轴