Echarts是百度团队打造的一款纯Javascript的图标库,官网下载地址:http://echarts.baidu.com/download.html

Echarts的特性:

丰富的图表类型:常用的有折线图,柱状图,散点图,饼图,用于地理数据可视化的地图,热力图,线图等。

基本使用:

1引入echarts.js文件包,可以在官网上下载。

 Echarts入门基本使用:柱状图、饼图等

2、准备一个容器装图表,需要设置容器的ID,可以设置图表显示的宽高大小

 Echarts入门基本使用:柱状图、饼图等

3、初始化echarts实例

 Echarts入门基本使用:柱状图、饼图等

4、指定图表的配置项和数据,即设置option

title:标题组件

tooltip:提示框组件

legend:图例组件,展示了不同系列的标记,颜色和名字

xAxis:直角坐标系,gird中的x轴,单个grid组件最多只能放上下两个x轴。

yAxis:直角坐标系,grid中的y轴,单个grid组件最多只能放左右两个y轴。

series:系列列表。每个系列通过type决定自己展示的图表类型。

series[i]-line=====折线图

series[i]-bar=====柱状图

series[i]-pie=====饼图

series[i]-scatter=====散点图

series[i]-effectScatter=====带有涟漪特效动画的散点(气泡)图

series[i]-radar=====雷达图

series[i]-treemap-Treemap=====是一种常见的表达【层级数据】【树桩数据】的可视化形式

series[i]-boxplot-Boxplot=====中文可以称为【箱型图】、【盒须图】、【盒式图】【箱线图】

series[i]-candlestick-Candlestick=====即我们常说的k线图

series[i]-map=====地图主要用于地理区域数据可视化,配合visuaLMap组件用于展示不同区域的人口分布密度等数据

series[i]-parallel=====平行坐标系的系列

series[i]-lines=====线图

series[i]-graph=====关系图

series[i]-gauge=====仪表盘

 Echarts入门基本使用:柱状图、饼图等

5、使用指定的配置项和数据显示

 Echarts入门基本使用:柱状图、饼图等

这样就出来简单的柱状图了;

Echarts入门基本使用:柱状图、饼图等

如果是饼图的话就不要X,Y轴了。type:“pie”,并且data的数据需要换成

 Echarts入门基本使用:柱状图、饼图等

 

相关文章:

  • 2022-01-17
  • 2022-12-23
  • 2021-07-17
  • 2021-10-06
  • 2021-07-10
  • 2022-02-02
  • 2021-09-30
  • 2021-06-30
猜你喜欢
  • 2021-08-10
  • 2022-12-23
  • 2021-09-12
  • 2021-08-14
  • 2021-05-24
  • 2021-07-20
  • 2021-11-25
相关资源
相似解决方案