Echarts入门（一）| 折线图 柱形图 饼图

最新推荐文章于 2023-01-15 12:17:52 发布
最新推荐文章于 2023-01-15 12:17:52 发布
阅读量1.4k 收藏 4
点赞数 1
分类专栏： 数据可视化 文章标签： 可视化 数据可视化 js python Echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SartinL/article/details/106984101
版权

这里写目录标题

Echarts是什么

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

echarts.min.js的下载：

从官网上点击下载后进入选择GitHub

https://github.com/apache/incubator-echarts/tree/4.8.0/dist

然后点击echarts.min.js进入，选择Raw，然后Ctrl+S即可另存为

由于是国外的镜像站点，会比较慢，可私信我发给你
在这里插入图片描述

写一个Flask进行前端展示 echart.py

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/echarts')
def echarts():
    return render_template('echarts.html')

if __name__ == "__main__":
    app.run(debug=True)

引入Echarts

<head>
    <meta charset="UTF-8">
    <script src="/static/js/echarts.min.js"></script>
    <!-- cdn -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
</head>

准备一个足够高宽的div容器

<div id="line" style="width: 600px; height: 400px;"></div>
<div id="bar" style="width: 600px; height: 400px;"></div>
<div id="pie" style="width: 600px; height: 400px;"></div>
折线图

折线图是排列在工作表的列或行中的数据可以绘制到折线图中。折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。 在折线图中，类别数据沿水平轴均匀分布，所有值数据沿垂直轴均匀分布。

