热门推荐
echarts数据可视化介绍+常用的图表案例分析(值得收藏的干活)
2025-01-01 01:12

echars官网
echars,由百度开发的是一个使用 Javascript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等,底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

了解一下echarts的背景

  1. 作用:展示图表的(大数据可视化
  2. 百度,捐给Apache 免费开源
  3. 竞品:heightCharts 和 D3

echarts优点
Echarts的优点比较明显体积小,免费、上手快,只需要有一些js基础,剩下的就是复制粘贴的事情,而且是国产的东西,文档看起来也比较方便,总体来说门槛比较低。

  • 获取 Apache ECharts
    在 https://www.jsdelivr.com/package/npm/echarts选择 dist/echarts.js,点击并保存为 echarts.js 文件。
  1. 引入echarts.js文件
 
  1. 在body中创建个容器
 
  1. 实例化echarts
 
  1. 指定配置量和数据option
 
  1. 更新配置(将配置项设置给echarts实例对象
 
 
 
  • series

系列列表。每个系列通过 type 决定自己的图表类型
大白话:图标数据,指定什么类型的图标,可以多个图表重叠。

  • xAxis:直角坐标系 grid 中的 x 轴
  • boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
  • yAxis:直角坐标系 grid 中的 y 轴
  • grid:直角坐标系内绘图网格。
  • title:标题组件
  • tooltip:提示框组件
  • legend:图例组件
  • color:调色盘颜色列表
    数据堆叠,同个类目轴上系列配置相同的 stack 值后 后一个系列的值会在前一个系列的值上相加。

echarts官网 点击
echarts入门示例一点要看 点击

  1. 柱状图
    柱状图代码
 
  1. 柱状图、折线、曲线、饼状图

    柱状图、折线、曲线、饼状图代码
 
  1. 特殊样式

    特殊样式代码
 
  1. 渐变色、圆角

    渐变色、圆角代码
 
  1. 堆叠

    堆叠代码
 
  1. 工具箱

    工具箱代码
 
  1. 网络来源访问
 
  1. 动态图加载

    动态图加载代码
 
  1. 缓动加载

    缓动加载代码
 
  1. 发送动作请求

    以上就是本篇文章【echarts数据可视化介绍+常用的图表案例分析(值得收藏的干活)】的全部内容了,欢迎阅览 ! 文章地址:https://sicmodule.kub2b.com/quote/17367.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 企库往资讯移动站https://sicmodule.kub2b.com/mobile/,查看更多   
发表评论
0评