echarts根据Y轴设置背景色

k_头发疼 2018-01-17 10:11:42

求大神指点，如何根据Y轴的值（动态的）设置图上的背景色。

...全文

1716 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

咸哼酒家 2018-12-28

打赏
举报

回复

echarts2.0官方文档就有默认的灰白分割显示y行

匠造一知识 2018-12-28

打赏
举报

回复

有人回答？我也在搞着东西，我的背景色都出不来，用vue框架写的：有知道的大佬的？

快速配置出echarts；包括不显示 x y轴刻度； 背景色 按不同区域显示不同色；线段也按区域不同，显示不同色

echarts折线图曲线图分段用不同颜色显示，Y轴超过某一数值变色,echarts曲线改变颜色例子,x轴和y轴数据可以自己定义,曲线默认显示黑色(black)，400以上900以下显示成金色(gold)。核心代码 visualMap: { show: false, dimension: 1, pieces: [], //pieces的值由动态数据决定 outOfRange: { color: 'black' } //上面是按官方文档固定格式，主要是配置样式布局，实际的x轴和y轴数据可以通过ajax在后台取得 //x轴数据 var datax = ['1月', '2月', '3月', '4月', '5月','6月', '7月', '8月', '9月','10月']; //模拟动态数据 option.xAxis.data = datax; //y轴数据 var datay = [160, 280, 350, 500, 200, 250, 800, 600, 550, 200]; option.series[0].data = datay; //400以上,900以下显示成金色(gold) option.visualMap.pieces[0] = {gte: 400, lte: 900, color: 'gold'};

0基础入门Echarts，14节课学会数据可视化：Apache ECharts1. 课程包括Echarts基础知识：简介，快速入门，组件，样式，数据集-数据定义，数据集-数据转换，坐标轴，视觉映射，图例，事件与行为；同时也提供了实际图表展示：柱状图bar，折线图line，饼图pie，散点图scatter。2. 本系列课程采用理论与实践相结合的教学方式：既有理论知识的讲解，同时又带领大家一起实际VSCode上机编写代码实践，深入浅出的掌握Echarts可视化编程。3. 提供示例课件及源代码下载。4. 有兴趣的小伙伴~ 欢迎多多交流！

需求背景假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。根据此图，很容易想到可以用条形图试试。但后来发现，如果用堆叠条形图，则每种状态在每一个网口对应的图形中只能出现一次，这不能实现需求。于是继续查阅echart官网示例，终于在自定义类型图表中找到了一个相似的示例，地址通过研究示例代码并进行一番改造，终

echart 图表根据x轴或y轴的间隔区域设置区域不同的背景颜色如y轴0-5背景色设置成红色,5-20背景色设置成黄色,-20-0设置成绿色

81,094

社区成员

341,711

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章