2021-06-04

最新推荐文章于 2024-09-10 14:15:01 发布

m0_54159554

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量69

点赞数 2

分类专栏：薪火工作室文章标签： html

本文链接：https://blog.csdn.net/m0_54159554/article/details/117574389

版权

薪火工作室专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echarts图表分析成绩

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="D:\js\echarts.min(1).js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的div，初始化echarts实例接下来的使用就跟之前一样，初始化图表，设置配置项
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            background: 'rgb(128, 128, 128)',
            title: {
                text: 'XX班成绩分析表',
            },
            tooltip: {

            },
            legend: {
                data: ['成绩','趋势','比例']
            },
            xAxis: {
                data: ["0-60", "60-70", "70-80", "80-90", "90-100"]
            },

            yAxis: { min: 0, max: 50, },//规定Y轴的范围

            series: [{
                name: '成绩',
                type: 'bar',//柱形图
                data: [15, 20, 40, 10, 15]
            },
            {
                name: '趋势',
                itemStyle: { color: 'red', },
                type: 'line',//折线图
                data: [15, 20, 40, 10, 15]
            },
            {
                name: '比例',
                type: 'pie',//饼图
                // roseType: 'angle',
                //把饼图显示成南丁格尔图
                radius: '48%',
                left: '60%',
                top: '-40%',
                data: [
                    { value: 15, name: 'E(0-60)' },
                    { value: 20, name: 'D(60-70)' },
                    { value: 40, name: 'C(70-80)' },
                    { value: 10, name: 'B(80-90)' },
                    { value: 15, name: 'A(90-100)' }
                ]
            },
            ]

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>