可视化笔记-ECharts_en.qxa220382-优快云博客

该博客介绍了利用Python项目实现可视化的步骤。首先创建Python项目，接着导入Echarts和Query，然后创建页面demo01.html。还提及在脚本获取页面元素、初始化Echarts、进行参数配置以实现可视化。

1，创建python项目

在这里插入图片描述

2，导入Echarts和Query

在这里插入图片描述

3，创建页面 -demo01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <style>
        .box{
            width: 600px;
            height: 400px;
            border: 1px solid cornflowerblue;
        }
    </style>
</head>
<body>
<input type="button" value="显示条形图" class="btnShowBar">
<div class="box"></div>
</body>
</html>

效果图
在这里插入图片描述
在脚本获取页面元素

在这里插入图片描述

<script>
     //获取box
    var box = document.getElementsByClassName("box")[0]
    // 获取bthShowbar
    var bthShowbar = document.getElementsByClassName("bthShowBar")[0]
</script>

初始化Echarts
在这里插入图片描述

        // 1.初始化Echarts
        var my_box = echarts.init(box);

进行参数配置
在这里插入图片描述

        // 2.进行参数配置
        var option = {
            //标题
            title: {
                text: "19级各班人数条形图",
                x: "center",
                y: "top",
                textAlign: "left",
                textStyle: {
                    fontFamily: "楷体",
                    fontSize: 35,
                    textStyle: "bold",
                }
            },
            //图例
            legend:{
                left:"right"
            },
            // x轴数据
            xAxis:{
                data:class_list
            },
            // y轴数据
            yAxis:{},
            // 数据信息
            series: [
                {
                    name:'总人数',
                    type:"bar",
                    data:number_list,
                    itemStyle:{
                        normal:{
                            color:'#aa0000'
                        }
                    }
                }
            ]
            };

可视化
在这里插入图片描述
运行