ECharts学习笔记

最新推荐文章于 2022-09-12 19:02:25 发布

erwaplus

最新推荐文章于 2022-09-12 19:02:25 发布

阅读量577

点赞数 2

文章标签：可视化

本文链接：https://blog.csdn.net/erwaplus/article/details/117595907

版权

本文详细介绍了如何使用ECharts进行数据可视化，包括直接使用假数据绘制条形图，从JSON文件读取数据并可视化，以及结合爬虫技术，从职友集网站抓取Python工程师需求量数据，进行可视化展示。

摘要由CSDN通过智能技术生成

一、直接基于假数据绘制条形图

1、常见PyCharm项目–eChartsDemo
在这里插入图片描述
2、在项目里添加ECharts和jQuery

3、创建页面–demo01.html
1)导入ECharts和jQuery并定义一个展示图形的界面，用一个按钮来控制是否显示。

2）在脚本中获取元素
在这里插入图片描述
3）定义按钮单击事件，先定义两个数组

4）初始化ECharts

5)进行参数配置

var options={
   
            //标题
            title:{
   
                text:"19级各班人数条形图",
                x:"center",
                y:"top",
                textAlign:"left",
                textStyle:{
   
                    fontFamily:"楷体",
                    fontSize:10,
                    textStyle:"bold",
                }
            },
            //图例
            legend:{
   
                left:"right"
            },
            xAxis:{
   
                data:class_list
            },
            yAxis:{
   },
            //数据信息
            series:[
                {
   
                    name:"男生总人数",
                    type:"bar",
                    data:boy_list
                },
                {
   
                    name:"女生总人数",
                    type:"bar",
                    data:girl_list
                }

            ]
        }

6）可视化呈现
在这里插入图片描述
7）打开页面，查看效果

二、读取JSON文件，将数据可视化

1、创建JSON数据文件–class.json

[
  {
   
    "class": "19大数据2班",
    "boys": 20,
    "girls": 13
  },
  {
   
    "class": "19软件1班",
    "boys": 26,
    "girls": 14
  },
  {
   
    "class": "19大数据1班",
    "boys": 18,
    "girls": 27
  },
  {
   
    "class": "19计应1班",
    "boys": 24,
    "girls": 12
  }