echarts柱图Top10排名+Ajax渲染

最新推荐文章于 2024-11-20 14:07:15 发布

syt5324165探索前端的小菇凉~

最新推荐文章于 2024-11-20 14:07:15 发布

阅读量1.4k

点赞数

文章标签： echarts ajax 前端

本文链接：https://blog.youkuaiyun.com/syt5324165/article/details/127240434

版权

使用echarts实现横向条形Top排名

在这里插入图片描述
1.处理下接口数据：

listSum
: 
["0.56", "0", "0", "0", "0.252", "0", "0", "0", "0", "0", "0.118", "0", "0.005", "0", "0", "0", "0",…]
listTrain
: 
["1601", "1602", "1603", "1604", "1605", "1606", "1607", "1608", "1609", "1610", "1611", "1612",…]

var listTrain  =[];
var trianSum = [];
$.ajax({
	url:url,
	async: true,
	data:{
		lineId:lined,
		yearMonth:$("#monthNum").val();
	},
	success:funciton(data){
		if(data.code ===0){
			listTrain = data.listTrain;
            trainSum = data.listSum;
            var map = new Map();
            for(i = 0; i < listTrain .length; i++){
            	map.set(listTrain[i],trainSum[i]);
            };
			var sortMap = new Map([...map.entries()].sort((a,b)=>b[1] - a[1]));//固定写法降序
			var sortKey = [];
			var sortValue = [];
			var topN = 10;
			sortMap.forEach((v,k)=>{
				sortKey .push(k);
				sortValue.push(v);
			});
			listTrain = sortKey .splice(0,topN );
			trainSum  = sortValue.splice(0,topN);
			mileageStatisticsEacharts();
		}
	}
})

断点的图：
在这里插入图片描述

2.echarts图表配置：

mileageStatisticsEacharts=function () {
    var option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.6)',
            extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
            textStyle: {
                color: '#BDC8DC',
                fontFamily:'PingFang'
            }
        },
        legend: {
            show:true,
            itemGap: 12,
            icon: "circle",
            right: '25',
            top: '0',
            textStyle: {
                color: '#BDC8DC',
                fontSize: 14
            }
        },
        //位置
        grid: {
            left: '3%',
            right: '13%',
            top: '0',
            bottom: '1%',
            containLabel: true
        },
        //x轴设置
        xAxis: {
            type: 'value',
            show:false,
            axisLabel: {
                color: '#E1EEFF'
            },
            //坐标轴样式
            axisLine: {
                lineStyle: {
                    color: '#2F4871'
                },
                width: 15
            },
            //name样式
            nameTextStyle:{
                color: '#BDC8DC',
                fontSize: 15,
                fontWeight: 200
            },
            axisTick: {
                show: false
            },
            //分割线样式
            splitLine: {
                show:false
            }
        },
        //y轴设置
        yAxis: {
            type: 'category',
            axisLabel: {
                color: '#E1EEFF',
                fontFamily:'PingFang'
            },
            //坐标轴颜色
            axisLine: {
                show:false,
                lineStyle: {
                    color: '#217FA3'
                },
                width: 15
            },
            axisTick: {
                show: false
            },
            data: listTrain,
            inverse: true
        },
        series: [
            {
                // data:[424242, 152352,854242,525235,264575,376346,742426,924242,693248,392545,551516,66666,551516],
                data: trainSum,
                type:'bar',
                barWidth:16,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(22, 69, 87, 0.4)'
                },
                label:{
                    formatter: "{c}"+"万公里",
                    show:true,
                    position: 'right',
                    distance:-22,
                    textStyle:{
                        color:"#E1F4FF",
                    },
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 1, 1,
                            [
                                {offset: 0, color: '#2988D9'},     //渐变头部色
                                {offset: 0.5, color: '#13B9F5'},
                                {offset: 1, color: '#13B9F5'}
                            ]
                        )
                    },

                },
            }
        ]
    };
    setTimeout(function(){
        var width = myChart.getWidth();
        var opt = myChart.getOption();
        var grid = opt.grid[0];
        var right = grid.right;
        // console.log(right);
        var left = grid.left;
        right = width*parseFloat(right)/100;
        left = width*parseFloat(left)/100;
        var x = width-left-right;

        myChart.setOption({
            series:[{
                label:{
                    show:true,
                    position:'left',
                    offset:[x+50,0]
                }
            }]
        })
    });

    var myChart = echarts.init(document.getElementById('systemMultiBar'));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
};