可视化笔记-ECharts

2021/6/2 10:51:23

编程Tag： echarts 可视化笔记绘制 box 条形图

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

文章目录

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

一、ECharts官网

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

二、使用步骤

导入Echarts库
初始化ECharts
进行参数配置
可视化呈现

三、ECharts案例

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

1.创建pyCharm项目

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

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

导入ECharts和jQuery

做一个简单的界面

<!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>

获取页面元素

定义按钮单击事件

查看运行结果
初始化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轴数据
            yAxis: {},

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

                    },


                }
            ]

        };

可视化呈现

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

查看效果

四、课堂练习

绘制男女人数条形图

添加男生数组和女生数组

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

查看网页效果

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

可视化笔记-ECharts

文章目录

一、ECharts官网

二、使用步骤

三、ECharts案例

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

1.创建pyCharm项目

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

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

四、课堂练习

绘制男女人数条形图

相关编程文章