ECharts中让一条线上不同区间显示不同颜色

最新推荐文章于 2024-05-30 23:16:00 发布
最新推荐文章于 2024-05-30 23:16:00 发布
阅读量3.3k 收藏 4
点赞数
分类专栏： 网页 文章标签： echarts javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lgs790709/article/details/118958235
版权

编者：李国帅

qq：9611153 微信lgs9611153

时间：2021-7-20

问题描述及概念:

Apache ECharts是一个基于 JavaScript 的开源可视化图表库

https://echarts.apache.org/zh/index.html

可以使用visualMap分段映射的方式分段显示不同颜色，然后隐藏visualMap。

使用伪造series的方法添加不同图例。然后在右侧隐藏toolbox，添加一个注解。如下图所示。

申请颜色

const colors = [

    "#93CE07",

    "#FBDB0F",

    "#FC7D02",

    "#FD0100",

    "#AA069F",

    "#AC3B2A",

    "#FD0100",

    "#FBDB0F",

    "#FC7D02",

    "#AA069F",

    "#999",

  ];

使用visualMap为不同线段添加颜色颜色

设置图例

在series: (function () {中添加一个假的不存在的数据序列

微澜-
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
echarts实现柱状图不同颜色 && 柱状图横向纵向展示
天干地支甲
07-22 2093
```javascript series: [ { name: '', type: 'bar', // color:'#50cfe4', //data: [987342,524214,504344,325424,245324,242102] .
echarts 梯度显色以及线段不同区域显色不同
03-13
快速配置出echarts；包括不显示 x y轴刻度； 背景色 按 不同区域显示不同色； 线段也按 区域不同， 显示不同色
echarts做曲线图 超过范围颜色不一样的设定
以爱护甲,爱满枫林。
12-13 2204
test3:function () { let myChart = echarts.init(document.getElementById('echart3')); let date = new Date(); testEcharts({createDate:date}).then(function (rsp) { console.log(rsp) ...
四种为 echarts 条形图柱子设置不同颜色的方法，总有一款适合你
最新发布
weixin_57818879的博客
05-30 4217
主要通过直接赋值、回调函数静态映射和回调函数动态生成（包括渐变色）这几种方式来设置不同柱子的不同颜色。具体采用哪种方法取决于需求的复杂度和个性化程度，我相信总有一款适合你。
Echarts实现柱状图不同时段不同颜色
qq_42827425的博客
04-12 2746
<template> <div id="energy_hour"></div> </template> <script> // 按需引入ECharts 主模块 var echarts = require("echarts/lib/echarts"); // 引入提示框、标题、legend组件 require("echart...
Echarts中一条线设置不同的颜色
qq_43235503的博客
05-05 509
Echarts中一条线设置不同的颜色
echarts设置上下限， 折线超出部分，显示别的颜色
Teemo_shape的博客
05-09 2972
需求: 进出水设置了最大值最小值，监控实时数据，超出部分标红。 visualMap视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。 visualMap: [ { top: 10, right: 10, show: false, precision: 1, seriesIndex: 0, ...
echarts折线图每段显示不同的颜色
preoccupied_的博客
09-11 1013
【代码】echarts折线图每段显示不同的颜色。
echarts折线图曲线图分段用不同颜色显示，曲线改变颜色例子，Y轴超过某一数值曲线变色
05-04
echarts折线图曲线图分段用不同颜色显示，Y轴超过某一数值变色,echarts曲线改变颜色例子,x轴和y轴数据可以自己定义,曲线默认显示黑色(black)，400以上900以下显示成金色(gold)。 核心代码 visualMap: { show: false...
在Echarts图中给坐标轴加一个标识线markLine
10-15
主要介绍了在Echarts图中给坐标轴加一个标识线markLine，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts 图表加水平直线或者标准线.js
05-04
echarts 图表加水平直线或者标准线。添加标准线上的折线一种颜色，标准线下的折线又是一种颜色来区分标准线以上或者以下的数据。
echarts地图散点悬浮显示多条数据
10-29
echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据
Echarts 折线图超出上下限部分变色 结合visualMap处理
weixin_42333548的博客
09-01 4634
第一：查看series中是否设置了线条的颜色，比如lineStyle的color，设置了之后就会以这个为准，visualMap里面的颜色就不会生效了。我会经常分享自己所学所看的干货，在进阶的路上，共勉！注意点：在series 里面不能设置线的颜色，要不然会以series里面设置的颜色为准，设置的范围变色将不起作用。第二：如果上面方法还不行，试试按需引入visualMap的js文件。前言：介绍单个折线图的处理方法和多个折线图不同颜色的处理方法。一：单折线图代码逻辑。二：多折线图代码逻辑。...........
echarts折线图中分段用不同颜色显示
Amanda_wmy的博客
11-12 7990
echarts折线图中分段用不同颜色显示 在用echarts做折线图的时候，需要一条线段根据某个条件用两种或以上颜色显示，在官网上看到一个这样的实例：查看例子，发现是visualMap的作用，当然官网上的这个效果也是通过静态的配置实现的，但是我们可以动态的配置参数呀~ 案例： 要求：根据后端返回的数据状态的不同，将数据用不同线段的颜色渲染出来。 实现： 根据官网例子改的，数据是动态获取的 ...
echarts 折线种不同线段不同颜色的代码
kofboy520的博客
11-22 1883
之前在往上搜了几篇文章，目前只发现了两种方法 一种是使用echarts里的配置项 visualMap，但是我没找到根据横坐标的值来改变折线颜色，只有按照series.data里值的范围划分不同颜色 另一种是将series里的data拆分成若干个数组，例如： 原数据为：data=[1,2,3,4,5] 拆分后： data[0]=[1,2,-,-,-],data[1]=[-,2,3,-,-],...
echart柱状条根据不同数据显示不同颜色
yuyu_2019的博客
03-13 209
【代码】echart柱状条根据不同数据显示不同颜色。
vue使用echarts实现动态实时折线图并添加上下限超出变色
qq_42129925的博客
07-29 4385
vue使用echarts实现动态实时折线图并添加上下限超出变色。
echarts 折线分段显示不同颜色
热门推荐
qq_36128699的博客
09-07 1万+
根据数据，折线在不同区域显示不同颜色  当大于10时显示绿色，小于10时显示红色
关于Echarts图表根据y轴value值设置区间标注出不同颜色(绝对好使) 本人专注前端钻研, 如有疑难杂症请关注我, 我会帮你解决
HuangZeJunXXX的博客
08-22 5539
针对echarts3柱状图的答案:在series里配置如下itemStyle,即可实现值大于0时为红色，小于0时为绿色 itemStyle: { normal: { color: function(params) { var index_color = params.value; ...
echarts如何让地图不同地区显示不同颜色
05-30
要让 echarts 显示不同地区的颜色，可以使用 echarts 中的地图组件。具体的做法是，通过设置地图数据中的 value 值，来决定地图区域的颜色。 例如，可以先定义一个地图数据： ``` var mapData = [ {name: '北京', value: 200}, {name: '上海', value: 300}, {name: '广东', value: 400}, // ... ]; ``` 然后在 echarts 中使用地图组件，并将上面的数据传入： ``` option = { series: [ { type: 'map', map: 'china', data: mapData, label: { show: true }, itemStyle: { normal: { borderColor: '#fff', borderWidth: 1, areaColor: '#ccc' // 默认地图区域的颜色 }, emphasis: { areaColor: '#ffcc00' // 地图区域被选中时的颜色 } } } ] }; ``` 在上面的代码中，通过设置 itemStyle.normal.areaColor 来控制地图区域的默认颜色，通过设置 itemStyle.emphasis.areaColor 来控制地图区域被选中时的颜色。同时，在地图数据中设置的 value 值也会影响地图区域的颜色，数值越大，颜色越深。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微澜-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值