还不会柱状图动态排序？手把手带你卷起来

叶落风尘2023-10-20 10:56

还不会柱状图动态排序？手把手带你卷起来

前言

echarts在前端开发中实属必不可缺的大数据可视化工具，在前段时间搬砖时遇到这样一个需求，需要实现一个动态排序的柱状图，用来展示不同部门在不同月份的绩效收益情况，能够直观地看到每个月各个部门的排名变化情况。并能够随时暂停，手动切换来展示某个月的具体情况。经过一下午一顿敲击键盘后，完美完成本次任务，总结记录一下，以后就可以愉快地摸鱼了。完整代码看文末，先上图看下实现效果：

安装使用

1、demo基于vue3框架，首先安装echarts。

sql 复制代码 
yarn add echarts

//我使用的版本："echarts": "^5.2.2"

2、全局注册echarts,在app.vue 中引入echarts，使用provide，使所有的子组件都可以直接使用echarts

javascript 复制代码 
//app.vue
import * as echarts from 'echarts';
provide('$echarts', echarts);

demo实现

生成一组测试数据

首先随机生成一组测试数据,包含1-10月的数据count，平均数avg和y轴的label。timeLineList用于用于播放进度条展示。

ini 复制代码 
const generateRandomData = () => {
    const data = [];
    for (let i = 0; i < 100; i++) {
        let month = '2023-';
        month = month + (Math.floor(i / 10) + 1);
        const count = Math.floor(Math.random() * 300) + 100; // 生成100到300的随机整数  
        const name = 'count' + i % 10;
        const avg = Math.floor(Math.random() * 300) + 100;
        data.push({
            month,
            count,
            name,
            avg
        });

        //生成月度集合，用于播放条展示
        if(!timeLineList.value.includes(month)){
           timeLineList.value.push(month)
        }
    }
    return data;
}

编写模板部分

包含播放和暂停按钮、播放条和echart部分。

ini 复制代码 
<template>
    <div class="chart-dialog-content">
        <div class="opt-bar">
            <button size="mini" v-if="playChart == false" @click="(playChart = true), initChart(0)"><i
                    class="el-icon-video-play"></i>轮播</button>
            <button size="mini" v-if="playChart == true" @click="(playChart = false), initChart(activeIndex)"><i
                    class="el-icon-video-pause"></i>暂停</button>
        </div>
        <section class="bottom">
            <div class="time-line">
                <div class="line-item" @click="changeChart(index)" v-for="(i, index) in timeLineList" :key="i"
                    :class="{ active: index <= activeIndex, hover: index == activeIndex }">
                    <div class="line"></div>
                    <div class="point">
                        <div class="text">{{ i }}</div>
                        <div class="icon el-icon-caret-top" v-show="index == activeIndex"></div>
                    </div>
                </div>
            </div>
            <div class="chart-content" id="chartContent"></div>
        </section>
    </div>
</template>

echarts配置

echarts几个比要重要配置实现：

1、配置x轴的最大最小值，为了让变化看上去更明显，配置min值不从0开始。

matlab 复制代码 
xAxis: {
    max: 'dataMax',
    min: function (value: any) {
        return Math.round(value.min) - 10;
    },
    axisLabel: {
        formatter: function (n: any) {
            return n;
        }
    }
},

2、配置dataSet,从数据集合中取出某个月的数据

css 复制代码 
dataset: {
    source: data.filter(function (item) {
        return item[0] === startMonth;
    })
},

detaset需要的数据样例：

css 复制代码 
[    [        "2023-2",        322,        "count0",        205    ],
    [        "2023-2",        218,        "count1",        203    ],
    [        "2023-2",        206,        "count2",        194    ],
    [        "2023-2",        220,        "count3",        297    ],
    [        "2023-2",        349,        "count4",        101    ],
    [        "2023-2",        247,        "count5",        357    ],
   ...
]

3、配置平均线,取dataset数组中的数据

