C/C++教程

可视化笔记-ECharts

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

文章目录

  • 一、ECharts官网
  • 二、使用步骤
  • 三、ECharts案例
    • (一)、直接基于假数据绘制条形图
      • 1.创建pyCharm项目
      • 2.在项目里面添加Echarts和jQuery
      • 3.创建一个页面，demo01.html
  • 四、课堂练习
      • 绘制男女人数条形图

一、ECharts官网

http://echarts.apache.org/zh/

image-20210602082941542

二、使用步骤

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

三、ECharts案例

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

1.创建pyCharm项目

image-20210602083347832

2.在项目里面添加Echarts和jQuery

image-20210602083809631

3.创建一个页面，demo01.html

image-20210602083908428

  • 导入ECharts和jQuery

image-20210602084054896

  • 做一个简单的界面

image-20210602084617899

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

</div>
</body>
</html>
  • 获取页面元素

image-20210602090439793

  • 定义按钮单击事件

image-20210602091146028

  • 查看运行结果

    image-20210602091209678

  • 初始化ECharts

image-20210602092209366

参数配置

 //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轴数据
            yAxis: {},

            //y轴数据
            xAxis: {
                data: class_list
            },
            series: [
                {
                    name: "总人数",
                    type:"bar",
                    data: number_list,
                    itemStyle:{
                        normal:{
                            color:"#aa0000"
                        }

                    },


                }
            ]

        };
  • 可视化呈现
//3.可视化呈现
my_box.setOption(option)

  • 查看效果

    image-20210602094407504

四、课堂练习

绘制男女人数条形图

  • 添加男生数组和女生数组

image-20210602095900824

  • 再修改series里面的数据，添加一组对象

image-20210602095952778

  • 查看网页效果

image-20210602100014933

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