双y轴折柱图
设置双y轴
yAxis: [
{
type: "value",
show: true,
name: "单位:件",
axisTick: {
show: false, //刻度线
},
axisLine: {
show: false, //隐藏y轴
},
},
{
type: "value",
name: "单位:%",
min: -100, //设置右侧y轴显示数据,最大值和最小值
max: 100,
splitNumber: 10,
axisTick: {
show: false, //刻度线
},
axisLine: {
show: false, //隐藏y轴
},
splitLine: {
show: false, //隐藏y轴横线
},
},
],
指定使用左边右边Y轴数据,这里折线使用右边y轴
series: [
{
name: "本期",
type: "bar",
barWidth: 14,
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290],
},
{
name: "同期",
type: "bar",
barWidth: 14,
emphasis: {
focus: "series",
},
data: [150, -232, 201, 154, 190, 150, 232, 201, 154, 190],
},
{
name: "同比",
type: "line",
barGap: 0,
yAxisIndex: 1, //指定需要使用的Y轴,1代表右边,0代表左边,默认是左边
smooth: true,
symbol: "none",
emphasis: {
focus: "series",
},
data: [-100, 32, 31, 34, 39, 20, 32, 1, 34, 39],
lineStyle: {
color: "#37A2DA",
},
},
],
完整代码:
option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
right: 100,
},
legend: {
data: ["本期", "同期", "同比"],
},
color: ["#56AEDE", "#7CDFE6", "#56AEDE"],
xAxis: [
{
type: "category",
axisTick: { show: false },
axisLabel: { interval: 0 },
data: [
"停电",
"业扩报表",
"抢修质量",
"电压质量",
"抄表催费",
"客户基本信息",
"检修安排",
"服务",
"电能计量",
"电动汽车服务",
],
},
],
yAxis: [
{
type: "value",
show: true,
name: "单位:件",
axisTick: {
show: false, //刻度线
},
axisLine: {
show: false, //隐藏y轴
},
},
{
type: "value",
name: "单位:%",
min: -100,
max: 100,
splitNumber: 10,
axisTick: {
show: false, //刻度线
},
axisLine: {
show: false, //隐藏y轴
},
splitLine: {
show: false, //隐藏y轴横线
},
},
],
series: [
{
name: "本期",
type: "bar",
barWidth: 14,
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290],
},
{
name: "同期",
type: "bar",
barWidth: 14,
emphasis: {
focus: "series",
},
data: [150, -232, 201, 154, 190, 150, 232, 201, 154, 190],
},
{
name: "同比",
type: "line",
barGap: 0,
yAxisIndex: 1, //指定需要使用的Y轴
smooth: true,
symbol: "none",
emphasis: {
focus: "series",
},
data: [-100, 32, 31, 34, 39, 20, 32, 1, 34, 39],
lineStyle: {
color: "#37A2DA",
},
},
],
}