echarts初次学习笔记

最新推荐文章于 2023-07-14 12:15:19 发布

wsdchong之小马过河

最新推荐文章于 2023-07-14 12:15:19 发布

阅读量1.3k

点赞数 4

分类专栏：数据可视化前端学习文章标签：可视化数据可视化 js

本文链接：https://blog.csdn.net/weixin_42875245/article/details/107722469

版权

前端学习同时被 2 个专栏收录

39 篇文章 1 订阅

订阅专栏

数据可视化

8 篇文章 1 订阅

订阅专栏

echarts学习笔记

前言：配置环境，熟悉代码；在系统中注释至少5种不同类型的echarts图表；

文章目录

echarts学习笔记

配置环境

根据拉勾招聘上的招聘介绍以及公司官网了解到。公司主要领域是智慧城市大数据分析挖掘和大数据的可视化，公司面向城市规划、交通规划、城市管理、国土管理、环境保护等部分，针对多源城市时空活动大数据（包括手机、智能交通系统如出租车、地铁、公交等数据）采集处理、分析挖掘、可视表达并提供智能决策支持和应用解决方案。
公司产品中使用到的技术有：GIS（QGis、PostGIS、PostgreSQL）、可视化（echarts、mapbox、three.js）

在这里我主要学习echarts，做图表的可视化。echarts是基于canvas标签的。

使用echarts的方法是：下载echarts.min.js，然后用script标签引用。

学习思路

我习惯学以致用，带着做产品的思路去学习，始终记住自己要干什么，怎么去解决学习过程中遇到的问题。学习的过程就会有趣好玩。

这个echarts是一个百度做的可视化神器。是一个JavaScript库。

echarts

是一个使用JavaScript实现的开源可视化库。通过下载echarts.min.js用script标签引入来使用。浏览器端图表可以选择canvas或SVG渲染。

echarts生成图表的配置：创建HTML页面、为echarts准备一个具备高宽的DOM容器、使用json格式配置。

我习惯用菜鸟教程来简单了解这些库，它的官网教程在这

一个可视化的JavaScript库，主要用于图表显示。本质是canvas，可以参考源代码造轮子。

mapbox

是为许多公司的网站提供订制在线地图的大型供应商。自2010年起，该公司快速拓展了订制地图的市场地位。官网在这里

mapbox gl js 是一个JavaScript库，使用webGL，以vector tiles和mapbox styles为来源，将它们渲染成互动式地图。

一个专用于地图显示的JavaScript库，主要用于显示地图。本质是webGL

three.js

一个跨浏览器的脚本，使用JavaScript函数库或API在浏览器中创建和展示动画的三维计算机图形。three.js使用webGL，源代码托管在GitHub。官网在这里

本质是webGL。可以参考造轮子。

Vue.js Examples

example.vue：vue框架中的例子。

echarts理论基础

五分钟上手echarts

五分钟上手echarts
在官网下载echarts；引用echarts；绘制一个简单的图表。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

自定义构建echarts

一般可以直接从CDN中获取构建好的echarts，也可以在GitHub中echarts/dist文件夹中获取构建好的echarts。这些都可以在浏览器端项目中使用。一般有如下三种定制。

完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。

我们也可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。

echarts基础概念概览

echarts实例：一个网页可以创建多个echarts实例。每个echarts实例可以创建多个图表和坐标系等等（用option来描述）。准备一个DOM节点（作为echarts的渲染容器），就可以在上面创建一个echarts实例。每个echarts实例独占一个DOM节点。

系列（series）：一组数值以及他们映射成的图。一个系列包含的要素至少有一组数值、图表类型（series.js）以及其他关于这些数据如何映射成图的参数。series.type中可以设置图表类型，如饼图pie、折线图line、柱状图bar等；在series.data中设置每个系列中所需要的数据。

组件（component）：在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、…我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。

用option描述图表：option表述了数据、数据如何映射成图形、交互行为。

更多内容请看：个性化图表的样式、echarts的样式简介、使用dataset管理数据、在图表中加入交互组件、移动端自适应、数据的视觉映射、echarts中的事件和行为、富文本标签、使用echarts GL实现基础的三维可视化。

两个demo

首先思考需要用到哪些demo。由于是要做一个地铁系统。确定做：显然柱状图、折线图是必备的，饼状图作为补充。在这初步的三个demo的基础上还需要加入富文本标签。然后应该就可以应付大部分图表了。

然后在echarts官网的实例中选demo。

最后在GitHub上下载echarts.min.js。用script标签引入。

柱状图（模拟日均客运总量）

样子：

思路：有三组数据：工作日、周末、节假日；横坐标是2010到2019，纵坐标是0到600万人次。

参考：官网上的例子。修改option；

var option = {
	title: {text: '仿日均客运总量柱状图'},
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '工作日', '周末', '节假日'],
            ['2010', 53.5, 57.3, 56.8],
            ['2011', 174.2, 158.2, 79.2],
            ['2012', 183.4, 172.5, 174.4],
            ['2013', 279.3, 266.3, 211.2]
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ],
};

折线图（月度客运总量）

样子：

思路：2010到2019共十组数据，横坐标是1月到12月；

参考官网例子，修改option；

wsdchong之小马过河

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
echarts初次学习笔记

echarts学习笔记前言：配置环境，熟悉代码；在系统中注释至少5种不同类型的echarts图表；文章目录echarts学习笔记配置环境学习思路echartsmapboxthree.js[Vue.js Examples](https://vuejsexamples.com/)echarts理论基础五分钟上手echarts自定义构建echartsecharts基础概念概览两个demo柱状图（模拟日均客运总量）折线图（月度客运总量）配置环境根据拉勾招聘上的招聘介绍以及公司官网了解到。公司主要领域是智慧城
复制链接

扫一扫