ECharts的讲解

目录

什么是数据可视化

ECharts的介绍

ECharts的特点

ECharts的基本使用

操作步骤

通用配置title的相关配置

通用配置tooltip的相关配置

触发类型:trigger

触发时机:triggerOn

​格式化:formatter

通用配置toolbox的相关配置

通用配置legend的相关配置

案例源码

小结

折线图常见效果

标记 

线条控制

​编辑填充风格

紧挨边缘

缩放:脱离 0 值比例

堆叠图

 案例源码


什么是数据可视化

  • 把数据以更直观的形式展现----图表
  • 可以清晰有效地传达与沟通信息
  • 可以帮助我们快速的获取隐藏在数据中的信息

ECharts的介绍

ECharts是一个使用JavaScript实现的开源可视化库,兼容性强,底层依赖矢量图形库ZRender,提供直观,交换丰富,可高度个性化定制的数据可视化图表。

ECharts的讲解_第1张图片

官网地址:https://echarts.apache.org/zh/index.html 

ECharts的讲解_第2张图片

ECharts的特点

  • 它具有丰富的可视化类型,折线图,柱状图,饼图,K线图等等.....
  • 它可以支持多种数据格式,比如key-value数据格式,二维表,和TypedArray格式
  • 它可以支持流数据,对于超大的数据量而言,数据的本身就非常非常耗费资源了,而ECharts支持对数据的动态渲染,加载多少数据就渲染多少数据,这样一来就省去了漫长数据加载等待的时间,它也提供了增量渲染技术(只渲染变化的数据),从而提供资源的利用效率。
  • 还具有移动端的优化,跨平台的使用,绚丽的特效和三维可视化等等特点,感兴趣的同学可以访问这个网址:https://echarts.apache.org/zh/feature.html

ECharts的讲解_第3张图片

小结 

ECharts的讲解_第4张图片

ECharts的基本使用

操作步骤

  • 步骤1:引入echarts.js文件

  • 步骤2:准备一个呈现图表的盒子

  • 步骤3:初始化echarts实例对象

  • 步骤4:准备配置项

  • 步骤5:将配置项设置给echarts实例对象

echarts.js获取(此为链接,可点击发生跳转)

案例演示





    
    
    
    我的尝试
    
    




    
    

最初效果 

ECharts的讲解_第5张图片

添加最值和平均值 

ECharts的讲解_第6张图片

ECharts的讲解_第7张图片改变柱子的宽度和显示柱子的数值

ECharts的讲解_第8张图片

ECharts的讲解_第9张图片

将柱状图变为横向的(最终效果) 

ECharts的讲解_第10张图片

ECharts的讲解_第11张图片

小结

ECharts的讲解_第12张图片

ECharts的讲解_第13张图片 ECharts的讲解_第14张图片

通用配置title的相关配置

文字样式textStyle;标题边框的宽度(borderWidth),颜色(borderColor)和圆角半径(borderRadius);标题位置(left,top,right和bottom)。

ECharts的讲解_第15张图片ECharts的讲解_第16张图片 

通用配置tooltip的相关配置

tooltip:提示框组件,用于配置鼠标滑过或点击图表时的显示框 

触发类型:trigger

trigger:'item'

ECharts的讲解_第17张图片当鼠标滑在图表(图中红色矩形部分)之上,就会有提示框出现。

trigger:'axis' 

ECharts的讲解_第18张图片

当鼠标滑在图表(图中红色矩形部分)之上,就会有提示框出现。

触发时机:triggerOn

triggerOn:'mouseover'

ECharts的讲解_第19张图片  

triggerOn:'click'

ECharts的讲解_第20张图片

ECharts的讲解_第21张图片格式化:formatter

字符串模板

ECharts的讲解_第22张图片

ECharts的讲解_第23张图片

ECharts的讲解_第24张图片

回调函数

ECharts的讲解_第25张图片 ECharts的讲解_第26张图片 

 ECharts的讲解_第27张图片

ECharts的讲解_第28张图片

咱们就是说,不会的话,或者忘记了,都可以去上文提到的官方文档中查询。

通用配置toolbox的相关配置

ECharts的讲解_第29张图片

ECharts的讲解_第30张图片 ECharts的讲解_第31张图片

ECharts的讲解_第32张图片

通用配置legend的相关配置

ECharts的讲解_第33张图片

ECharts的讲解_第34张图片 ECharts的讲解_第35张图片

ECharts的讲解_第36张图片

案例源码





    
    
    
    通用配置
    
    




    
    

小结

ECharts的讲解_第37张图片

折线图常见效果

标记 

ECharts的讲解_第38张图片

ECharts的讲解_第39张图片  

线条控制

ECharts的讲解_第40张图片填充风格

ECharts的讲解_第41张图片

ECharts的讲解_第42张图片

紧挨边缘

ECharts的讲解_第43张图片ECharts的讲解_第44张图片

ECharts的讲解_第45张图片

缩放:脱离 0 值比例

ECharts的讲解_第46张图片 ECharts的讲解_第47张图片ECharts的讲解_第48张图片

堆叠图

堆积图是在普通面积图的基础上,将不同数据项一层层堆叠起来,每个数据系列的起始点是上一个数据系列的结束点,既能看到各数据系列的走势,又能看到整体的规模和不同数据项的占比情况。

两折线图堆叠前

ECharts的讲解_第49张图片

 两折线图堆叠后

ECharts的讲解_第50张图片堆叠并填充后 

ECharts的讲解_第51张图片

 案例源码





    
    
    
    折线图常见效果
    
    




    
    

你可能感兴趣的:(前端,echarts,前端,javascript)