效果图

配置项:
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,],},],},