动态生成节点批量加载echarts图表

最新推荐文章于 2024-07-02 16:09:07 发布

YLiu77

最新推荐文章于 2024-07-02 16:09:07 发布

阅读量778

点赞数 2

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/YLiu77/article/details/109599183

版权

echarts 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

通过后台返回的数组，根据数组新建多个节点，并对每个节点绘制echarts图表，这里是模拟罐高进度的效果。先上效果图：

代码如下：

// 图表绘制
function showTank() {
        for (var i = 0; i < dataList.length; i++) {
            loadChart("tankChart" + i, dataList[i])
        }
    }

    function loadChart(id, res) {
        var myChart = echarts.init(document.getElementById(id));

        var tankHight = 0;
        if(res.GUANZONGGAODU) {
            tankHight = res.GUANZONGGAODU
        } else {
            tankHight = 16800
        }
        option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'none'
            },
            grid: [{
                // left: '12%',
                top: '18%',
                // right: '5%',
                bottom: '18%'
            }],
            xAxis: {
                data: ["百分比"],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#e54035'
                    }
                }
            },
            yAxis: {
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            series: [{
                name: '最上层图标',
                type: 'pictorialBar',
                symbol: 'image:///Images/Main/tank-top.png',
                symbolSize: [90, 30],
                symbolOffset: [0, -20],
                itemStyle: {
                    normal: {
                        color: '#363F5E'
                    }
                },
                data: [{
                    value: tankHight,
                    symbolPosition: 'end'
                }],
                silent: false,
                z: 7,
            }, {
                name: '中间立体圆',
                type: 'pictorialBar',
                symbolSize: [90, 30],
                symbolOffset: [0, -18],
                itemStyle: {
                    normal: {
                        color: getColor(name)
                    }
                },
                data: [{
                    value: res.YOUSHUIGAODU,
                    symbolPosition: 'end'
                }],
                silent: false,
                z: 6,
            }, {
                //底部立体柱
                stack: '1',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: getColor(name),
                        opacity: .6
                    }
                },
                label: {
                    show: false,
                    position: "top",
                    distance: 15,
                    color: "#FFFE00",
                    fontSize: 50,
                    formatter: '{c}' + '%'
                },
                silent: true,
                barWidth: 90,
                barGap: '-100%', // Make series be overlap
                data: [res.YOUSHUIGAODU],
                silent: false,
                z: 3,
            }, {
                //上部立体柱
                stack: '1',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#36405E',
                        opacity: .7
                    }
                },
                silent: true,
                barWidth: 90,
                barGap: '-100%', // Make series be overlap
                data: [tankHight - res.YOUSHUIGAODU],
                silent: false,
                z: 4,
            }, {
                name: '最底部立体圆',
                type: 'pictorialBar',
                symbolSize: [90, 25],
                symbolOffset: [0, 8],
                z: 12,
                itemStyle: {
                    normal: {
                        color: getColor(name),
                        opacity: .8
                    }
                },
                data: [tankHight - res.YOUSHUIGAODU],
                silent: false,
                z: 2,
            }, {
                name: '最底部图标',
                type: 'pictorialBar',
                symbol: 'image:///Images/Main/tank-bottom.png',
                symbolSize: [105, 30],
                symbolOffset: [0, 20],
                itemStyle: {
                    normal: {
                        color: '#01CC04'
                    }
                },
                data: [tankHight - res.YOUSHUIGAODU],
                silent: false,
                z: 1,
            }, {
                name: '',
                type: 'pictorialBar',
                symbol: 'image:///Images/level-bg.png',
                symbolSize: [56, 35],
                symbolOffset: ['125%', -(res.YOUSHUIGAODU / tankHight * 100) + '%'],
                data: [{
                    value: parseInt(res.YOUSHUIGAODU),
                    symbolPosition: 'start',
                    label: {
                        show: true,
                        position: ['96%', '23%'],
                        color: '#BCC7E1',
                        fontFamily: 'AliHYAiHei',
                        fontSize: 10
                    }
                }],
                silent: false,
                z: 6,
            }]
        };

        myChart.setOption(option);
        //响应式图表
        window.onresize = myChart.resize;
    }

    
    $(function () {
        drawTankData();  // 获取后台接口数据，通过数组循环动态生成节点
        setTimeout(() => {
            showTank();
        }, 1000);  // 数组循环生成节点需要时间，间隔1s后再绘制图表，避免无法获取节点导致绘制失败
    });