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柱状图,曲线图
最新推荐文章于 2024-07-01 13:14:09 发布