缩放样式修改+固定Y轴ECharts Gallery

20:11:45图表已生成
代码
var getsrlb = ['体育部', '中法核工程与技术学院', '国际翻译学院', '数据科学与计算机学院（软件学院）', '岭南学院', '生命科学学院', '马克思主义学院', '法学院（知识产权学院、中英国际海事法学院）', '药学院', '逸仙学院', '大气科学实验', '电子与通信工程学院', '地理科学与规划学院', '传播与设计学院']; //数据点名称
var getsrje = [2306, 1936, 1553, 1320, 998, 606, 566, 553, 420, 398, 365, 290, 222, 214];

//计算最大值  
function calMax(arr) {
    let max = 0;
    arr.forEach((el) => {
        el.forEach((el1) => {
            if (!(el1 === undefined || el1 === '')) {
                if (max < el1) {
                    max = el1;
                }
            }
        })
    })
    let maxint = Math.ceil(max / 9.5);
    //不让最高的值超过最上面的刻度    
    let maxval = maxint * 10;
    //让显示的刻度是整数    
    return maxval;
}
var max = Math.ceil(calMax([getsrje]) / 100) * 100;

option = {
    backgroundColor: '#fff',
    grid: {
        left: "30",
        right: "15",
        bottom: "35",
        top: "60",
        containLabel: true,
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none'
        },
        formatter: function(params) {
            return params[0].name + '<br>开课门数: ' + params[0].value + '门'
        }
    },
    xAxis: {
        type: 'category',
        data: getsrlb,
        axisLabel: {
            //interval: 0,
            formatter: function(value) {
                var ret = ""; //拼接加\n返回的类目项  
                var maxLength = 6; //每项显示文字个数  
                var valLength = value.length; //X轴类目项的文字个数  
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                if (rowN > 1) //如果类目项的文字大于6,
                {
                    for (var i = 0; i < rowN; i++) {
                        var temp = ""; //每次截取的字符串  
                        var start = i * maxLength; //开始截取的位置  
                        var end = start + maxLength; //结束截取的位置  
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                        temp = value.substring(start, end) + "\n";
                        ret += temp; //凭借最终的字符串  
                    }
                    return '{a|' + ret + '}';
                } else {
                    return value;
                }
            },
            rich: {
                a: {
                    lineHeight: 18,
                    fontSize: 13
                }
            },
            margin: 10,
            color: '#999999',
            textStyle: {
                fontSize: 13
            },
        },
        axisLine: {
            lineStyle: {
                color: '#8E8E8E',
            }
        },
        axisTick: {
            show: false
        },
    },
    yAxis: {
        name: '门数(门)',
        nameTextStyle: {
            color: '#666666',
            fontSize: 13,
            padding: [0, 0, 0, 50]
        },
        min: 0,
        max: max, // 计算最大值
        interval: max / 5, //  平均分为5份
        splitNumber: 5,
        axisLabel: {
            formatter: function(value) {
                num = value

                if (num && num != 'undefined' && num != 'null') {
                    let numS = num;
                    numS = numS.toString();
                    numS = numS.replace(/,/gi, '');
                    return numS;
                } else {
                    return num;
                }
            },
            color: '#999999',
            textStyle: {
                fontSize: 13
            },
        },
        axisLine: {
            lineStyle: {
                color: '#8E8E8E',
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: '#D8D8D8',
            }
        }
    },
    dataZoom: [{
        show: true,
        height: 8,
        xAxisIndex: [0],
        bottom: 10,
        startValue: 0,
        endValue: 8,
        handleIcon: "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",
        handleSize: "100%",
        handleStyle: {
            color: "#ADADAD",
            //shadowColor: "#B1B5B9",
            //shadowBlur: 5,
        },
        backgroundColor: "transparent",
        fillerColor: "#ADADAD",
        dataBackground: {
            lineStyle: {
                color: "transparent",
            },
            areaStyle: {
                color: "transparent",
            },
        },
        borderColor: "transparent",
    }],
    series: [{
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        data: getsrje,
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(24,144,255, 0.3)'
                }, {
                    offset: 0.8,
                    color: 'rgba(24,144,255, 0)'
                }], false),

            },
        },
        lineStyle: {
            normal: {
                width: 3,
                color: '#1890FF', // 线条颜色
                shadowColor: 'rgba(29,90,182,0.36)',
                shadowBlur: 10,
                shadowOffsetY: 10,

            },
        },
        itemStyle: {
            normal: {
                color: '#fff',
                borderColor: '#1890FF',
                borderWidth: 3,
            }
        },

    }]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
