当前位置: 首页 > news >正文

echarts折线图每段显示不同的颜色

效果图

在这里插入图片描述

配置项:
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,],},],},
http://www.lryc.cn/news/164429.html

相关文章:

  • 设计模式-单例模式(Singleton)
  • 优漫动游 常见的AI视频生成网站的官方网站:
  • Vue中数据可视化关系图展示与关系图分析
  • 【启扬方案】基于启扬安卓屏一体机的医疗手推车解决方案
  • JavaScript实现MD5加密的6种方式
  • 腾讯云和阿里云2核2G服务器租用价格表对比
  • 抖音无需API开发连接Stable Diffusion,实现自动根据评论区的指令生成图像并返回
  • MySQL(三)
  • 汽车级肖特基二极管DSS220-Q 200V 2A
  • maven jetty post 上传长度设置
  • LeetCode 面试题 03.03. 堆盘子
  • Python-函数进阶
  • 实操Hadoop大数据高可用集群搭建(hadoop3.1.3+zookeeper3.5.7+hbase3.1.3+kafka2.12)
  • 如何在 Ubuntu 上安装和使用 Nginx?
  • seatunnel win idea 本地调试
  • 链路追踪Skywalking快速入门
  • 全开源影视APP源码带后台 苍穹影视APP源码 免受权带安装教程
  • Qt+C++自建网页浏览器-Chrome blink最新内核基础上搭建-改进版本
  • 这场科技巨变,有生之年有希望
  • zemax优化功能
  • Centos8关闭IPV6
  • 华为OD七日集训第4期 - 按算法分类,由易到难,循序渐进,玩转OD
  • flutter 抓包工具charles
  • ——二叉树
  • 【linux命令讲解大全】103.Linux目录堆栈命令 dirs 的使用方法和选项详解
  • vue3项目应用font awesome6
  • 【JavaScript】JS语法入门到实战
  • 【Linux】工具Gdb调试轻度使用(C++)
  • linux xhost命令
  • linux在线源码阅读网站