可视化笔记-ECharts

最新推荐文章于 2024-07-12 20:49:16 发布

sdascfaseefcqxa

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量102

点赞数

分类专栏：笔记文章标签：数据可视化可视化 js html

本文链接：https://blog.csdn.net/qq_46301429/article/details/117458976

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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'
                        }
                    }
                }
            ]
            };

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

sdascfaseefcqxa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可视化笔记-ECharts

ECharts官网1，创建python项目2，导入Echarts和Query3，创建页面 -demo01.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.min.js"></script> &lt
复制链接

扫一扫