Apache Echarts简介|Echarts基本操作|配置
1. Echarts介绍ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库,兼容性强,底层依赖矢量图形库 ZRender ,提供直观,交互丰富,可高度个性化定制的数据可视化图表。开源免费它是开源免费的,也就是我们可以免费的使用 ECharts ,不需要缴纳任何的费用功能丰富它的功能非常的丰富,提供了各种各样的图表,支持各种各样的定制, 满足各种需求,比如折线图、柱状图
每个图表均配有对应的源代码以及知识点~~~~
详情可点开对应的图表学习!
各类常用图表总结在此!配合使用更方便~
https://blog.csdn.net/diviner_s/article/details/116072584
官方对应文件工具,有更详细的工具使用方法:
https://echarts.apache.org/zh/option.html
1. Echarts介绍
ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库,兼容性强,底层依赖矢量图形
库 ZRender ,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
- 开源免费
它是开源免费的,也就是我们可以免费的使用 ECharts ,不需要缴纳任何的费用 - 功能丰富
它的功能非常的丰富,提供了各种各样的图表,支持各种各样的定制, 满足各种需求,比如折线
图、柱状图、饼图、K线图等. 在他的官方示例中, 提供了上百种图表, 可以用 只有你想不到, 没有她
做不到 这句话来形容 - 社区活跃
ECharts
的社区非常活跃,意味着你可以和很多开发者讨论,遇到了ECharts
中不会的问题,也
很容易找到解决办法 - 多种数据的支持
可视化的含义就是将数据通过更加直观的图表的方式来呈现。图表只是一种呈现方式。最核心的其
实是数据。 ECharts 对数据格式的支持也是非常友好的。 ECharts 能够支持常见的 key-value 数
据格式,还能支持二维表,或者 TypedArray 格式的数据 - 流数据的支持
对于超大的数据量而言, 数据本身的体量可能就非常消耗资源, 而 ECharts 可以支持对流数据的
动态渲染,加载多少数据就渲染多少数据,省去了漫长的数据加载的等待时间, 他还提供了增量渲
染的技术, 只渲染变化的数据, 提高系统的资源利用. - 移动端的优化
- 跨平台
商业智能BI的实现方式主要有微软的BI和Power-BI, 它比报表类更加高端, 他除了可以对数据生成报
表之外, 还可以提出决策依据,帮助企业做出明智的业务经营决策
编码类, 这种是需要程序员参与, 程序员可以对接到公司现有的系统架构中进行编码, 实时生成动态的
图表.常见的使用库有ECharts.js和D3.js, 我们项目中使用的是ECharts.js , 他是百度公司开发
的一套开源可视化库, D3.js是国外的一个可视化库, 在封装性\易用性\效果上, ECharts要更优秀
一些. - 酷炫的特效,
- 数据的三维可视化
…
ECharts 能够做出各种各样漂亮的图表,它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便,
功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址:
https://echarts.apache.org/zh/index.html
2. Echarts简单使用
Echarts 的使用简单分为5个步骤:
- 步骤1:引入
Echarts.js
文件
<script src = "js/echarts.min.js:"> </script>
- 步骤2:准备一个呈现图表的盒子
这个盒子通常来说就是我们熟悉的div
(标签对象),这个div
决定了图表显示在哪里
<div id="main" style = "width:600px;height:400px"> </div>
上面的代码给出了一个宽为600像素,高为400像素,id为main的DOM容器。
- 步骤3:初始化
echarts
实例对象
这个步骤中,通过echarts.init
方法初始化一个 echarts 实例,并且是用来指明图表最终显示在哪里的DOM元素
var myChart = echars.init(document.getElementById('main'))
- 步骤4:准备配置项
这一步我们确定最终的效果,由配置项决定显示那种图表。
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
- 步骤5:将配置项设置给
echarts
实例对象
myChart.setOption(option)
最终效果:
一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,
其他的代码 都是固定不变的.
3. 相关配置
xAxis
直角坐标系 中的x
轴, 如果type
属性的值为category
,那么需要配置data
数据, 代表在x
轴的
呈现yAxis
直角坐标系 中的y
轴, 如果type
属性配置为value
, 那么无需配置data
, 此时y
轴会自动去
series
下找数据进行图表的绘制series
系列列表。每个系列通过type
决定自己的图表类型,data
来设置每个系列的数据
配置项都是以键值对的形式存在, 并且配置项有很多, ECharts
的学习大多是针对于这些配置项的, 对于
配置项的学习, 不用死记硬背, 需要的时候查一查官方文档即可. 网址:
https://echarts.apache.org/zh/option.html 。
更多推荐
所有评论(0)