Echarts . 在柱状图中添加自定义值 (键值对)

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


__EOF__

本文作者国产凌凌漆
本文链接https://www.cnblogs.com/love-zf/p/8934303.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   zh89233  阅读(16195)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示