ECharts Gallery

20:11:45图表已生成
代码
var labelData = ['2020', '2019', '2018', '2018', '2016', '2015'];
var manData = [1500, 1600, 1600, 1500, 1600,500];
var womanData = [-12000, -10000, -8000, -8000, -6000, -6000];
var seriescolor = ['#4B96F3', '#03C9AC'];
option = {
    legend: {
        data: ['实体图书', '电子图书'],
        type: "scroll",
        //icon: 'ret',
        height: '88%',
        right: '20',
        top: '10',
        itemGap: 25,
        itemWidth: 14,
        itemHeight: 14,
        textStyle: {
            fontSize: '14',
            color: '#999',
        },

    },
    tooltip: {
        trigger: 'axis',
        extraCssText: 'padding-left:8px;line-height:25px;width:170px;height:60px;background:rgba(0,0,0,0.7);border-radius:6px;',
        axisPointer: {
            type: 'none'
        },
        textStyle: {
            fontSize: '14',
            color: '#fff',
        },
        formatter: function(params) {
            var str = ''; //声明一个变量用来存储数据
            str += '<div>' + params[0].name + '年</div>';
            for (var i = 0; i < params.length; i++) {
                if (params[i].seriesName == '实体图书') {
                    str += '<span style="display:inline-block;margin-right:5px;margin-bottom:2px;width:6px;height:6px;border-radius:50%;background-color:' + seriescolor[0] + ';"></span>新购' + params[i].seriesName + '</span> : <span>' + -params[i].value + '册</br>';
                } else if (params[i].seriesName == '电子图书') {
                    str += '<span style="display:inline-block;margin-right:5px;margin-bottom:2px;width:6px;height:6px;border-radius:50%;background-color:' + seriescolor[1] + ';"></span>新购' + params[i].seriesName + '</span> : <span>' + params[i].value + '册</br>';
                }
            }
            return str;
        }
    },
    xAxis: [{
        type: 'value',
        gridIndex: 0,
        axisTick: {
            show: false,
            inside: false
        },
        axisLabel: {
            show: false
        },
        axisLine: { // Y轴轴线样式
            show: false,
            lineStyle: {
                color: '#000',
            }
        },
        splitLine: {
            show: false
        }
    }, {
        type: 'value',
        gridIndex: 1,
        axisTick: {
            show: false
        }, //是否显示刻度
        axisLine: { // Y轴轴线样式
            show: false, // 是否显示X轴
            lineStyle: {
                color: '#000',
            }
        },
        axisLabel: {
            show: false //是否显示X轴内容
        },
        splitLine: {
            show: false
        }
    }, {
        type: 'value',
        gridIndex: 2,
        axisTick: {
            show: false
        }, //是否显示刻度
        axisLine: { // Y轴轴线样式
            show: false, // 是否显示X轴
            lineStyle: {
                color: '#000',
            }
        },
        axisLabel: {
            show: false //是否显示X轴内容
        },
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'category',
        gridIndex: 0,
        inverse: true,
        data: labelData,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisLine: { // Y轴轴线样式
            show: false,
            lineStyle: {
                color: '#D9D9D9',
            }
        }
    }, {
        type: 'category',
        gridIndex: 1,
        inverse: true,
        data: labelData,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false //是否显示轴线
        }
    }, {
        type: 'category',
        gridIndex: 2,
        inverse: true,
        data: labelData,
        position:'left',
        axisTick: {
            show: false
        },
        axisLabel: {
            margin: 10,
            color: '#666',
            textStyle: {
                fontSize: 14
            },
        },
        axisLine: {
            show: false //是否显示轴线
        }
    }],
    grid: [{
        top: 50,
        width: '34%',
        left: '10%',
        bottom: 30,
    }, {
        top: 50,
        left: '56%',
        right: '10%',
        bottom: 30,
    },{
        top: 50,
        left: '52.5%',
        bottom: 30,
    }],
    color: ['#2FACFA', '#F5A623'],
    series: [{
            name: '实体图书',
            type: 'bar',
            barWidth: '14',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
                normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#7BB2FF'
                    }, {
                        offset: 1,
                        color: '#4186FF'
                    }], false),
                    barBorderRadius: [6,0,0,6],
                    label: {
                        show: true,
                        position: 'left',
                        formatter: function(params) {
                            return (params.value * -1);
                        },
                        textStyle: {
                            fontSize: 14,
                            color: '#666',
                        },
                    }
                }
            },
            data: womanData
        },
        {
            name: '电子图书',
            type: 'bar',
            barWidth: '14',
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: '#00D0BF'
                    }, {
                        offset: 1,
                        color: '#05C399'
                    }], false),
                    barBorderRadius: [0,6,6,0],
                    label: {
                        show: true,
                        position: 'right',
                        formatter: function(params) {
                            return params.value;
                        },
                        textStyle: {
                            fontSize: 14,
                            color: '#666',
                        },
                    }
                }
            },
            data: manData
        }
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