css 复制代码 
markLine: {
    symbolSize: 0,
    data: [
        {
            name: '平均分',
            xAxis: Number(
                data.filter(function (item) {
                    return item[0] === startMonth;
                })[0][3]
            ),
            lineStyle: {
                color: '#eb7e65',
                type: 'dashed'
            },
            label: {
                show: true,
                color: '#fe4852',
                formatter:
                    '{ll|平均值：' +
                    Number(
                        data.filter(function (item) {
                            return item[0] === startMonth;
                        })[0][3]
                    ) +
                    '\n}',
                rich: {
                    ll: {
                        fontSize: 16,
                        lineHeight: 22,
                        padding: [40, 0, 0, 0]
                    }
                }
            }
        }
    ],
    animation: false
},

让图表动起来

其实让图表动起来，只需要动态改变echarts的数据即可实现，但是需要在echarts配置中增加动画效果

vbnet 复制代码 
animationDuration: 0,
animationDurationUpdate: updateFrequency,
animationEasing: 'linear',
animationEasingUpdate: 'linear',

定时从数据集合data中取出对应月份的数据

ini 复制代码 
if (playChart.value) {
        for (let i = startIndex; i < month.length - 1; ++i) {
            let myTimeout = setTimeout(() => {
                updateMonth(month[i + 1]);
                activeIndex.value = i + 1;
                //播放结束
                if (i == month.length - 2) {
                    setTimeout(() => {
                        playChart.value = false;
                    }, updateFrequency);
                }
            }, (i + 1 - startIndex) * updateFrequency);
            myTimeoutArr.value.push(myTimeout);
        }
    }
function updateMonth(month: any) {
    let source = data.filter(function (item) {
        return item[0] === month;
    });
    console.log(source)
    option.series[0].data = source;
    option.series[0].markLine = {
        symbolSize: 0,
        data: [
            {
                name: '平均分',
                xAxis: Number(source[0][3]),
                lineStyle: {
                    color: '#eb7e65',
                    type: 'dashed'
                },
                label: {
                    show: true,
                    color: '#fe4852',
                    formatter: '{ll|平均值：' + Number(source[0][3]) + '\n}',
                    rich: {
                        ll: {
                            fontSize: 16,
                            lineHeight: 22,
                            padding: [40, 0, 0, 0]
                        }
                    }
                }
            }
        ],
        animation: false
    };
    myChart.value.setOption(option);
}

完整代码

demo完整代码如下，可直接复制使用

xml 复制代码 
<template>
    <div class="chart-dialog-content">
        <div class="opt-bar">
            <button size="mini" v-if="playChart == false" @click="(playChart = true), initChart(0)"><i
                    class="el-icon-video-play"></i>轮播</button>
            <button size="mini" v-if="playChart == true" @click="(playChart = false), initChart(activeIndex)"><i
                    class="el-icon-video-pause"></i>暂停</button>
        </div>
        <section class="bottom">
            <div class="time-line">
                <div class="line-item" @click="changeChart(index)" v-for="(i, index) in timeLineList" :key="i"
                    :class="{ active: index <= activeIndex, hover: index == activeIndex }">
                    <div class="line"></div>
                    <div class="point">
                        <div class="text">{{ i }}</div>
                        <div class="icon el-icon-caret-top" v-show="index == activeIndex"></div>
                    </div>
                </div>
            </div>
            <div class="chart-content" id="chartContent"></div>
        </section>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, inject } from 'vue';
const activeIndex = ref(0);
const myChart = ref<any>(null);
const playChart = ref(true);
const rspData = ref<any>([]);
const timeLineList = ref<any>([]);
const myTimeoutArr = ref<any>([]);
const $echarts: any = inject('$echarts');

const generateRandomData = () => {
    const data = [];

    for (let i = 0; i < 100; i++) {

        let month = '2023-';
        month = month + (Math.floor(i / 10) + 1);
        const count = Math.floor(Math.random() * 300) + 100; // 生成100到300的随机整数  
        const name = 'count' + i % 10;
        const avg = Math.floor(Math.random() * 300) + 100;
        data.push({
            month,
            count,
            name,
            avg
        });
        if(!timeLineList.value.includes(month)){
        timeLineList.value.push(month)
        }
    }

    return data;
}


