Apache ECharts
关注
分享
扫一扫
文章平均质量分 75
ECharts是一个使用JavaScript实现的开源可视化库, 涵盖各行业图表, 满足各种需求。
自由与束缚JavaJavaScript
这个作者很懒，什么都没留下…
展开
-
012_图例
1. 图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列, 通过点击对应数据列的标记, 可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。2. 图例布局2.1. 图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致, 可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。2.2. legend.type, 图例的类型。可选值: 'plain'普通图例, 缺省就是普通图例; 'scroll'可滚动翻页原创 2022-03-17 20:35:04 · 11435 阅读 · 1 评论 -
011_坐标轴
1. x轴和y轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据。2. 普通的二维数据坐标系都有x轴和y轴, 通常情况下, x轴显示在图表的底部, y轴显示在左侧, 一般配置如下:option = { xAxis: { // ... }, yAxis: { // ... }};3. x轴常用来标示数据的维度, 维度一般用来指数据的类别, 是观察数据的角度, 例如"销售时间"、"销售地点"、"产品名称"等。y轴常常用来原创 2022-03-17 12:42:32 · 1545 阅读 · 0 评论 -
010_数据集
1. 数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在series.data中设置数据, 但是从ECharts4支持数据集开始, 更推荐使用数据集来管理数据。因为这样, 数据可以被多个组件复用, 也方便进行"数据和其他配置"分离的配置风格。毕竟, 在运行时, 数据是最常改变的, 而其他配置大多并不会改变。2. 最简单数据集2.1. 代码<!DOCTYPE html><html> <head> <meta charset="原创 2022-03-16 17:52:22 · 1347 阅读 · 0 评论 -
001_ECharts入门
1. ECharts介绍1.1. ECharts是一个使用JavaScript实现的开源可视化库, 涵盖各行业图表, 满足各种需求。1.2. ECharts遵循Apache-2.0开源协议, 免费商用。1.3. ECharts兼容当前绝大部分浏览器(IE8/9/10/11, Chrome, Firefox, Safari等)及兼容多种设备, 可随时随地任性展示。1.4. ECharts官网链接:https://echarts.apache.org/zh/index.html。2. .原创 2022-03-14 16:47:43 · 1138 阅读 · 0 评论 -
002_图表容器及大小
1. 在Html中定义有宽度和高度的父容器(推荐)1.1. 通常来说, 需要在Html中先定义一个<div>节点, 并且通过CSS使得该节点具有宽度和高度。初始化的时候, 传入该节点, 图表的大小默认即为该节点的大小, 除非声明了opts.width或opts.height将其覆盖。<div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript"原创 2022-03-14 19:42:58 · 588 阅读 · 0 评论 -
003_颜色主题
1. 最简单的更改全局样式的方式, 是直接采用颜色主题(theme)。2. ECharts5除了一贯的默认主题外, 还内置了'dark'主题。3. dark主题例子3.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>dark主题</title> <!-- 引入echarts.js --> <scri原创 2022-03-15 09:20:12 · 303 阅读 · 0 评论 -
004_柱状图
1. 柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。2. 设置柱状图的方式, 是将series的type设为'bar'。3. 最简单的柱状图3.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>最简单的柱状图</title> <!-- 引入echarts.js --> <s原创 2022-03-15 16:12:38 · 891 阅读 · 0 评论 -
005_折线图
1. 折线图主要用来展示数据项随着时间推移的趋势或变化。2. 最简单的折线图2.1. 我们通过xAxis将横坐标设为类目型, 并指定了对应的值; 将yAxis的类型设定为数值型。在series中, 我们将系列类型设为line, 并且通过data指定了折线图点的取值。这样, 就能得到一个最简单的折线图了。2.2. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <原创 2022-03-15 16:45:13 · 1306 阅读 · 0 评论 -
006_饼图
1. 饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比, 它的数据格式比柱状图更简单, 只有一维的数值, 不需要给类目。因为不在直角坐标系上, 所以也不需要xAxis和yAxis。2. 例子2.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>ECharts饼图</title> <!-- 引入echarts.js原创 2022-03-15 09:23:54 · 488 阅读 · 0 评论 -
007_散点图
1. 散点图, 也是一种常见的图表类型。散点图由许多"点"组成, 有时, 这些点用来表示数据在坐标系中的位置(比如: 在笛卡尔坐标系下, 表示数据在x轴和y轴上的坐标; 在地图坐标系下, 表示数据在地图上的某个位置等); 有时, 这些点的大小、颜色等属性也可以映射到数据值, 用以表现高维数据。2. 最简单的散点图2.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> &原创 2022-03-15 18:14:44 · 2410 阅读 · 0 评论 -
008_直接的样式设置
1. 直接的样式设置是比较常用设置方式。纵观ECharts的option中, 很多地方可以设置itemStyle、lineStyle、areaStyle、label等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。2. 一般来说, ECharts的各个系列和组件, 都遵从这些命名习惯, 虽然不同图表和组件中, itemStyle、label等可能出现在不同的地方。3. 图形样式series-type.itemStyle3.1. series-type.ite原创 2022-03-16 10:13:40 · 1424 阅读 · 0 评论 -
009_调色盘和高亮样式
1. color调色盘1.1. 调色盘, 可以在option中设置。它给定了一组颜色, 图例、系列会自动从其中选择颜色。可以设置全局的调色盘, 也可以设置系列自己专属的调色盘。option = { // 全局调色盘。 color: [ '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7原创 2022-03-16 09:45:24 · 526 阅读 · 0 评论