效果图
配置项：
zqChartFour: {
title: {
text: "一天用电量分布",
subtext: "纯属虚构",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
toolbox: {
show: true,
feature: {
saveAsImage: {
},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"00:00",
"01:15",
"02:30",
"03:45",
"05:00",
"06:15",
"07:30",
"08:45",
"10:00",
"11:15",
"12:30",
"13:45",
"15:00",
"16:15",
"17:30",
"18:45",
"20:00",
"21:15",
"22:30",
"23:45",
],
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value} W",
},
axisPointer: {
snap: true,
},
},
visualMap: [
{
show: false,
dimension: 0,
seriesIndex: 0, //第一部分数据
pieces: [
{
lte: 6,
color: "orange",
},
{
gt: 6,
lte: 8,
color: "red",
},
{
gt: 8,
lte: 14,
color: "purple",
},
{
gt: 14,
lte: 17,
color: "Chocolate",
},
{
gt: 17,
color: "pink",
},
],
},
{
show: false,
dimension: 0,
seriesIndex: 1, //第二部分数据
pieces: [
{
lte: 3,
color: "blue",
},
{
gt: 3,
lte: 8,
color: "black",
},
{
gt: 8,
lte: 14,
color: "green",
},
{
gt: 14,
lte: 17,
color: "grey",
},
{
gt: 17,
color: "DodgerBlue",
},
],
},
],
series: [
{
name: "用电量",
type: "line",
smooth: true,
data: [
300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400,
500, 600, 750, 800, 700, 600, 400,
],
},
{
name: "费用",
type: "line",
smooth: true,
data: [
200, 180, 150, 160, 170, 200, 450, 400, 300, 290, 280, 290, 300,
400, 400, 650, 700, 600, 450, 300,
],
},
],
},