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折线图颜色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
现在网上有非常多的Promise文章，但都是给你一堆代码，或者某些核心代码，让你看完之后感觉，嗯，很厉害，但还是不知所云，不知其所以然。那么本文真正从一个小白开始带你深入浅出，一步一步实现自己的 Promise，这种自己造轮子的过程一定是进步最快的过程，快上车开始吧2022-11-11
使用Modello编写JavaScript类...2006-12-12
JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，这篇文章主要介绍了JSON生成Form表单的方法示例,感兴趣的小伙伴们可以参考一下2018-11-11
刚接触python的时候，最不习惯的事情，就是每个方法都要加一个self。无论Javascript还是C#，都直接一个this搞定，干嘛非要加一个变量self。2010-08-08
这篇文章主要介绍了javascript匿名函数,以实例形式详细分析了javascript匿名函数的定义、用法及注意事项,具有很好的学习借鉴价值,需要的朋友可以参考下2014-11-11
AJAX(Asynchronous JavaScript and XML)是一种用于创建快速、动态和交互式网页的技术,它的主要优势在于能够在不刷新整个网页的情况下与服务器进行数据交互,这篇文章主要给大家介绍了关于常见Ajax下载文件方式以及报错解决办法的相关资料,需要的朋友可以参考下2024-01-01
今天与同事一起看了一个javscript定义函数问题，如何在定义一个函数里给参数一个默认值.2011-07-07
如何让一个json文件显示在表格里？下面小编就为大家带来一篇让一个json文件显示在表格里的实现代码。希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-05-05
Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。接下来小编给大家介绍如何安装 Ionic 在自己的电脑上搭建一个简单的小应用，感兴趣的朋友一起看看吧2016-06-06
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
下面小编就为大家带来一篇浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论