堆叠柱状图ECharts Gallery

20:11:45图表已生成
代码
// 指定图表的配置项和数据
    var data1 = [20, 30,20, 30,20, 30,20, 30,20, 30];//小百分比
var data2 = [9, 30,9, 60,70, 20,59, 20,49, 20];//中百分比
var data4 = [100, 100,100,100, 100,100, 100,100,100, 100];//大百分比
var data5 = [20,24,20,24,20,24,20,24,20,24];//小完成数
var data6 = [9,18,9,18,9,18,9,18,9,18];//中完成数
var data7 = [100,80,100,80,100,80,100,80,100,80];//总数
var datacity =  ['巩义市', '兰考县', '汝州市', '滑县', '长垣县', '邓州市', '永城市', '固始县', '鹿邑县', '新蔡县'];
var option = {
  

   // backgroundColor: '#fff',
    color: ['#00c484', '#98d7d6'],
     tooltip: {
              trigger: 'axis', 
              formatter: function(datas) 
              {                
					    var res = datas[0].axisValue + '<br/>', val;
						var m=datas[0].dataIndex;
						 var  zongshu='黑名单和重点关注名单数'+ '：'+data7[m]+'<br/>';
                        val = '完成比例：'+(data1[m]+data2[m]) + '%'+ '<br/>';
						var chengnuo="信用承诺："+data5[m]+ '<br/>';//小完成数
						var chengnuobili="信用承诺占比："+data1[m]+ '%'+ '<br/>';//小比例
						var xiufu="培训或约谈："+data6[m]+ '<br/>';//中
						var xiufubili="培训或约谈：占比："+data2[m]+ '%'+ '<br/>';//中比例
						res+=zongshu+val+chengnuo+chengnuobili+xiufu+xiufubili;                						
                   
			
                    return res;
               }
          },
    legend: {
      
        top: '8%',
        data: ['信用承诺', '培训或约谈'],
		right: '10%'
    },
    grid: { //图表的位置
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    },
    yAxis: [
        {
           type: 'value',
          	axisLabel: {
                  show: true,
                  interval: 'auto',
                  formatter: '{value} %'
                },
            show: true

    }],
    xAxis: [{
        type: 'category',
		  axisLabel:  {
                interval: 0,
                rotate:-50,//x轴数据倾斜的角度-90-90
                show: true,
                splitNumber: 15,

                textStyle: {
                    //fontFamily: "微软雅黑",
                    fontSize: 10,
					  color: function(params) {
						  var dataIndex=0;
						  for(var j=0;j<datacity.length;j++){
						  if(params==datacity[j]){
							  dataIndex=j;
						  }
						  }
						
						var data11=data1[dataIndex];
						var data22=data2[dataIndex];
						var hege=(data11+data22);

                                    if(hege>=50){
                                        return '#3399fe';
                                    }else {
                                        return '#ffcc00';
                                    }

                    },
                },

            },
        data: datacity,
    }],
    series: [
     
        
        {
            name: '信用承诺',
            type: 'bar',
            stack: 'sum',
            barWidth: '20px',
            data: data1

        },
        {
            name: '培训或约谈',
            type: 'bar',
            barWidth: '20px',
            stack: 'sum',
            data: data2,
			 markLine : {
                data : [
                    {
                     name: 'Y 轴值为 50 的水平线',
                     yAxis: 50
    },
                ],
				
				  itemStyle : { 
                    normal: { 
                        borderWidth:1, 
                        lineStyle: { 
                            type: 'dashed', 
                            color:'#ffcc00', 
                            width:2 
                        },
						label:{ formatter:'50%'}
						
                    } 
                   
                }, 
            }

        },
          

    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
