ECharts的基本使用
ECharts是百度公司开源的一个使用实现的开源可视化库,兼容性强,底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。开源免费它是开源免费的,也就是我们可以免费的使用ECharts,不需要缴纳任何的费用功能丰富它的功能非常的丰富,提供了各种各样的图表,支持各种各样的定制,满足各种需求,比如折线图、柱状图、饼图、K线图等.在他的官方示例中,提供了上百种图表,可以
1.ECharts的基本使用
1.1.ECharts的介绍
ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库,兼容性强,底层依赖矢量图形库 ZRender ,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
开源免费
- 它是开源免费的,也就是我们可以免费的使用 ECharts ,不需要缴纳任何的费用
功能丰富
- 它的功能非常的丰富,提供了各种各样的图表,支持各种各样的定制, 满足各种需求,比如折线图、柱状图、饼图、K线图等. 在他的官方示例中, 提供了上百种图表, 可以用 只有你想不到, 没有她做不到 这句话来形容
社区活跃
- ECharts 的社区非常活跃,意味着你可以和很多开发者讨论,遇到了 ECharts 中不会的问题,也很容易找到解决办法
多种数据的支持
- 可视化的含义就是将数据通过更加直观的图表的方式来呈现。图表只是一种呈现方式。最核心的其 实是数据。 ECharts 对数据格式的支持也是非常友好的。 ECharts 能够支持常见的 key-value 数据格式,还能支持二维表,或者 TypedArray 格式的数据
流数据的支持
- 对于超大的数据量而言, 数据本身的体量可能就非常消耗资源, 而 ECharts 可以支持对流数据的 动态渲染,加载多少数据就渲染多少数据,省去了漫长的数据加载的等待时间, 他还提供了增量渲 染的技术, 只渲染变化的数据, 提高系统的资源利用.
移动端的优化
跨平台
酷炫的特效
数据的三维可视化
......
ECharts 能够做出各种各样漂亮的图表,它能满足绝大多数可视化图表的实现 . 它的兼容性强 , 使用方便 ,功能强大 , 是实现数据可视化的最佳选择之一 , 更多特点和介绍可以查阅官网地址:https://echarts.apache.org/zh/index.html
1.2.ECharts的快速上手
ECharts 的入门使用特别简单, 5分钟就能够上手. 他大体分为这几个步骤
步骤1:引入 echarts.js 文件
echarts是一个 js 的库,当然得先引入这个库文件
<script src = "js/echarts.min.js" ></script>
步骤2:准备一个呈现图表的盒子
这个盒子通常来说就是我们熟悉的 div ,这个 div 决定了图表显示在哪里
<div id = "main" style = "width: 600px;height:400px;" ></div>
步骤3:初始化 echarts 实例对象
在这个步骤中, 需要指明图表最终显示在哪里的DOM元素
var myChart = echarts.init(document.getElementById('main'))
步骤4:准备配置项
这步很关键,我们最终的效果,到底是显示饼图还是折线图,基本上都是由配置项决定的
步骤5:将配置项设置给 echarts 实例对象
ECharts 能够做出各种各样漂亮的图表,它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便, 功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址:
myChart . setOption ( option )
1.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 , 常用的配置项多用几次, 你自然而然就记下了
大家可以查文档试一下: title中的各种配置
2.ECharts常用图表
2.1.图表1 柱状图
2.1.1.柱状图的实现步骤
步骤1 ECharts 最基本的代码结构
<!DOCTYPE html><html lang = "en" ><head><script src = "js/echarts.min.js" ></script></head><body><div style = "width: 600px;height:400px" ></div><script>var mCharts = echarts . init ( document . querySelector ( "div" ))var option = {} mCharts . setOption ( option )</script></body></html>
var xDataArr = [ ' 张三 ' , ' 李四 ' , ' 王五 ' , ' 闰土 ' , ' 小明 ' , ' 茅台 ' , ' 二妞 ' , ' 大强 ' ]
var yDataArr = [ 88 , 92 , 63 , 77 , 94 , 80 , 72 , 86 ]
var option = {xAxis : {type : 'category' ,data : xDataArr},yAxis : {type : 'value'},series : [{type : 'bar' ,data : yDataArr}]}
2.1.2.柱状图的常见效果
平均值 markLine
- 数值显示 label
柱宽度 barWidth
- 所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为 value , yAxis 的 type 设置为 category , 并且设置 data 即可
2.1.3. 柱状图特点
柱状图描述的是分类数据,呈现的是每一个分类中『有多少?』, 图表所表达出来的含义在于不同类别数据的排名\对比情况
2.1.4.通用配置
使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置.
标题: title
- 触发类型: trigger
可选值有item\axis
- 触发时机: triggerOn
可选值有 mouseOver\click
- 字符串模板
var option = {tooltip : {trigger : 'item' ,triggerOn : 'click' ,formatter : '{b}:{c}'}}这个 { b } 和 { c } 所代表的含义不需要去记 , 在官方文档中有详细的描述
回调函数
var option = {
tooltip: {
trigger: 'item',
triggerOn: 'click',
formatter: function (arg) {
return arg.name + ':' + arg.data
}
}
}
工具按钮: toolbox
- 工具栏的按钮是配置在 feature 的节点之下
图例: legend
- legend 中的 data 是一个数组
- legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致
var option = {legend : {data : [ ' 语文 ' , ' 数学 ' ]},xAxis : {type : 'category' ,data : [ ' 张三 ' , ' 李四 ' , ' 王五 ' , ' 闰土 ' , ' 小明 ' , ' 茅台 ' , ' 二妞 ' , ' 大强 ' ]},yAxis : {type : 'value'},series : [{name : ' 语文 ' ,type : 'bar' ,data : [ 88 , 92 , 63 , 77 , 94 , 80 , 72 , 86 ]}, {
name : ' 数学 ' ,type : 'bar' ,data : [ 93 , 60 , 61 , 82 , 95 , 70 , 71 , 86 ]}]}
下一篇:ECharts常用图表 02 折线图
往期文章:数据可视化你了解多少?
黑马前端专栏干货多多,关注再学,好方便~
2022年前端学习路线图:课程、源码、笔记,技术栈 另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我喔~
更多推荐
所有评论(0)