echarts图形根据条件设置颜色显示问题

Web 开发 > HTML(CSS)
收藏 回复
[问题点数：50分]
更多帖子
私信 空间 博客
々HuoYan  CraZy
等级
本版专家分：0
结帖率 0%
有一组目标数据，和一组实际数据，共两组数据，要一一对应比较大小，如果目标值大小实际值则显示绿色，怎么才能实现呢
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
囧
等级
本版专家分：38326
勋章
Blank
银牌 2019年4月 总版技术专家分月排行榜第二
Blank
红花 2019年4月 Web 开发大版内专家分月排行榜第一
Blank
黄花 2019年8月 Web 开发大版内专家分月排行榜第二
2018年11月 Web 开发大版内专家分月排行榜第二
Blank
蓝花 2019年7月 Web 开发大版内专家分月排行榜第三
2019年5月 Web 开发大版内专家分月排行榜第三
2019年3月 Web 开发大版内专家分月排行榜第三 


<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>_</title>

	<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.js"></script>

</head>

<body>

<div id="chart" style="width:800px; height:480px"></div>

<script type="text/javascript">

	var chart = echarts.init(document.getElementById("chart"));

	var target = [120, 120, 120, 120, 120, 120, 120];

	var data = [120, 200, 150, 80, 70, 110, 130];

	for(var i = 0; i < data.length; i++){

		data[i] = {

			value: data[i],

			itemStyle:{

				color: data[i] >= target[i] ? '#0a0' : '#c00'

			}

		}

	}

	var option = {

		xAxis: {

			type: 'category',

			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

		},

		yAxis: {

			type: 'value'

		},

		series: [{

			data: data,

			type: 'bar'

		}]

	};



	chart.setOption(option);

</script>

</body>

</html>
只看TA 引用 举报 #1得分 0
更多帖子
私信 空间 博客
々HuoYan  CraZy
等级
本版专家分：0
感谢老哥了，如果可以的话用color:function实现下，向你学习。
只看TA 引用 举报 #2得分 0
更多帖子
私信 空间 博客
々HuoYan  CraZy
等级
本版专家分：0
引用 1 楼 囧的回复:


<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>_</title>

	<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.js"></script>

</head>

<body>

<div id="chart" style="width:800px; height:480px"></div>

<script type="text/javascript">

	var chart = echarts.init(document.getElementById("chart"));

	var target = [120, 120, 120, 120, 120, 120, 120];

	var data = [120, 200, 150, 80, 70, 110, 130];

	for(var i = 0; i < data.length; i++){

		data[i] = {

			value: data[i],

			itemStyle:{

				color: data[i] >= target[i] ? '#0a0' : '#c00'

			}

		}

	}

	var option = {

		xAxis: {

			type: 'category',

			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

		},

		yAxis: {

			type: 'value'

		},

		series: [{

			data: data,

			type: 'bar'

		}]

	};



	chart.setOption(option);

</script>

</body>

</html>

感谢老哥了，如果可以的话用color:function实现下，向你学习。
只看TA 引用 举报 #3得分 0
更多帖子
私信 空间 博客
囧
等级
本版专家分：38326
勋章
Blank
银牌 2019年4月 总版技术专家分月排行榜第二
Blank
红花 2019年4月 Web 开发大版内专家分月排行榜第一
Blank
黄花 2019年8月 Web 开发大版内专家分月排行榜第二
2018年11月 Web 开发大版内专家分月排行榜第二
Blank
蓝花 2019年7月 Web 开发大版内专家分月排行榜第三
2019年5月 Web 开发大版内专家分月排行榜第三
2019年3月 Web 开发大版内专家分月排行榜第三
color不支技function
只看TA 引用 举报 #4得分 0
更多帖子
私信 空间 博客
々HuoYan  CraZy
等级
本版专家分：0
引用 4 楼 囧的回复:
color不支技function

我写了一段可以实现，但我不懂数组之后怎么去比较大小

