echars官网
echars,由百度开发的是一个使用 Javascript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
了解一下echarts的背景
- 作用:展示图表的(大数据可视化)
- 百度,捐给Apache 免费开源
- 竞品:heightCharts 和 D3
echarts优点
Echarts的优点比较明显体积小,免费、上手快,只需要有一些js基础,剩下的就是复制粘贴的事情,而且是国产的东西,文档看起来也比较方便,总体来说门槛比较低。
- 获取 Apache ECharts
在 https://www.jsdelivr.com/package/npm/echarts选择 dist/echarts.js,点击并保存为 echarts.js 文件。
- 引入echarts.js文件
- 在body中创建个容器
- 实例化echarts
- 指定配置量和数据option
- 更新配置(将配置项设置给echarts实例对象)
- series:
系列列表。每个系列通过 type 决定自己的图表类型
大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
- xAxis:直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
- yAxis:直角坐标系 grid 中的 y 轴
- grid:直角坐标系内绘图网格。
- title:标题组件
- tooltip:提示框组件
- legend:图例组件
- color:调色盘颜色列表
数据堆叠,同个类目轴上系列配置相同的 stack 值后 后一个系列的值会在前一个系列的值上相加。
echarts官网 点击
echarts入门示例一点要看 点击
- 柱状图
柱状图代码
- 柱状图、折线、曲线、饼状图
柱状图、折线、曲线、饼状图代码
- 特殊样式
特殊样式代码
- 渐变色、圆角
渐变色、圆角代码
- 堆叠
堆叠代码
- 工具箱
工具箱代码
- 网络来源访问
- 动态图加载
动态图加载代码
- 缓动加载
缓动加载代码
- 发送动作请求
以上就是本篇文章【echarts数据可视化介绍+常用的图表案例分析(值得收藏的干活)】的全部内容了,欢迎阅览 ! 文章地址:https://sicmodule.kub2b.com/quote/17367.html
栏目首页
相关文章
动态
同类文章
热门文章
网站地图
返回首页 企库往资讯移动站https://sicmodule.kub2b.com/mobile/,查看更多