ehcharts柱状图,含优化后粗细,带点击事件



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);
				}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值