动态可视化ECharts Gallery

20:11:45图表已生成
代码
var rankData = [{
        'date': '2020-03-14',
        'category': '2020-03-14',
        'data': [{
                'name': 'A商品',
                'value': 6509
            },
            {
                'name': 'B商品',
                'value': 4791
            },
            {
                'name': 'C商品',
                'value': 3447
            },
            {
                'name': 'D商品',
                'value': 2906
            },
            {
                'name': 'E商品',
                'value': 2611
            },
        ]
    },
    {
        'date': '2020-03-13',
        'category': '2020-03-13',
        'data': [{
                'name': 'A商品',
                'value': 4874
            },
            {
                'name': 'B商品',
                'value': 3662
            },
            {
                'name': 'D商品',
                'value': 2431
            },
            {
                'name': 'C商品',
                'value': 2160
            },
            {
                'name': 'E商品',
                'value': 2101
            },
        ]
    },
    {
        'date': '2020-03-12',
        'category': '2020-03-12',
        'data': [{
                'name': 'A商品',
                'value': 3751
            },
            {
                'name': 'B商品',
                'value': 3398
            },
            {
                'name': 'D商品',
                'value': 2129
            },
            {
                'name': 'C商品',
                'value': 2110
            },
            {
                'name': 'E商品',
                'value': 2088
            },
        ]
    },
    {
        'date': '2020-03-11',
        'category': '2020-03-11',
        'data': [{
                'name': 'A商品',
                'value': 2642
            },
            {
                'name': 'B商品',
                'value': 2332
            },
            {
                'name': 'D商品',
                'value': 1095
            },
            {
                'name': 'C商品',
                'value': 1075
            },
            {
                'name': 'E商品',
                'value': 1063
            },
        ]
    },
    {
        'date': '2020-03-10',
        'category': '2020-03-10',
        'data': [{
                'name': 'B商品',
                'value': 1345
            },
            {
                'name': 'A商品',
                'value': 1045
            },
            {
                'name': 'D商品',
                'value': 870
            },
            {
                'name': 'C商品',
                'value': 696
            },
            {
                'name': 'E商品',
                'value': 640
            },
        ]
    },
];
var title = '商品累计销量情况';
var playInterval = 1000; //时间间隔
// 排行颜色
var colorListS1 = [];
var colors = []
for (var i = 0; i < rankData.length; i++) {
    var colorListF1 = {};
    for (var n = 0; n < rankData[i].data.length; n++) { // 每阶段内部循环
        var name = rankData[i].data[n].name; //排行榜上项目的名称
        colorListF1[name] = colors[n]; //排行榜上项目名称和对应的颜色，其中每个排名位置的颜色不变
    }
    colorListS1[i] = colorListF1; //每次排行榜的数据字典放入总体的列表中
}
// 基础设置
var option = {
    baseOption: {
        animationDurationUpdate: playInterval * 1.5, //数据更新动画的时长
        animationEasingUpdate: 'quinticInOut', //数据更新动画的缓动效果
        timeline: { //时间轴相关参数
            show: false, //隐藏时间轴
            axisType: 'category', //轴的类型：类别型
            orient: 'vertical', //摆放方式：竖直放置
            autoPlay: true, //自动播放
            loop: false, //表示是否循环播放
            playInterval: playInterval, //表示播放的速度（跳动的间隔），单位毫秒（ms）
            left: null, //timeline组件离容器左侧的距离
            right: 30, //timeline组件离容器右侧的距离
            top: 330, //timeline组件离容器上侧的距离
            bottom: 100, //timeline组件离容器下侧的距离
            height: null,
            label: {
                normal: {
                    show: true, //不显示轴线
                    color: '#ccc', //时间线的颜色
                }
            },
            checkpointStyle: { //当前项的图形样式，时间轴上显示
                symbol: 'none', //标记的图形样式
                color: '#bbb', //颜色
                borderColor: '#777', //边框颜色
                show: false, //不显示
                borderWidth: 1 //边框宽度
            },
            controlStyle: { //『控制按钮』的样式。『控制按钮』包括：『播放按钮』、『前进按钮』、『后退按钮』。
                showNextBtn: false, //是否显示『前进按钮』
                showPrevBtn: false, //是否显示『后退按钮』
                normal: {
                    color: '#666',
                    show: false,
                    borderColor: '#666'
                },
                emphasis: { //高亮状态相关设置
                    color: '#aaa',
                    borderColor: '#aaa'
                }
            },
            data: rankData.map(function(ele) { //对列表中每个元素拿data部分
                return ele.date
            })
        },
        title: [{ //标题相关设置
            left: 'center',
            top: '3%',
            textStyle: {
                fontSize: 25,
                color: 'rgba(121,121,121, 0.9)'
            }
        }, {
            left: 'center',
            top: '5%'
        }],
        grid: [{ //网格相关设置
            left: '20%',
            right: '20%',
            top: '12%',
            height: 'auto',
            bottom: '25%'
        }],
        xAxis: [{}],
        yAxis: [{}],
        series: [{ //图表相关设置
            id: 'bar',
            type: 'bar', //条形图
            barWidth: '80',
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    show: true,
                    position: 'right'
                }
            },
            data: []
        }]
    },
    options: []
};
var xMaxInterval = 5;
for (var i = rankData.length - 1; i > 0; i--) { //外循环
    var xMax = 20;
    if (rankData[i].data[0].value > 20) { // 当此排行中第一个数据是否大于20
        xMax = 'dataMax' //此时取数据在该轴上的最大值作为最大刻度
    }
    if (rankData[i].data[0].value / xMaxInterval >= 10) {
        xMaxInterval = rankData[i].data[0].value / 5 //减小最大间隔
    }
    option.options.push({ // 数据压入options，每次循环有一个option
        backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ //背景的径向渐变
            offset: 0,
            color: '#f7f8fa'
        }, {
            offset: 1,
            color: '#cdd0d5'
        }]),
        title: {
            text: title + ' ' + rankData[i].category, //构造标题
            color: '#bfbfbf'
        },
        xAxis: [{ //x轴相关设置
            show: true,
            type: 'value',
            interval: xMaxInterval, //强制设置坐标轴分割间隔
            max: xMax,
            axisTick: {
                show: false //不显示坐标轴刻度
            },
            axisLabel: { //坐标轴刻度标签的相关设置
                show: true,
                color: 'rgba(121,121,121,0.9)',
                textStyle: {
                    color: 'rgba(121,121,121,0.9)'
                }
            },
            axisLine: { //坐标轴线相关设置
                show: false,
                lineStyle: {
                    color: 'rgba(121,121,121,0.3)'
                }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线
                show: true,
                lineStyle: {
                    color: ['rgba(121,121,121,0.3)', 'rgba(121,121,121,0)']
                }
            }
        }],
        yAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(121,121,121,0.3)'
                }
            },
            axisLabel: {
                show: false,
                textStyle: {}
            },
            data: rankData[i].data.map(function(ele) { //拿到每个项目元素的名称
                return ele.name
            })
        }],
        series: [{
            id: 'bar', //组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件
            itemStyle: {
                normal: {
                    color: function(params) { //设置一个颜色数组，最好比序列内的数据点个数要大或者相等
                        //根据当前数据点在当前序列内所处的顺序序号去颜色数组内自动匹配颜色
                        var colorListr = [
                            '#0f4471',
                            '#00adb5',
                            '#ff5722',
                            '#5628b4',
                            '#20BF55',
                            '#f23557',
                        ];
                        return colorListr[params.dataIndex]
                    },
                    label: {
                        show: true,
                        fontSize: 18,
                        position: 'top',
                        formatter: '{c}%'
                    },
                    shadowBlur: 20,
                    shadowColor: 'rgba(40, 40, 40, 0.5)',
                }
            },
            label: { //条形图的标签
                normal: {
                    position: 'right', //标签显示位置
                    formatter: function(p) {
                        return p.name + ": " + p.value; //标签显示 元素名称和具体值
                    }
                }
            },
            data: rankData[i].data.map(function(ele) {
                return ele.value
            }).sort(function(a, b) {
                return a > b
            })
        }]
    })
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
