x

["需求"]

{"0":"使用Echarts根据数据加载一个饼状图"} 
{"1":"点击哪个饼状图,弹出此饼状图的详细信息"} 

["遇到的问题"]

{"0":"点击哪个饼状图,我需要这个饼状图的信息,比如ID,我需要这个参数去请求该饼状图的详细信息"}
{"1":"网上大多是如何click,官网上的click事件例子就挺好的,然后没有找到如何在这个柱状图上加自定义的值"}

["是时候拷贝一波了"]

["官网","文档","配置项手册",{"series":[{"type":[{"bar":"data"}]}]}]

/**************官方文档上↑线****************/

x

"
当需要对个别数据进行个性化定义时: 数组项可用对象,其中的 value 像表示具体的数值,如:
"
[
12,
34,
{
value : 56,
//自定义标签样式,仅对该数据项有效
label: {},
//自定义特殊 itemStyle,仅对该数据项有效
itemStyle:{}
},
10
]
// 或
[
[12, 33],
[34, 313],
{
value: [56, 44],
label: {},
itemStyle:{}
},
[10, 33]
]

x

/**************官方文档下↓线****************/

["是时候改变data了"]

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>


var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
data: ['点击弹出', '你设置', '的值','!!!']
},
yAxis: {
type: 'value'
},
series: [{
    //data: [5, 20, 36, 10, 10, 20]//这是官网上的例子给的data格式...
data: [
          {value:10,"ID":"0","Name":"ID0Name","YouDefinedKey":"YouNeedValu"},
          {value:22,"ID":"0","Name":"ID0Name"},
          {value:12,"ID":"0","Name":"ID0Name"},
          {value:10,"ID":"0","Name":"ID0Name"}
        ],
type: 'bar'
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
console.log(params)
alert(params.data.Name)
});

x

Echarts . 在柱状图中添加自定义值 (键值对)的更多相关文章

  1. Android : 输入设备键值从底层到应用层的映射流程

    一.Android输入子系统简介: Android输入事件的源头是位于/dev/input/下的设备节点,而输入系统的终点是由WMS管理的某个窗口.最初的输入事件为内核生成的原始事件,而最终交付给窗口 ...

  2. android 获取Asset中Properties文件配置的键值对

    1 获取 AssetManager AssetManager assetManager = context.getApplicationContext().getAssets(); 2 获取流 Str ...

  3. python开发_dbm_键值对存储_完整_博主推荐

    ''' 在python的应用程序中,不需要关系型数据库时,如MySQL 可以使用python提供的持久字典dbm来存储名称和值(键值对) 这个类似于java的中的java.util.Map对象. 区别 ...

  4. Entry键值对对象和Map集合遍历键值对方式

    我们已经知道,Map中存放的是两种对象,一种称为key(键),一种称为value(值),它们在在IMap 中是一一对应关系, 这一对对象又称做Map 中的一个Entry(项).Entry将键值对的对应 ...

  5. Android下添加新的自定义键值和按键处理流程

            Android下添加新的自定义键值和按键处理流程     说出来不怕大家笑话,我写这篇博客的原因在于前几天去一个小公司面试Android系统工程师,然后在面试的时候对方的技术总监问了我 ...

  6. Zabbix的自定义键值和自动发现功能监控Oracle数据库的表空间

    前面介绍了利用Orabbix监控了,参考zabbix通过Orabbix监控oracle数据库,这里我们原先的模板中进行了修改,使用自动发现功能实现监控tablespace的使用情况. 1. 在被监控的 ...

  7. ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  8. android 添加新的键值,自定义按键-2【转】

    本文转载自:http://blog.csdn.net/mr_raptor/article/details/8053871 在Android中,上层可使用的键值默认情况下是92个,从0-91:一般情况下 ...

  9. android 添加新的键值,自定义按键【转】

    本文转载自:http://blog.csdn.net/mr_raptor/article/details/8053871 在Android中,上层可使用的键值默认情况下是92个,从0-91:一般情况下 ...

随机推荐

  1. 在windows命令行批量ping局域网内IP

    参考了博客园Alfred Zhao的文章<Windows平台ping测试局域网所有在用IP> 在cmd命令行运行如下命令即可: ,,) -w .%i | find "回复&quo ...

  2. mysql触发器详解 mysql触发器

    目录 21.1. CREATE TRIGGER语法 21.2. DROP TRIGGER语法 21.3. 使用触发程序 MySQL 5.1包含对触发程序的支持.触发程序是与表有关的命名数据库对象,当表 ...

  3. 微信小程序--data的赋值与取值

    通过小程序官方文档可知:Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等.其中的参数data用来设置初始数据,WXML 中的动态数据 ...

  4. 【GMT43智能液晶模块】例程十一:通用定时器实验——定时点亮LED

    实验原理: 通过STM32的一个GPIO口来驱动LED灯,设定GPIO为推挽输出模式,采用灌电流的方式与LED连接, 输出高电平LED灭,输出低电平LED亮,通过通用定时器TIM3实现500ms定时, ...

  5. Linux下printf、fprintf、sprintf的区别

    (1)fprintf() int fprintf( FILE *stream, const char *format, ... );   用于文件操作,根据指定的format(格式)发送信息(参数)到 ...

  6. Java代码实现文件添加数字签名、验证数字签名

    Linux下实现加签.验签 1.使用OpenSSL 生成公钥和密钥: #用 OpenSSL, Linux 上自带,常用命令如下: #生成 RSA 私钥(传统格式的) openssl genrsa -o ...

  7. Java代码中解压RAR文件

    import java.io.File; import java.io.FileOutputStream; import de.innosystec.unrar.Archive; import de. ...

  8. 解决使用微软模拟器VS Emulator for Android在VS2017 Xamarin开发中不能调试程序的问题。

    在使用VS2017 XAMARIN调试Android应用程序时,屏幕闪一下,进入不了调试(使用谷歌的模拟器可以调试,但是太慢), 我们现在来解决一下这个问题. 第一步:打开Hyper-V管理器 第二步 ...

  9. ubuntu源码安装jdk8

    最近学习java,想起来没有在Ubuntu上使用过 因此想安装下环境,并在Ubuntu上试用MPXJ读取mpp文件 1.安装 下载jdk8 https://www.oracle.com/technet ...

  10. mvc 控制器忽略某些方法

    需求:登录信息验证,需要忽略登录注册这些接口的验证,通过给方法加忽略过滤器实现 1.需要忽略的方法加[IgnoreLoginFilter] 2.定义忽略过滤器 public class IgnoreL ...