itemStyle:{
//  color:function(d){
//  if(d.data.value>10000){
//  return 'red'
//  }else{
//  return 'green'
//  }
//  console.log(d)
//  }
//  }
只看TA 引用 举报 #5得分 0
私信 空间 博客
、、
等级
本版专家分：140
直接在里边比就行了
只看TA 引用 举报 #6得分 0
更多帖子
私信 空间 博客
々HuoYan  CraZy
等级
本版专家分：0
好的谢谢，终于理解了
只看TA 引用 举报 #7得分 0
更多帖子
私信 空间 博客
囧
等级
本版专家分：38326
勋章
Blank
银牌 2019年4月 总版技术专家分月排行榜第二
Blank
红花 2019年4月 Web 开发大版内专家分月排行榜第一
Blank
黄花 2019年8月 Web 开发大版内专家分月排行榜第二
2018年11月 Web 开发大版内专家分月排行榜第二
Blank
蓝花 2019年7月 Web 开发大版内专家分月排行榜第三
2019年5月 Web 开发大版内专家分月排行榜第三
2019年3月 Web 开发大版内专家分月排行榜第三
  我用function怎么出不来
只看TA 引用 举报 #8得分 0
私信 空间 博客
小小陈陈陈
等级
本版专家分：0
勋章
Blank
签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
地图图例颜色不支持function   那怎么根据参数改颜色？
只看TA 引用 举报 #9得分 0
私信 空间 博客
修补披风的人
等级
本版专家分：0
这函数里的形参 params 没定义，怎么找到它？我这样写也没效果
只看TA 引用 举报 #10得分 0
收起
收藏 回复
々HuoYan  CraZy

等级：

关注 私信 TA的帖子
A星算法详解(个人认为最详细,最通俗易懂的一个版本)

A* 寻路算法 原文地址： http://www.gamedev.net/reference/articles/article2003.asp 概述 虽然掌握了 A* 算法的人认为它容易，但是对于初学者来说， A* 算法还是很复杂的。 搜索区域(The Search Area) ...

经典A* 算法解析

会者不难，A*(念作A星)算法对初学者来说的确有些难度。 这篇文章并不试图对这个话题作权威的陈述。取而代之的是，它只是描述算法的原理，使你可以在进一步的阅读中理解其他相关的资料。 最后，这篇文章没有程序细节...

堪称最好最全的A*算法详解（译文）

英文原文链接：http://theory.stanford.edu/~amitp/GameProgramming/  英文原文参考：http://www-cs-students.stanford.edu/%7Eamitp/gameprog.html#Paths  翻译参考链接：...

A*算法详解（个人认为最透彻的一个）

A* 寻路算法 原文地址： http://www.gamedev.net/reference/articles/article2003.asp 概述 虽然掌握了 A* 算法的人认为它容易，但是对于初学者来说， A* 算法还是很复杂的。 搜索区域...

A*算法详解（讲的一级棒 ）

虽然掌握了 A* 算法的人认为它容易，但是对于初学者来说， A* 算法还是很复杂的。 搜索区域(The Search Area) 我们假设某人要从 A 点移动到 B 点，但是这两点之间被一堵墙隔开。如图 1 ，绿色是 A ，红色是 B ，...

A-star 算法原理分析

搜索算法 图论中，应用最广泛的就是搜索算法了，比如，深度优先搜索、广度优先搜索等。在介绍 Dijkstra 算法那篇中，除了深度优先、广度优先这种暴力搜索算法，还有一些最短路算法也可以求得最短路径，并且效率比...

A*算法计算步骤总结

A*算法计算步骤总结 1，从点A开始，并且把它作为待处理点存入一个“开启列表”。开启列表就像一张购物清单。尽管现在列表里只有一个元素，但以后就会多起来。你的路径可能会通过它包含的方格，也可能不会。基本上，...

路径规划算法：A*

A*算法是启发式搜索，是一种尽可能基于现有信息的搜索策略，也就是说搜索过程中尽量利用目前已知的诸如迭代步数，以及从初始状态和当前状态到目标状态估计所需的费用等信息。 A*算法可以选择下一个被检查的节点时...

A*算法

A*算法常用于二维地图路径规划,算法所采用的启发式搜索可以利用实际问题所具备的启发式信息来指导搜索,从而减少搜索范围,控制搜索规模,降低实际问题的复杂度 。 二、算法原理 A*算法的原理是设计一个代价估计函数:...

A*算法理解（unity C#）

这里只谈A*算法的实现，不谈A算法的优化* 这里的工程是unity版本的，当然理解A*算法是通用的 这里先放上A*算法的unity工程(unity2017.3.1) Github工程 0X01 A*算法基本概念 启发式搜索： 启发式搜索就是在...

A*算法原理概述

这里是目录路径规划A*算法原理路线规划理论概述Dijkstra算法最佳优先搜索算法A*算法理论概述 路径规划A*算法原理 路线规划理论概述 移动一个物体直观上很容易的，但是物品的路线规划是复杂的。如下图3-1所示，物体...

A*算法的C#实现

 本文的主要内容是讲述A *寻路算法的基本原理，实现步骤以及对应的C＃代码，适合读者用于学习A *算法或 使用此代码提供的接口完成游戏中的寻路功能。  详细的A *算法的原理，请参照：https://blog.csdn.net/d...

A*算法与matlab实现

A*算法是一种寻路算法，常常被用在游戏智能ai的自动寻路过程等等，它较之于图论的最短路算法而言，更加适用于节点巨大的情况下，但是该算法是一种启发式搜索算法，并不能保证总是找到最优路径。 A*的算法思想如下：...

改进A*算法

最短路径搜索问题是智能交通技术应用中的一个关键问题,而A*算法是一种静态路网中求解最短路径最有效的直接搜索方法.传统的A*算法未考虑到实际路网中交通灯的影响,求得的最短路径并不一定是行程时间最短.但是路径选取...

A*算法：Dijkstra改进算法

A*算法：Dijkstra改进算法A算法Dijkstra改进算法 寻路模型 A算法 算法简介 算法步骤 格点模型 格点模型分析 改进思路方向 导航网络算法步骤及其优缺点 A算法启发函数的选取 伪代码 参考外链寻路模型最优路规划问题...

A*算法和dijkstra算法

A*算法和dijkstra算法都是启发式搜索，dijkstra算法可以看成是广度优先搜索，而A*可以认为是深度优先搜索。 A*可以轻松地用在比如无人机航路规划中，而dijkstra建立在较为抽象的图论层面。 A*算法主要是有两张表，...

A*算法 和 IDA*算法

A*算法概述：  采用广度优先搜索策略，在搜索过程中使用启发函数，即有大致方向的向前进虽然目标有时候不是很明确。 A*算法核心：  A*算法的关键在于启发函数，启发函数的优劣直接影响A*算法的效率。  f(n)=g(n)+...

【算法】A*算法与启发函数

写这篇是因为看到国外一篇讲的巨好的关于A*算法的文章——Introduction to A*。图文并茂，而且讲了一些A*算法的来龙去脉，有些观点也醍醐灌顶啊，所以赶紧来总结一下。 A*算法为什么叫这个名这个从wiki上看来的，一...

A*算法简介

A*算法简介  写这篇文章的初衷是应一个网友的要求，当然我也发现现在有关人工智能的中文站点实在太少，我在这里 抛砖引玉，希望大家都来热心的参与。   还是说正题，我先拿A*算法开刀，是因为A*在游戏中有它很...

导航路径规划之五 A*算法

A*算法是启发式搜索，是一种尽可能基于现有信息的搜索策略，也就是说搜索过程中尽量利用目前已知的诸如迭代步数，以及从初始状态和当前状态到目标状态估计所需的费用等信息。 A*算法可以选择下一个被检查的节点时...

A*，Dijkstra，BFS算法性能比较及A*算法的应用

一之续、A*，Dijkstra，双向BFS算法性能比较及A*算法的应用 作者:July 二零一一年三月十日。 出处：http://blog.csdn.net/v_JULY_v --------------------------------------------------  引言：  ...

A*算法-路径规划

照着A*算法的原理自己用代码实现了下，虽然基本的功能都实现了，不过在实际运用上还有很多可以改善的地方，趁着刚学会A*算法整理下自己的思路。借用热心分享知识的网友图片大致讲解下A*算法的实现过程。 其中绿色...

A*算法与启发函数

A*算法为什么叫这个名这个从... Hart改进成为A*算法，为什么叫A*呢，因为原作者借鉴了统计学方面的一个*上标，在统计学中，一个变量加上 * 表示这个变量的最优解，所以作者认为他们是最优解，是前人（A算法）的集大...

无人驾驶汽车系统入门（十六）——最短路径搜索之A*算法

无人驾驶汽车系统入门（十六）——最短路径搜索之A*算法 路线规划中一个很核心的问题即最短路径的搜索，说到最短路径的搜索我们就不得不提A*算法，虽然原始的A*算法属于离散路径搜索算法（我们的世界是连续的），...

Dijkstra算法和A*算法的比较

Dijkstra算法和A*算法的比较   Dijkstra算法和A*算法都是最短路径问题的常用算法，下面就对这两种算法的特点进行一下比较。 1.Dijkstra算法计算源点到其他所有点的最短路径长度，A*关注点到点的最短路径...

堪称最好的A*算法

如此好贴，不能不转！原文地址：...如果侵害到您的权益，请联系我，我将删除本文。基本上，这文章可以说是最佳A*算法文档。极力推荐！Amits A star Page中译文 译序这篇文章很适合A*算法的初学者，

A算法与A*算法区别

A*算法 A算法

python寻路算法：A* 算法实现

python寻路算法：A* 算法实现A* 算法简介关键代码介绍保存基本信息的地图类搜索到的节点类算法主函数介绍代码的初始化完整代码 A* 算法简介 A* 算法需要维护两个数据结构：OPEN 集和 CLOSED 集。OPEN 集包含所有已...

A*算法 JAVA实现

A算法是一种启发式寻路算法，本文是在参考博文的基础上了解A*算法思想之后，使用java实现的，做个记录。* 注：这个实现支持斜着走， 如果要实现不支持走沿对角的斜线，可以在此实现的基础上稍作修改即可实现。JAVA...

Java编程实现A*算法完整代码

这篇文章主要介绍了Java编程实现A*算法完整代码，简单介绍了A*算法，然后分享了完整测试代码，具有一定借鉴价值，需要的朋友可以参考下。 前言 A*搜寻算法俗称A星算法。这是一种在图形平面上，有多个节点的路径，...

相关热词 c# sql 查询行数 c#创建快捷方式 c# ref关键字 c# 上层目录 c#实现ftp断点续传 c#类已添加到项目 c# rtf 写 c# 打印图片 高质量 c# poco运用 c#滚动条