Echarts. Add custom values (key-value pairs) to the histogram

x

["need"]

{"0":"Use Echarts to load a pie chart based on data"}

{"1":"Click which pie chart to pop up the detailed information of this pie chart"}

["Problems encountered"]

{"0": "Which pie chart is clicked, I need the information of this pie chart, such as ID, I need this parameter to request the detailed information of the pie chart"}

{"1":"Most of the Internet is how to click, the click event example on the official website is very good, and then I can't find how to add a custom value to this histogram"}

["It's time to copy a wave"]

["Official Website","Documentation","Configuration Item Manual",{"series":[{"type":[{"bar":"data"}]}]}]

/****************Official document on the ↑ line ****************/

x

"
 When individual data needs to be defined individually:

Array items can be used as objects, where the value is like a specific value, such as:
"

[
    12,
    34,
    {
        value : 56 ,
         // Custom label style, only valid for this data item 
        label: {},
         // Custom special itemStyle, only valid for this data item 
        itemStyle:{}
    },
    10
]
// or 
[
    [12, 33],
    [34, 313],
    {
        value: [56, 44],
        label: {},
        itemStyle:{}
    },
    [10, 33]
]

x

/****************Official document down ↓ line ****************/

 

["It's time to change data"]

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

var myChart = echarts.init(document.getElementById('main'));
option = {
    xAxis: A
        type: 'category',
        data: [ 'click to pop up', 'you set', 'value','!!!' ]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
　　　　　//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'data: [5, 20, 36, 10, 10, 20]//这是官网上的例子给的data格式...
        





    }]
};

// Display the chart using the configuration items and data just specified. 
myChart.setOption(option);
 // Process the click event and jump to the corresponding Baidu search page 
myChart.on('click', function (params) {
   console.log(params)
   alert(params.data.Name)
});

 

x