C/C++教程

可视化学习笔记 - ECharts

本文主要是介绍可视化学习笔记 - ECharts，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

  • 一、ECharts概述
    • （一）ECharts官网
  • （二）使用步骤
  • 二、ECharts案例
    • （一）直接基于假数据绘制条形图
      • 1、创建PyCharm项目 - EChartsDemo
      • 2、在项目里添加ECharts和jQuery
      • 3、创建页面 - demo01.html
      • 4、课堂练习 - 绘制各个班级男女人数条形图

一、ECharts概述

（一）ECharts官网

http://echarts.apache.org/zh/
在这里插入图片描述

（二）使用步骤

  1. 导入ECharts库
  2. 初始化ECharts
  3. 进行参数配置
  4. 可视化呈现

二、ECharts案例

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

1、创建PyCharm项目 - EChartsDemo

在这里插入图片描述
在这里插入图片描述

2、在项目里添加ECharts和jQuery

在这里插入图片描述

3、创建页面 - demo01.html

在这里插入图片描述

  • 导入ECharts和jQuery
    在这里插入图片描述

  • 做一个简单的界面
    在这里插入图片描述

  • 在浏览器打开，查看效果
    在这里插入图片描述

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

  • 定义按钮单击事件，先定义两个数组
    在这里插入图片描述

  • 刷新页面，查看效果（按F12或单击右键选择“检查”——针对谷歌浏览器）
    在这里插入图片描述

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

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

  • 可视化呈现
    在这里插入图片描述

  • 刷新页面，查看结果
    在这里插入图片描述

4、课堂练习 - 绘制各个班级男女人数条形图

在这里插入图片描述

这篇关于可视化学习笔记 - ECharts的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航