超燃，拿来即用！Echarts动态排名柱状图(自适应电脑和手机端)说明文档

项目说明

动态排名柱状图能很好的表达在某一个时间周期，随着时间的变化，各参数指标的增减变化，形象直观，让人很容易理解。

• 项目人性化，仅需在Excel中录入数据，点击start.exe即可运行；
• 无需过度配置，如果数据量少导致动画卡顿，config.js中调整间隔时间即可；
• 自适应PC端和手机端；
• 本地可以直接运行；如果在服务器端访问，首次或修改表格文件启动start.exe生成数据即可；
• 源代码：https://download.csdn.net/download/weixin_41290949/29952910

开发说明

• 基于百度开运Echarts 5.0开发；
• 自带python应用执行程序start.exe，读取excel并转化为json数据

项目目录

├─index.html …图表静态文件 ├─start.exe …启动程序 ├─css …样式表目录 │ ├─common.css …核心样式表 ├─js …JS封装库 │ ├─config.js …图表常用参数配置文件 │ ├─echarts5.min.js …echarts封装库 │ ├─jquery-3.3.1.min.js …jquery封装库 ├─data …数据文件 │ ├─lockdata.xls …源数据文件 │ ├─data.json …动态产生的JSON数据

配置文件

/*
 * *Created by Poleung
 * *Email 30930572@qq.com
 * *Create date 2021-10-08
 * *Copyright LockDataV
 * *Desc data visualization project based on echarts5.0.js.
 */

//标题名称;
var title = '各省市历年GDP数据可视化动态排名';

/*子标题*/
var subtext = '数据来源：全国1949-2016年GDP数据统计(纯属虚构)';

/*主标题字号*/
var titleSize = '20';

/*参数说明：更新间隔时间
* 根据数据量的多少调整
* 2*1000，代表2秒
* */
var updateFrequency = 2000;

/*参数说明：选择第N列数据
* 0代表选择Excel第1列数据作为排序指标
* */
var dimension = 0;

/*参数说明：Y轴显示数量
* 默认显示10条数据
* */
var maxData = 10;

/*参数说明：柱图颜色数组
* 根据数据唯一名称数量总数调整个数
* */
var barColors = [
    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
    '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
    '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
    '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
    '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
];

/*参数说明：柱图文本标签显示位置
 *参数选项：
 'top'
 'left'
 'right'
 'bottom'
 'inside'
 'insideLeft'
 'insideRight'
 'insideTop'
 'insideBottom'
 'insideTopLeft'
 'insideBottomLeft'
 'insideTopRight'
 'insideBottomRight'
 */
var yPosition = 'insideRight';

核心图表

//构建容器并初始化DOM；
    var myChart = echarts.init(document.getElementById("container"));
    //获取数据并加载;
    $.when(
        $.getJSON('data/data.json')
    ).done(function (res) {
        //获取数据集;
        var data = res;

        //获取年份;
        var years = [];
        for (var i = 0; i