<body>
    <div id="line" style="width: 600px; height: 400px;"></div>
    <script>
        var line_chart =  echarts.init(document.getElementById("line"));
        var line_option = {
            title:{
                text:"Line 入门"
            },
            tooltip:{
                trigger:"item"    // 触发  axis
            },
            xAxis:{
                type:'category',   // 类别
                data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis:{
                type:'value'    // 数值
            },
            series:[
                {
                    data:[100, 200, 300, 400, 500, 600, 700],
                    type:'line'
                }
            ]
        }
        line_chart.setOption(line_option);
</body>

如图所示：
在这里插入图片描述

柱状图

柱形图，又称长条图、柱状统计图（英文：bar chart）亦称条图、条状图、棒形图，是一种以长方形的长度为变量的统计图表。长条图用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。长条图亦可横向排列，或用多维方式表达。

// 初始化Echarts
        var bar_chart = echarts.init(document.getElementById("bar"));
        var bar_option = {
            title:{
                text:"Bar 入门"
            },
            xAxis:{
                type:'category',
                data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            legend:{
                data:["数据"]
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'数据',
                    data:[120, 323, 230, 110, 50, 90, 130],
                    type:'bar',
                    showBackground:true,
                    backgroundStyle:{
                        color:'rgba(220, 220, 220, 0.8)'
                    }
                }
            ]
        };
        bar_chart.setOption(bar_option);

如图所示：
在这里插入图片描述

饼图

饼图，常用于统计学模块。2D饼图为圆形，手画时，常用圆规作图。

仅排列在工作表的一列或一行中的数据可以绘制到饼图中。饼图显示一个数据系列 （数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列。）中各项的大小与各项总和的比例。饼图中的数据点 （数据点：在图表中绘制的单个值，这些值由条形、柱形、折线、饼图或圆环图的扇面、圆点和其他被称为数据标记的图形表示。相同颜色的数据标记组成一个数据系列。）显示为整个饼图的百分比。

// pie初始化
        var pie_chart = echarts.init(document.getElementById("pie"));
        var pie_option = {
            tooltip:{
                trigger:'item',
                formatter:'{a} <br/> {b}: {c} ({d}%)'
            },
            legend:{
                orient: 'vertical',
                left: 10,
                data:['新浪微博', '腾讯视频', '爱奇艺', '优酷', '芒果TV']
            },
            series:[
                {
                    name:'访问来源',
                    type:'pie',
                    radius:['40%', '70%'],
                    label:{     // 圆中间的对应标签
                        show:false,   // 是否直接显示
                        position:'center'
                    },
                    emphasis:{
                        label:{
                            show:true,
                            fontSize:'30',
                            fontWeight:'bold'
                        }
                    },
                    labelLine:{
                        show: false
                    },
                    data:[
                        {value: 335, name:'新浪微博'},
                        {value: 310, name:'腾讯视频'},
                        {value: 234, name:'爱奇艺'},
                        {value: 124, name:'优酷'},
                        {value: 900, name:'芒果TV'},
                    ]
                }
            ]
        }
        pie_chart.setOption(pie_option);

如图所示：
在这里插入图片描述

代码整合：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/js/echarts.min.js"></script>
    <!-- cdn -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
</head>
<body>
    <div id="line" style="width: 600px; height: 400px;"></div>
    <div id="bar" style="width: 600px; height: 400px;"></div>
    <div id="pie" style="width: 600px; height: 400px;"></div>
    <script>
        var line_chart = echarts.init(document.getElementById("line"));
        var line_option = {
            title:{
                text:"Line 入门"
            },
            tooltip:{
                trigger:"item"    // 触发  axis
            },
            xAxis:{
                type:'category',   // 类别
                data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis:{
                type:'value'    // 数值
            },
            series:[
                {
                    data:[100, 200, 300, 400, 500, 600, 700],
                    type:'line'
                }
            ]
        }
        line_chart.setOption(line_option);


        // 初始化Echarts
        var bar_chart = echarts.init(document.getElementById("bar"));
        var bar_option = {
            title:{
                text:"Bar 入门"
            },
            xAxis:{
                type:'category',
                data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            legend:{
                data:["数据"]
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'数据',
                    data:[120, 323, 230, 110, 50, 90, 130],
                    type:'bar',
                    showBackground:true,
                    backgroundStyle:{
                        color:'rgba(220, 220, 220, 0.8)'
                    }
                }
            ]
        };
        bar_chart.setOption(bar_option);

        // pie初始化
        var pie_chart = echarts.init(document.getElementById("pie"));
        var pie_option = {
            tooltip:{
                trigger:'item',
                formatter:'{a} <br/> {b}: {c} ({d}%)'
            },
            legend:{
                orient: 'vertical',
                left: 10,
                data:['新浪微博', '腾讯视频', '爱奇艺', '优酷', '芒果TV']
            },
            series:[
                {
                    name:'访问来源',
                    type:'pie',
                    radius:['40%', '70%'],
                    label:{     // 圆中间的对应标签
                        show:false,   // 是否直接显示
                        position:'center'
                    },
                    emphasis:{
                        label:{
                            show:true,
                            fontSize:'30',
                            fontWeight:'bold'
                        }
                    },
                    labelLine:{
                        show: false
                    },
                    data:[
                        {value: 335, name:'新浪微博'},
                        {value: 310, name:'腾讯视频'},
                        {value: 234, name:'爱奇艺'},
                        {value: 124, name:'优酷'},
                        {value: 900, name:'芒果TV'},
                    ]
                }
            ]
        }
        pie_chart.setOption(pie_option);
    </script>
</body>
</html>

PS：以上数据纯属虚构！！

秃头崽崽
关注
专栏目录
ECHARTS饼状图和折线图
weixin_44540414的博客
06-04 2085
开发工具与关键技术： Visual Studio 2015 mvc 作者：彭水清 撰写时间：2019/6/1 在绘图前我们需要为 ECharts 准备一个具备高宽的 dom 容器。 <div class="tab-content" id="nav-tabContent"> @*饼状图*@ <div class="tab-pane fade show...
Echarts入门的简单学习---折线图、饼图
iUserWang
09-03 1021
我们在展示数据时，除了使用表格外，还希望使用折线图、饼状图、柱形图、环形图等图形化展示数据，让数据更直观，同时也可以让我们的界面展示更加丰富。 其中Echarts通过提供方便丰富的可视化图表，让前端数据可视化更便捷，下面就一起来学习一下使用吧。 一、获取 ECharts 首先，要获取echart的包，把相关引用放入你的项目中。可以直接在官网下载完整版本或者在 ECharts 的 GitHub 上...
Echarts学习一：制作简单的柱形图、折线图、饼图
qingo00o的博客
04-21 1228
具体可以参考官网文档，已经写的很详细了：个性化图表样式 ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。ECharts 中的饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis。饼图的Data包含 name 和 value 属...
ECharts 柱形图 饼状图和折线图
欢迎来到我的博客
12-22 993
1、认识 ECharts ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生...
9.Pyecharts折线图
阿古朵
07-11 725
#普通 import pyecharts.options as opts from pyecharts.charts import Line low=[-1,0,-2,0,-1,0,3] height=[12,14,16,16,18,17,18] lab=["周一","周二","周三","周四","周五","周六","周日"] line=Line()#生成line类型图标、 line.add_xaxis(lab)#添加x轴 line.add_yaxis("低温",low) #添加y轴数据 line.ad
echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)
ccxcuixia
02-15 5986
文末附带github本文所有源代码，以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦 1.柱形图 先来看看效果啦 重要代码如下所示，必须引入echarts.js文件，之后初始化echarts,最终的是修改option中的配置项与数据，echarts学习网页，这里面有许多配置项，根据你的需要修改啦 <head> <...
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts是一款由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括但不限于饼图、折线图和柱状图。在这个项目中，Echarts与AJAX和Java后端结合，利用MySQL数据库来实现动态的数据展示。接下来，...
Echarts+ajax+java+mysql实现饼图+折线图+柱状图-Java代码类资源
02-23
Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如饼图、折线图、柱状图等，用于在Web应用中展示数据。在这个Java代码类资源中，开发者利用Echarts与AJAX、Java以及MySQL数据库相结合，实现了...
System.Drawing DrawData 绘制饼图 折线图 柱形图等的帮助类
02-28
/// 绘制折线图 例如DrawData.DrawPolyonLine(pictureBox1.Width,pictureBox1.Height ,"2000-3000年比例","6,8,10,12,14,16,18,20,22","个","1,2,3,4,5,6,7,8,9,10,11,12","年","12,6,8,10,12,14,16,18,20,2,11,11...
java实现各种数据统计图（柱形图，饼图，折线图）
08-30
`JFreeChart`库是一个强大的工具，可以用来创建各种类型的图表，包括柱形图、饼图和折线图。以下是对这些知识点的详细说明： **JFreeChart库** `JFreeChart`是一个开源Java库，用于生成高质量的2D图表。它支持多种...
echarts 盒形图使用的dataTool工具
03-22
define(['echarts', 'dataTool', 'require', 'bootstrap-slider', '../header/header' ], function (ec,dt ,require, bs) { var app = require('../app'); app.controller('boxplotController', function ($scope, $http, $uibModal) { var angular = require('angular'); $scope.init = function () { $scope.open2 = function () { $scope.popup2.opened = true; }; $scope.yAxisList=dt.prepareBoxplotData($scope.data.yAxis); data: $scope.yAxisList.boxData,
Echarts折线图和柱状图的使用
07-31
代码包括jsp文件，js文件，java文件。展示了Echarts中折线图和柱状图的使用，以及折线图的点击事情和自定义按钮等功能。
pyecharts 入门之折线图（二）
最新发布
m0_60495479的博客
01-15 473
pyecharts 关于折线图的绘制
ECHARTS的基本使用：柱状图、折线图、饼图等
热门推荐
Super girl的专栏
06-30 2万+
Echarts
关于Echarts的柱状图、折线图
Something的博客
10-21 666
项目中用了多次Echarts图表，由于内置属性太多，今天对柱状图、折线图样式以及渲染方法做一个总结。 （1）柱状图 <div id="bookCount" style=" width: 500px;height: 500px;"></div> $(function () { initbookStatusCount(); bookStatusCoun...
Echarts入门实例（绘制柱状图、折线图、散点图、K线图、饼状图、雷达图）
学习笔记
03-31 2523
1.概述 接下来使用Echarts绘制柱状图、折线图、散点图、K线图、饼状图、雷达图。 整个工程的百度云链接：https://pan.baidu.com/s/1_gyBb6pT6_fizE3SSKkO8w 提取码：4zia 。 也可以去看官方教程，不过下载了上面的源码后，例子直接可以运行，省了一点时间，官方教程网址如下，本文参考（抄袭）官方教程：https://echarts.baidu...
echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）
书写人生
02-08 2344
echarts3是向下兼容echarts2的，所以echarts2切换到echarts3基本无需改代码。饼图、柱形图、折线图：用的echarts2的配置项，但是能正常显示代码片段：[javascript] view plain copy    function loadCharts(orgCode){      /** 构建故障原因饼图 */          myChart1.showLoadi...
echarts 写一个柱状表图
yinglingsiji的博客
11-15 453
今天在项目中需要写一个图示展示数据，然后项目中用的echarts 插件，本人没写过图示，第一次写，然后中间有问题去查找，感觉有点用，记录一下，以后用好找！ 页面代码： <div class="white-box"> <!-- 表格 --> <div id="main" style="width: 1500px;height:700px;">&l...
echarts图表（折线图、柱形图）
dada_6666的博客
10-19 767
echarts图表（折线图、柱形图）
高性能MFC图表控件：折线图、饼图、柱形图实现
"High-speed Charting Control是Cedric Moonen开发的一款用于MFC环境下的高效图表绘制控件，能够绘制2D数据，包括折线图、饼图和柱形图等。该控件适用于Windows平台，支持从VC6到VC7的版本，以及Windows NT4、Win2K...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值