
正文
Echarts . 在柱状图中添加自定义值 (键值对)
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
x
["需求"]{"0":"使用Echarts根据数据加载一个饼状图"}
{"1":"点击哪个饼状图,弹出此饼状图的详细信息"}
["遇到的问题"]{"0":"点击哪个饼状图,我需要这个饼状图的信息,比如ID,我需要这个参数去请求该饼状图的详细信息"}
{"1":"网上大多是如何click,官网上的click事件例子就挺好的,然后没有找到如何在这个柱状图上加自定义的值"}
["是时候拷贝一波了"]["官网","文档","配置项手册",{"series":[{"type":[{"bar":"data"}]}]}]
{"0":"使用Echarts根据数据加载一个饼状图"}
{"1":"点击哪个饼状图,弹出此饼状图的详细信息"}
{"0":"点击哪个饼状图,我需要这个饼状图的信息,比如ID,我需要这个参数去请求该饼状图的详细信息"}
{"1":"网上大多是如何click,官网上的click事件例子就挺好的,然后没有找到如何在这个柱状图上加自定义的值"}
["是时候拷贝一波了"]["官网","文档","配置项手册",{"series":[{"type":[{"bar":"data"}]}]}]
["官网","文档","配置项手册",{"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)
});
<!-- 为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