onMounted(() => {
    playChart.value = false;
    getData();
});
const getData = () => {
    timeLineList.value = [];
    rspData.value = generateRandomData();
    initChart(0);
}
const changeChart = (index: number, flag = false) => {
    playChart.value = flag;
    initChart(index);
}
const initChart = (index = 0) => {
    myChart.value?.dispose();
    //清理定时
    myTimeoutArr.value.forEach((item: any) => {
        clearTimeout(item);
    });
    myTimeoutArr.value = [];
    // 获取$echarts实例

    myChart.value = $echarts.init(document.querySelector('#chartContent'));
    const updateFrequency = 3000;
    const dimension = 1;
    const data: any[] = [];
    rspData.value.forEach((item: any) => {
        data.push([item.month, item.count, item.name, item.avg]);
    });
    const month: any[] = [];
    data.forEach((item) => {
        if (month.length === 0 || month[month.length - 1] !== item[0]) {
            month.push(item[0]);
        }
    });

    let startIndex = index;
    let startMonth = month[startIndex];
    let option = {
        grid: {
            top: 10,
            bottom: 30,
            left: 20,
            right: 40,
            containLabel: true
        },
        xAxis: {
            max: 'dataMax',
            min: function (value: any) {
                return Math.round(value.min) - 10;
            },
            axisLabel: {
                formatter: function (n: any) {
                    return n;
                }
            }
        },
        dataset: {
            source: data.filter(function (item) {
                return item[0] === startMonth;
            })
        },
        yAxis: {
            type: 'category',
            inverse: true,
            axisTick: {
                show: false
            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: '#e2e2e2'
                }
            },
            axisLabel: {
                show: true,
                fontSize: 14,
                formatter: function (value: any) {
                    return value;
                },
                color: '#8c8c8d',
                rich: {
                    flag: {
                        fontSize: 25,
                        padding: 5
                    }
                }
            },
            animationDuration: 300,
            animationDurationUpdate: 300
        },
        series: [
            {
                realtimeSort: true,
                seriesLayoutBy: 'column',
                type: 'bar',
                itemStyle: {
                    color: function () {
                        return '#7ea2f4';
                    }
                },
                markLine: {
                    symbolSize: 0,
                    data: [
                        {
                            name: '平均分',
                            xAxis: Number(
                                data.filter(function (item) {
                                    return item[0] === startMonth;
                                })[0][3]
                            ),
                            lineStyle: {
                                color: '#eb7e65',
                                type: 'dashed'
                            },
                            label: {
                                show: true,
                                color: '#fe4852',
                                formatter:
                                    '{ll|平均值：' +
                                    Number(
                                        data.filter(function (item) {
                                            return item[0] === startMonth;
                                        })[0][3]
                                    ) +
                                    '\n}',
                                // distance: [-135, 150],
                                // padding: [-50, 0, 50, 0],
                                rich: {
                                    ll: {
                                        fontSize: 16,
                                        lineHeight: 22,
                                        padding: [40, 0, 0, 0]
                                    }
                                }
                            }
                        }
                    ],
                    animation: false
                },
                barMaxWidth: 20,
                encode: {
                    x: dimension,
                    y: 2
                },
                label: {
                    show: true,
                    // precision: 1,
                    position: 'right',
                    valueAnimation: true,
                    fontFamily: 'monospace'
                }
            }
        ],
        // Disable init animation.
        animationDuration: 0,
        animationDurationUpdate: updateFrequency,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
        // graphic: {
        //     elements: [
        //         {
        //             type: 'text',
        //             right: 0,
        //             bottom: 0,
        //             style: {
        //                 text: startMonth,
        //                 font: 'bolder 24px monospace',
        //                 fill: 'rgba(100, 100, 100, 0.25)'
        //             },
        //             z: 100
        //         }
        //     ]
        // }
    };

    myChart.value.setOption(option);
    activeIndex.value = index;
    if (playChart.value) {
        for (let i = startIndex; i < month.length - 1; ++i) {
            let myTimeout = setTimeout(() => {
                updateMonth(month[i + 1]);
                activeIndex.value = i + 1;
                //播放结束
                if (i == month.length - 2) {
                    setTimeout(() => {
                        playChart.value = false;
                    }, updateFrequency);
                }
            }, (i + 1 - startIndex) * updateFrequency);
            myTimeoutArr.value.push(myTimeout);
        }
    }
    function updateMonth(month: any) {
        let source = data.filter(function (item) {
            return item[0] === month;
        });
        console.log(source)
        option.series[0].data = source;
        option.series[0].markLine = {
            symbolSize: 0,
            data: [
                {
                    name: '平均分',
                    xAxis: Number(source[0][3]),
                    lineStyle: {
                        color: '#eb7e65',
                        type: 'dashed'
                    },
                    label: {
                        show: true,
                        color: '#fe4852',
                        formatter: '{ll|平均值：' + Number(source[0][3]) + '\n}',
                        rich: {
                            ll: {
                                fontSize: 16,
                                lineHeight: 22,
                                padding: [40, 0, 0, 0]
                            }
                        }
                    }
                }
            ],
            animation: false
        };
       // option.graphic.elements[0].style.text = month;
        myChart.value.setOption(option);
    }
}
</script>

