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" ></div>
var myChart = echarts.ElementById('main'));
option = {
xAxis: {
type: 'category',
data: ['点击弹出', '你设置', '的值','']
},
yAxis: {
type: 'value'
},
series: [{
setoption //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);
// 处理点击事件并且跳转到相应的百度搜索页⾯
<('click', function (params) {
console.log(params)
alert(params.data.Name)
});
x
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论