var yMax = 5;
var dataShadow = [];
var data = [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
option = {
grid: {
bottom: "15%"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true
}
}
},
legend: {
data: ["銷售水量", "主營業務"],
bottom: "5%",
icon: 'path://M7.424 476.672L301.312 778.24s205.312-204.288 425.984 0c3.072 1.024 291.84-301.568 291.84-301.568s-466.944-519.168-1011.712 0z'
},
xAxis: {
data: [
"當年完成水量",
"去年同期水量",
"滾動目標值水量",
"全年目標值水量",
"當年完成金額",
"去年同期金額",
"滾動目標金額",
"全年目標值",
],
axisLabel: {
textStyle: {
color: "black" //X軸文字顏色
}
},
axisLine: {
lineStyle: {
color: 'black'
}
},
},
yAxis: [{
type: "value",
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(135,140,147,0.8)'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: "black"
}
}
},
{
type: "value",
position: "right",
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: "{value} %", //右側Y軸文字顯示
}
}
],
series: [{
type: 'bar',
itemStyle: {
color: 'rgba(0,0,0,0.05)'
},
barWidth: 15,
barGap: '-100%',
data: dataShadow,
animation: false
},
{
name: "銷售水量",
type: "line",
yAxisIndex: 1, //使用的 y 軸的 index,在單個圖表實例中存在多個 y軸的時候有用
smooth: true, //平滑曲線顯示
showAllSymbol: true, //顯示所有圖形。
symbolSize: 10, //標記的大小
itemStyle: {
color: "#FF9900" //折線拐點標誌的樣式
},
lineStyle: {
color: "#FF9900"
},
data: data
},
{
name: "主營業務",
type: "bar",
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#8CD9FF"
},
{
offset: 1,
color: "#6F9BFE"
}
])
}
},
data: data
}
]
};
Echarts柱狀圖,曲線圖
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.