咱们先来看一段宣传视频。
ECharts宣传视频
(ps:本文食用方法仅限与我一样的代码小白食用。)
看起来很厉害,很高端,有木有,这么厉害的东西,我们也能做出来吗?

唔,要做出和视频上一样厉害的图表,可能有点难度,但是做出比一般图表厉害的图表,用这个插件完全没有问题。它的名字就是视频里的Echarts.
什么是Echarts?
Echarts,一个非常牛逼的图表库,可以下载,也可以直接在浏览器上运行,提供直观,生动,可交互,可高度个性化定制(高逼格)的数据可视化图表。它的页面是这样子的.

Echarts的图表类型很丰富,基本上我们平常用的,它都有提供,包括折线图,柱状图,饼图,还有散点图,地图,等等……

如何使用Echarts?
虽然,echarts看起来像是一般人不会使用的网站,但是,我们也可以用它搞定一些图表,比如实例里的全国城市主要空气质量,直接另存为图片就可以使用了。
那,需要修改数据的图表如何实现呢?
其实,一般的图表也不难实现,比如说我想做一个表现”消费者对蜂蜜最关心的因素”图表,数据如下。

我选择了Gallery里一个名为“圣诞礼物”的图表,看起来是一个每个饼的大小与长度都随比例而改变的图表。

看到一堆代码,吓一跳

但是仔细看,我们用到的只有选中的这一部分,color是用十六进制表示的每一块饼的颜色,value后面是数据(不是比例),name是这一块饼的名称。

所以,只要把选中的这一块改掉就好啦,我在网上搜了一张十六进制颜色的图片,或者直接默认它的颜色也可以(颜色和数据是依次对应的。)


然后,根据”消费者对蜂蜜最关心的因素”将选中部分修改,点右上角刷新(或者它自动显示),一张符合我们条件的饼状图就出来啦!

另存为图片,插入ppt,将中间的礼物形状插入一个白色圆形,并加入一个小图标,大功告成!


网友评论