好看的折线图ECharts Gallery

20:11:45图表已生成
代码
var data1 = [{
    name: '自然学科0',
    value: 1,
    text: '人文社科',
    number: 100
},{
    name: '自然学科1',
    value: 0.5,
    text: '人文社科',
    number: 100
},{
    name: '自然学科2',
    value: 0.4,
    text: '人文社科',
    number: 100
},{
    name: '自然学科3',
    value: 0.8,
    text: '人文社科',
    number: 100
},{
    name: '自然学科4',
    value: 0.3,
    text: '人文社科',
    number: 100
}]
option = {
    backgroundColor: '#fff',
    title: {
        text: "学生成绩实时跟踪分析",
        subtext: "全面把控复习进度和易错题型",
        textStyle: {
            color: '#666',
            fontSize: '14',
        },
        subtextStyle: {
            color: '#666',
            fontSize: '14',
        },
        left: 'center',
        bottom: '15'
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "line",
            textStyle: {
                color: "#fff"
            },
            lineStyle: {
                color: '#ccc'
            }
        },
        formatter: function(params) {
            return '主题: '+params[0].data.name+'<br />主题平均测试系数: '+params[0].data.name+"<br />主题知识点个数: "+params[0].data.number+"<br />从属专题: "+params[0].data.text;
        }
    },
    grid: {
        borderWidth: 0,
        top: 110,
        bottom: 95,
        textStyle: {
            color: "#fff"
        }
    },
    legend: {
        x: '4%',
        top: '11%',
        textStyle: {
            color: '#90979c',
        },
        data: ['1']
    },


    calculable: true,
    xAxis: [{
        name: '主题',
        type: "category",
        axisLine: {
            lineStyle: {
                color: '#ccc'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#e7e7e7',
                type: 'dashed'
            }
        },
        axisTick: {
            "show": false
        },
        splitArea: {
            "show": false
        },
        axisLabel: {
            "interval": 0,
            show: true,
            rotate: '45'
        },
        data: [1, 2, 3, 4, 5]
    }],
    yAxis: [{
        name: '平均测试系数',
        type: "value",
        splitLine: {
            show: true,
            lineStyle: {
                color: '#e6e6e6',
                type: 'dashed'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#ccc'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            show: true,
        },
        splitArea: {
            show: false
        },
    }],
    series: [{
        name: "平均测试系数",
        type: "line",
        symbolSize: 12,
        symbol: 'circle',
        smooth: true, //关键点，为true是不支持虚线的，实线就用true
        color: ['#fff'], //折线条的颜色
        itemStyle: {
            normal: {
                lineStyle: {
                    width: 3,
                    type: 'solid', //'dotted'虚线 'solid'实线
                    color: '#ffcd8e'
                },
                borderColor: '#ff9c00',
                borderWidth: '3'
            }
        },
        data: data1
    }]
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
