序号 企业名称 增减幅 排名变化

描述:当前是关于Echarts图表中的 示例。
 
            /**
   echartsesen :第三方对象  当json里面需要用到时可以使用
   myChart:当前统计图对象,可以用来绑定事件使用 
   datajson:系统生成第三方json,可以在此基础上修改格式,也可以生成全新的,只需要最后用return 返回新格式
*/

var data1 =["江西赣江新区绿地申赣置业有限公司", "南昌欧菲光电技术有限公司", "格特拉克(江西)传动系统有限公司", "南昌亿辰家和文化传媒有限公司", "南昌海立电器有限公司", "南昌兴彰置业有限公司", "南昌临空经济区管理委员会", "南昌市奥克斯电气制造有限公司", "江西晨鸣纸业有限责任公司", "江西润田实业股份有限公司", "江西普盛实业有限公司", "南昌欧菲光学技术有限公司", "南昌欧菲光显示技术有限公司", "发达控股集团有限公司", "江西中烟工业有限责任公司", "南昌金坚房地产开发有限公司", "南昌恒强置业有限公司", "南昌中海豪轩地产有限公司", "南昌欧菲光科技有限公司", "江西腾昌建筑工程有限公司", "南昌临空置业投资有限公司", "南昌辰林房地产有限公司", "江西金资供应链金融服务有限公司", "江西瑞祥置业有限公司", "江西洪城给排水环保设备技术有限责任公司", "南昌中海豪锦地产有限公司", "南昌经济技术开发区管理委员会", "江西坤佳实业有限公司", "江西东帆房地产开发有限公司", "南昌同兴达智能显示有限公司"];//名称
var value2 =["91361200MA3698X76A", "9136010805443033XU", "913600007928030385", "91360108MA3936G053", "913601086697506551", "91360100MA397JJT9P", "123601003146753342", "91360100754215569P", "91360100744264607E", "91360000310571167G", "913601006937238330", "91360108063489632W", "91360108063489595N", "913600001582870640", "91360000767016649W", "91360108MA38KGXK65", "91360108MA35PET144", "91360108MA382EA37R", "913601085638140676", "91360108MA35NA86XU", "91360126309186579G", "91360108MA35J30W0R", "91361200MA37PLRR5Q", "913601000544114700", "91360108556000751H", "91360108MA35PJ072D", "360107000000000gwh", "91360108598864144C", "91360108MA398A7M6C", "91360108MA368YA75L"] ;//代码
var value1 = [20723.65, 11161.49, 10923.37, 10328.45, 10116.32, 9216.65, 8844.86, 7743.13, 7299.48, 7257.21, 6282.13, 5974.26, 5611.31, 5245.36, 5002.49, 4951.72, 4845.77, 4213.3, 4128.95, 4064.44, 3860.57, 3688.23, 3625.72, 3117.74, 3069.54, 3011.18, 2929.57, 2888.22, 2712.35, 2414.09] ;//累计入库
var value3 = [9.37, 6.85, -48.71, 100, 42.31, 100, -2.15, 28.6, -27.31, 117.72, -54.12, 250.1, 554.33, 335.11, 100, 7.45, -58.86, -21.38, 41.03, 24.78, 8.55, -37.36, 154.32, -49.1, 92.66, -85.08, -75, -61.27, 100, 11940.35];//累计增幅
var value4 = ["2", "5", "-2", "999999999", "9", "999999999", "2", "8", "-1", "16", "-7", "40", "89", "62", "999999999", "4", "-12", "0", "12", "7", "3", "-5", "42", "-9", "30", "-24", "-21", "-17", "999999999", "857"];//排名变化
var value5 = ["房地产业", "制造业", "制造业", "租赁和商务服务业", "制造业", "房地产业", "公共管理、社会保障和社会组织", "制造业", "制造业", "制造业", "批发和零售业", "制造业", "制造业", "建筑业", "制造业", "房地产业", "房地产业", "房地产业", "信息传输、软件和信息技术服务业", "建筑业", "租赁和商务服务业", "房地产业", "金融业", "房地产业", "居民服务、修理和其他服务业", "房地产业", "公共管理、社会保障和社会组织", "房地产业", "房地产业", "制造业"];//行业大类
var value6 = 185251;//纳税累计
var value7 = 39.31;//纳税占比