<style lang="less" scoped>
.chart-dialog-content {
    .chart-content {
        height: 550px;
        width: 100%;
        margin: 0 auto;
    }

    .opt-bar {
        padding: 12px 16px;
        display: flex;
        align-items: center;

        >div {
            margin-right: 16px;
        }

        i {
            margin-right: 4px;
        }

        .desc {
            font-weight: bold;
            margin-right: 8px;
        }

        .el-date-editor {
            width: 170px;
        }
    }

    .bottom {
        padding: 16px;
        background: #f2f4f7;

        .time-line {
            display: flex;
            width: 80%;
            height: 36px;
            margin: 0 auto;

            .line-item {
                display: flex;
                align-items: center;
                width: 100%;
                cursor: pointer;

                &:first-child {
                    width: 10px;

                    .line {
                        width: 0;
                    }
                }

                &.hover {
                    .text {
                        color: #467ff1;
                    }
                }

                &.active {
                    .point {
                        border: 2px solid #477ff0;

                        .text {
                            font-weight: 500;
                        }
                    }

                    .line {
                        background: #477ff0;
                    }
                }

                .point {
                    position: relative;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: #fff;

                    .text {
                        position: absolute;
                        white-space: nowrap;
                        transform: translate(-50%, -135%);
                    }

                    .icon {
                        font-size: 32px;
                        position: absolute;
                        color: #fff;
                        transform: translate(-50%, 0);
                    }
                }

                .line {
                    width: 100%;
                    height: 3px;
                    background: #efefef;
                }
            }
        }

        .chart-content {
            background: #fff;
        }

        .type-radio {
            padding: 12px;
            background: #fff;

            .el-radio {
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
                margin-right: 12px;
            }
        }
    }
}
</style>
相关推荐
还是大剑师兰特33 分钟前
D3的竞品有哪些，D3的优势，D3和echarts的对比
前端·javascript·echarts
王解33 分钟前
【深度解析】CSS工程化全攻略（1）
前端·css
一只小白菜~40 分钟前
web浏览器环境下使用window.open()打开PDF文件不是预览，而是下载文件？
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
man20171 小时前
【2024最新】基于springboot+vue的闲一品交易平台lw+ppt
vue.js·spring boot·后端
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建（module）
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS（跨域资源共享）：原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model（详细图文注释）
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08文件或文件夹名称中有空格如何批量去除09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能