function loadOption3Data(a,b){
// 门店排名
var option3 = {
title:[
{text:"xx排名",x: '5%', y: '0%',textStyle:{color:"#efefef",fontSize:"16"}},
],
tooltip : {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
"type": "shadow" // 默认为直线,可选为:"line" | "shadow"
}
},
calculable : true,
grid: {
left: '0',
right: '4%',
top: '12%',
height: 230, //设置grid高度
containLabel: true
},
xAxis : [
{
type : 'category',
data : a,
position: 'top',
splitLine: {
show: false
},
max: 4,
axisLine: {
show: false
},
axisTick:{
show: false
},
axisLabel:{
"show": true,
interval: 1,
textStyle: {color:'#fff'}
}
}
],
yAxis : [
{
inverse: true,
type : 'value',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick:{
show: false
},
axisLabel:{
/*textStyle:{
color:'#f00'
}*/
"show": false
}
}
],
series : [
{
name:'GMV',
type:'bar',
data:b,
itemStyle: {
normal: {
color: function(params3) {
// build a color map as your need.
var colorList3 = [
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
];
return colorList3[params3.dataIndex];
},
barWidth : 30,//柱图宽度
barMaxWidth:30,//最大宽度
barGap: 13,
barCategoryGap: 13,
barBorderRadius: [10, 10, 10, 10],
label: {
show: true,
position: 'bottom',
formatter: '{c}',
/*rotate:45,//倾斜度 -90 至 90 默认为0
textStyle:{
color:"#fff"
}*/
}
}
}
}
]
};
myChart3.clear();
myChart3.setOption(option3,true);
}
myChart3.on('click', function (param){
//var store_id=34;
var store_id = cityData_c_03[param.dataIndex];//可以定义数组放入查询到的id
var pId = provinceId;
var cId = cityData_e_03[param.dataIndex];
var cName = cityData_d_03[param.dataIndex];
var flag = "1";//标记是从门店跳入
var url = "aaa.html?p="+pId+"&c="+cId+"&s="+store_id+"&cn="+cName+"&f="+flag;
//window.open("aaa.html?s="+store_id+"&p=1&c=2","_self");
window.location.href=url;
});
数组封装的代码:
var dailyData_gmv = JSON.parse(resultJson2.gmv);
for(var i=0;i<dailyData_gmv.length;i++){
cityData_a_03.push(dailyData_gmv[i].store_name);
cityData_b_03.push(parseInt(dailyData_gmv[i].store_pesgmv));
cityData_c_03.push(dailyData_gmv[i].store_id);
cityData_d_03.push(dailyData_gmv[i].city_name);
cityData_e_03.push(dailyData_gmv[i].city_id);
}
ehcharts柱状图,含优化后粗细,带点击事件
最新推荐文章于 2024-07-30 00:26:52 发布