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