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