网站搭建-django-学习成绩管理-13-ECharts

排行榜-柱状图
排行榜-折线图

// 更新图表1
var str_title = JSON.stringify(data.title_name);
var array_title = JSON.parse(str_title);
// x轴信息
var str_xaxis = JSON.stringify(data.xaxis);
var array_xaxis = JSON.parse(str_xaxis);
var chart_1 = echarts.init(document.getElementById("chart-1"));
chart_1.clear(); // 清空原图表
if (Array.isArray(array_xaxis) && array_xaxis.length === 0) {
    // 没有数据，清空即可
    alert("无数据");
} else {
    var str_y = JSON.stringify(data.y);
    var array_y = JSON.parse(str_y);
    var option = {
        xAxis: {
            type: 'category',
            data: array_xaxis
        },
        dataZoom: [{
            startValue: ''
        }, {
            type: 'inside'
        }],
        yAxis: {
            type: 'value'
        },
        series: [{
            data: array_y,
            type: 'bar',
            label: {
                show: true,
                position: 'inside'
            },
            showBackground: true,
            backgroundStyle: {
                color: '#e7e7e7'
            }
        }]
    };
    chart_1.setOption(option);
};

// 更新图表2
str_title = JSON.stringify(data.title_name);
array_title = JSON.parse(str_title);
// x轴信息
str_xaxis = JSON.stringify(data.xaxis);
array_xaxis = JSON.parse(str_xaxis);
chart_2 = echarts.init(document.getElementById("chart-2"));
chart_2.clear(); // 清空原图表
if (Array.isArray(array_xaxis) && array_xaxis.length === 0) {
    // 没有数据，清空即可
    alert("无数据");
} else {
    str_y = JSON.stringify(data.y);
    array_y = JSON.parse(str_y);
    option = {
        xAxis: {
            type: 'category',
            data: array_xaxis
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        dataZoom: [{
            startValue: ''
        }, {
            type: 'inside'
        }],
        yAxis: {
            type: 'value'
        },
        series: [{
            data: array_y,
            type: 'line',
        }]
    };
    chart_2.setOption(option);
}

col-md-6

第1部分
第2部分
<br></br>

dataZoom: [
    {
        startValue: ''
    },
    {
        type: 'inside'
    }
],