echarts使用 教程

参考：

http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

 

第一步、引入echarts.js库文件

 　　

 

第二步、准备放图表的容器

 　　

 

第三步、设置参数，初始化

 

 　　　

　·　

 

 

 

 

做实验：把type由bar(柱状图)改成line(折线图)

 　　　　

 

 

 

饼图：

 　　

　　

 

 

 

个性化

 

echarts.js刚开始学的时候，大家最大的困惑是配置项太多了，根本记不住，其实，我们根本不需要记这些配置项，因为没有人记得住的，我们可以使用tushuo.baidu.com这个网站：

 

 　　　　

　　　　

 

 

 

 

动态显示

 

到目前为止，我们的数据全部是静态的，我们的数据肯定是需要来自动态数据的。

 

http://echarts.baidu.com/tutorial.html#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD%E5%92%8C%E6%9B%B4%E6%96%B0

 　　　　

 

 

 

移动端显示

 

为了能完美的在移动端显示，echarts.js做了很多工作。

 

首先，各个配置项，除了有px这种写死的方法外，还可以用百分比的方式：

 　　　　

 

其次，对各个东西还可以设置居左居中居右：

 

 　　

 

如果上面的还满足不了需求，echarts还实现了一套类似CSS3中的媒体查询的功能：

 

 　　

 

http://echarts.baidu.com/tutorial.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94

 

转载于:https://www.cnblogs.com/fishJ/p/8195701.html