// var data1 =JSON.parse( '<#=GRID54.B3$#>') ;//名称
// var value2 = JSON.parse('<#=GRID54.A3$#>') ;//代码
// var value1 = JSON.parse('<#=GRID54.C3$#>');//累计入库

// var value3 = JSON.parse('<#=GRID54.E3$#>');//累计增幅
// var value4 = JSON.parse('<#=GRID54.M3$#>');//排名变化
// var value5 = JSON.parse('<#=GRID54.N3$#>');//行业大类
// var value6 = '<#=GRID54.C2#>';//纳税累计
// var value7 = '<#=GRID54.E2#>';//纳税占比
var spirit = "image:///asset/get/s/data-1605427519399-b7-DopOXh.png";

console.log(data1);
console.log(value2);
console.log(value1);
console.log(value3);
console.log(value4);
console.log(value5);
console.log(value6);
console.log(value7);



 function format(num) {
     return (num + '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, '$1,');
 }

//console.log(value1)
var index = 0;
var colorList = ['#f36c6c', '#e6cf4e', '#20d180', '#0093ff'];
var option = { 
   backgroundColor:'#000',
   title: {       
			text: '序号\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t企业名称\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t增减幅\t\t\t\t\t\t\t\t\t\t\t\t排名变化',
			//subtext:'序号',
        show:true,
		textStyle: {
			color: '#ffffff',
			fontWeight: 'bolder',
			fontSize: 22
		},
       	subtextStyle: {
			color: '#ffffff',
			fontWeight: 'bolder',
			fontSize: 18
		},
		top: '30px',
		left: 'left'
	},
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
           show: true,
           textStyle:{
             fontFamily: '微软雅黑',
             fontSize: 22,
             color: '#ffffff'
             
             },
             formatter:function(params) {
                 console.log(params);
             return '重点税源大户纳税累计'+format(value6)+'万元,占总税收'+value7+'%';
             }
        
    },
    grid: {
        left: 750,
        right:100,
        top:'5%'
    },
    xAxis: {
        type: 'value',

        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        }

    },
    yAxis: {
        type: 'category',
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisPointer: {
            label: {
                show: true,
                margin: 30
            }
        },
        data: data1,
        axisLabel: {
            margin: 750,
            fontSize: 16,
            align: 'left',
            color: '#6c778e',
            rich: {
                a1: {
                    color: '#fff',
                    backgroundColor: colorList[0],
                    fontSize: 24,
                    width: 30,
                    height: 30,
                    align: 'center',
                    borderRadius: 2
                },
                a2: {
                    color: '#fff',
                    backgroundColor: colorList[1],
                    fontSize: 24,
                    width: 30,
                    height: 30,
                    align: 'center',
                    borderRadius: 2
                },
                a3: {
                    color: '#fff',
                    backgroundColor: colorList[2],
                    fontSize: 24,
                    width: 30,
                    height: 30,
                    align: 'center',
                    borderRadius: 2
                },
                b: {
                    color: '#fff',
               //     backgroundColor: colorList[3],
                    fontSize: 24,
                    width: 30,
                    height: 30,
                    align: 'center',
                    borderRadius: 2
                },
                 c: {
                    color: '#f1f43a',
                    backgroundColor: colorList[3],
                    fontSize: 20,
                    width: 30,
                    height: 30,
                    align: 'center',
                    borderRadius: 25
                },
                value: {
                     color: "#ffd700",
                     fontSize: 24,
                     align: 'right',
                     verticalAlign: 'middle',
                     padding: 4,
                     width: 120
                 },
                 percent: {
                     color: "#ED8600",
                     fontSize: 24,
                     align: 'right',
                     verticalAlign: 'middle',
                     padding: 4,
                     width: 100
                 },
                 percent_red: {
                     color: "#ff4546",
                     fontSize: 24,
                     align: 'right',
                     verticalAlign: 'middle',
                     padding: 4,
                     width: 120
                 },
                 percent_green: {
                     color: "#13ae67",
                     fontSize: 24,
                     align: 'right',
                     verticalAlign: 'middle',
                     padding: 4,
                     width: 120
                 },  
                percent_red1: {
                     color: "#ff4546",
                     fontSize: 24,
                     align: 'right',
                     verticalAlign: 'middle',
                     padding: 4,
                     width: 100
                 },
                 percent_green1: {
                     color: "#13ae67",
                     fontSize: 24,
                     align: 'right',
                     verticalAlign: 'middle',
                     padding: 4,
                     width: 100
                 },  
                text: {
                     color: "#fff",
                     fontSize: 16,
                     align: 'left',
                     //verticalAlign: 'middle',
                     padding: 4,
              //       width: 400
                 },
                 textnew: {
                     color: "#fff",
                     fontSize: 16,
                     align: 'left',
                     //verticalAlign: 'middle',
                  
                     padding: 4,
                  //   width: 400
                 },
              newqy: {
                  backgroundColor:{
                   //   image:'vfs/root/products/ebi/sys/picture/经开区智慧财政/组织收入/新.png'
                      image:'/asset/get/s/data-1605427519399-b7-DopOXh.png'
                      
                   },
                     padding: 4,
                     width: 24
                 },
            },
            formatter: function(params) {
                if (index == 30) {
                    index = 0;
                }
                index++;
                var qymc,zf,pm,hy;
                hy='    {c|'+value5[index-1].substring(0,1)+'}';
                if(value3[index-1]>0){
                    if(value4[index-1]=='999999999'){
                     zf = '';
                    }else{
                       zf = '\t{percent_red|' +format(value3[index-1])+'%}'; 
                    }
                    
                }else{
                       zf = '\t{percent_green|' +format(value3[index-1])+'%}';
                }                
                if(value4[index-1]=='999999999'){
                      pm ='';  
                }else if(value4[index-1]>0){
                      pm = '\t{percent_red1|' +value4[index-1]+'▲}';
                }
                 else{
                      pm = '\t{percent_green1|' +value4[index-1]+'▼}';
                } 
                
                  if(value4[index-1]=='999999999'){
                     qymc = '\t{text|'+'测试123'+'}{newqy|}' ;
                  }
                else{
                    qymc = '\t{text|'+'测试单位'.padEnd(22 ,' ')+'}' ;//特殊手段强行设置长度,为了对齐
                   //  qymc = '{text|'+params+'}' ;
                }
                
                if (index - 1 < 3) {
                     return [   '{a' + index + '|' + index + '}' +hy  +qymc  + zf+pm               ].join('\n');                 
                } else {
                      return [   '{b|' + index + '}'+hy  +qymc+ zf+pm               ].join('\n');                  
                }
            }
        }
    },
    series: [{
            z: 2,
            name: '累计纳税',
           //  type: 'bar',
            type: 'pictorialBar',
        symbol: spirit,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbolClip: true,
        symbolSize: 30,
            data: value1.map((item, i) => {
                itemStyle = {
                    color: i > 3 ? colorList[3] : colorList[i]
                };
                return {
                    value: item,
                    itemStyle: itemStyle
                };
            }),
            label: {
                show: true,
                position: 'right',
                formatter:function(item){
                    return (item.value.toFixed(0)+'').replace(/^((\-)?\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
                },
                color: '#ffd700',
                fontSize: 18,
                offset: [10, 0]
            }
        }

    ]
};
//return option;  //一定要返回新格式