echarts折线图每段显示不同的颜色的实现
更新时间：2023年09月11日 16:21:06 作者：云隙阳光i
本文主要介绍了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,
],
},
],
},到此这篇关于echarts折线图每段显示不同的颜色的实现的文章就介绍到这了,更多相关echarts折线图颜色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了extjs简介，ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI组件，具有统一的主题，便于快速开发，提高效率2017-07-07
1. 保持无侵入性，标记不想知道你的JavaScript代码；2. 严禁修改和扩展Object.prototype!；3. 对JavaScript内建对象的扩展越少越好；4. 跟随标准；5. 或着跟随主导 ；6. 保持灵活；7. 管理内存；8. 淘汰浏览器嗅探；9. 小巧更佳……2009-01-01![TypeScript中的类型断言[as语法|＜＞语法]的使用](//img.jbzj.com/images/xgimg/bcimg2.png)
TypeScript中的类型断言[as语法|＜＞语法]的使用
本文主要介绍了TypeScript中的类型断言[as语法|＜＞语法]的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
本篇文章主要介绍了详解Javascript获取缓存和清除缓存API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
基于bootstrap的文件上传控件bootstrap fileinput
这篇文章主要为大家详细介绍了基于bootstrap的文件上传控件bootstrap fileinput，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了bootstrap响应式工具使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了JS事件添加和移出的兼容写法,结合实例形式分析了javascript针对不同浏览器实现实现添加与移除事件的相关技巧与使用方法,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
最近在用自定义组件搭建小程序,简单记录下步骤，所以这篇文章主要给大家介绍了关于微信小程序新手入门之自定义组件使用的相关资料，需要的朋友可以参考下2021-05-05
单体模式可以说是javascript中最基本也是最有用的模式之一，接下来通过本文给大家解析js设计模式之单体模式，非常不错，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了JS中使用FormData上传文件、图片的方法的相关资料,需要的朋友可以参考下2016-08-08
![TypeScript中的类型断言[as语法|＜＞语法]的使用](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论