Ajax动态渲染echarts柱图数据

最新推荐文章于 2024-01-21 16:23:06 发布

syt5324165探索前端的小菇凉~

最新推荐文章于 2024-01-21 16:23:06 发布

阅读量451

点赞数

文章标签： ajax echarts javascript

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

版权

这段代码展示了如何使用Echarts库从后端接口获取数据并渲染为柱状图。它首先定义了颜色列表和一些配置项，然后通过Ajax调用`selectSystemTotalInfo`接口获取数据。数据加载成功后，将数据转换为Echarts所需的格式，并设置图表的各种属性，如颜色、标签、坐标轴等。最后，初始化Echarts实例并渲染图表。当窗口大小改变时，图表会自动调整大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端接口数据结构图展示在这里插入图片描述
渲染后的效果：

$(function(){
	selectSystemTotalInfo();
})
var prefix = "/biz/orderInfo";
var sysLineColorList = [ '#0F9AF8', '#2B63D5']
function selectSystemTotalInfo() {
    $.ajax({
        type: 'get',
        url: prefix + "/selectSystemTotalInfo",
        success: function (data) {
            if (data.code == 0) {
                systemTotalEacharts(data.result);
                console.log(data.result)
            }
            else {
                layer.msg(result.msg);
            }
        },
        error: function (data) {
            layer.alert("网络超时");
        }
    })
}
function systemTotalEacharts(order) {
    let xData = [];
    let seriesList = [];
    let redoList = [];
    let todoList = [];
    let nameList = ['已处理','未处理']
    order.forEach((value, index) => {
         xData.push(value.name);
         redoList.push(value.redo);
         todoList.push(value.todo);
     });
    seriesList.push(redoList);
    seriesList.push(todoList);
    var option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.6)',
            extraCssText: 'box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);',//鼠标划过标签背景阴影
            textStyle: {
                color: '#6a717b',
                color: '#BDC8DC',
                fontFamily:'PingFang',
            },
            axisPointer: { //鼠标划过背景阴影
                type: 'shadow',
                shadowStyle: {
                    color: 'rgba(255, 255, 255, 0.1)',
                },
            },
        },
        //柱状图颜色
        color: sysLineColorList,
        //柱状图颜色标示
        legend: {
            show:true,
            itemGap: 12,
            icon: "circle",
            right: '25',
            bottom: '0',
            textStyle: {
                color: '#fff',
                fontSize: 15,
                fontSize: 14,
                fontFamily:'PingFang',
                fontWeight: 200
            },
            data:nameList,
        },
        //位置
        grid: {
            left: '5%',
            right: '5%',
            top: '18%',
            bottom: '5%',
            containLabel: true
        },
        //x轴设置
        xAxis: {
            type: 'category',
            axisLabel: {
                color: fontColor,
                fontFamily:'PingFang',
            },
            //坐标轴颜色
            axisLine: {
                lineStyle: {
                    color: fontColor,
                    color: lineColor
                },
                width: 15
            },
            axisTick: {
                show: false,
            },
            data: xData
        },
        //y轴设置
        yAxis: {
            name: '工单数量',
            type: 'value',
            // axisLabel: {
            //     color: '#9FF'
            // },
            axisLabel: {
                fontFamily:'PingFang',
                color: fontColor
            },
            //坐标轴样式
            axisLine: {
                lineStyle: {
                    color: '#29617B'
                },
                width: 15
            },
            //name样式
            nameTextStyle:{
                color: '#fff',
                fontSize: 15,
                fontWeight: 200
            },
            axisTick: {
                show: false,
            },
            //分割线样式
            splitLine: {
                lineStyle: {
                    color: '#FF000F'
                }
            },
        },
        series: []
    };
    for (var i = 0; i < xData.length; i++) {
        option.series.push({
            name: nameList[i],
            type: 'bar',
            stack: '总量',
            barWidth: '45%',
            label: {
                show: false,
                position: 'insideRight',
                fontFamily:'PingFang',
                formatter: function(params) {
                    if (params.value > 0) {
                        return params.value;
                    } else {
                        return ' ';
                    }
                },
            },
            data: seriesList[i]
        })
    }
    let systemMultiBar = echarts.init(document.getElementById('systemMultiBar'));
    systemMultiBar.clear();
    systemMultiBar.setOption(option);
    window.addEventListener("resize", function (event) {
        systemMultiBar.resize();
    })
}