使用百度Echarts丰富你的页面

发表于 分类于 Waline： 本文字数： 1.8k 阅读时长 ≈ 7 分钟

百度Echarts和百度脑图是我觉得百度为数不多做的很好的产品，尤其是Echarts，为前端开发提供了不少的便利。目前3.0版比之前丰富了不少，除了办公或者商业上常见的一些图形如柱形图、条形图、散点图、蜘蛛图、漏斗图、地图、K线图等，加入了许多供科学研究的如桑基图、平行坐标图、热力图等，着实令人大开眼界。对于好的产品，我们还是需要大力支持一下。当然使用它、宣传它也是支持的一种方式。

目前的博客用的Hexo，所有文章页面都是基于Markdown语法，加上Echarts真的是如虎添翼，网上关于Hexo和Echarts相关介绍不多，也许是部分朋友并不知道Echarts的强大与便利，所以我以此文在这里与大家分享一下。

如何使用Echarts

步骤其实很简单，有点前端html或者javascript基础的人比较好理解，但是不懂也没关系。工具的进阶除了功能越来越强大之外，还有一个应该就是用起来越来越方便。这里一共以下几步：

1、在文章模板里引入Echarts模块

  • Hexo的话，找到如下路径：/themes/主题/layout/_partials/head.ejs或者新版Hexo的/themes/主题/layout/_partials/head.swig，
  • 如果Wordpress，则到后台yourdomain.com/wp-admin找到路径【主题】-【编辑】-【head.php】
  • 其他平台同理

在空白处加上如下代码:

1
2
3
//{# Import Baidu Echarts #} 写好注释是一个很好的习惯
<script src="http://echarts.baidu.com/dist/echarts.common.min.js"></script>

2、写页面,插入图表

在你需要加入图表的位置写上图表对应的代码，代码一共分为几块，以下介绍一个完整的例子：

上面的图很好地表示了企业收入支出及利润随时间变化的趋势，也是Echarts上一个标准的图形，它的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<div id="echarts1" style="width:81%;height:400px;margin:0 auto"></div> 

<script type="text/javascript">

var myChart=echarts.init(document.getElementById("echarts1")),

option={

tooltip:{
	 	trigger:"axis",   //这是什么意思
 		axisPointer:{type:"shadow"}},  

legend:{
	 	data:["利润","支出","收入"]},
 
grid:{
 		left:"3%",
		right:"4%",
		bottom:"3%",
		containLabel:!0},

xAxis:[{type:"value"}],

yAxis:[
   	{ type:"category",
    	axisTick:{show:!1},
     	data:["周一","周二","周三","周四","周五","周六","周日"]}],

series:[
   
   { name:"利润",
     	  type:"bar",
     	  itemStyle:{normal:{label:{show:!0,position:"inside"}}},
         data:[200,170,240,244,200,220,210]},

  	{ name:"收入",
         type:"bar",
         stack:"总量",
         itemStyle:{normal:{label:{show:!0}}},
         data:[320,302,341,374,390,450,420]},

   { name:"支出",
     type:"bar",
     stack:"总量",
     itemStyle:{normal:{label:{show:!0,position:"left"}}},
     data:[-120,-132,-101,-134,-190,-230,-210]}]

};
 
myChart.setOption(option),
window.onresize=myChart.resize;</script >

对于没有代码基础的人其实也不难理解，我们将其我们分块来逐项了解：

1、定义展示区域样式 

1
2
<div id="echarts1" style="width:81%;height:400px;margin:0 auto"></div>

这一块只是定义了一个展示区域，划定界限，同时定义了显示内容:宽高多少，这个块显示内容的id[echarts1]，这个ID是自己定义的，可以随便写，但是最好自己写了能方便记住，简而言之，是你给这块内容起的“小名”，比如你可以叫“狗蛋”“张麻子”等等。

2、定义好了区域，我们要开始画图了

1
2
3
4
5
<script type="text/javascript">

	var myChart2=echarts.init(document.getElementById("echarts1")),

</script>

前后两行只是格式块，不用理会，我们看第二行，定义了一个图表，名字叫myChart2，至于后面的引用函数无须究其根源，只要知道通过echarts我们初始化了一个图，这个图的id和前面对应，叫echarts3007。

3、 定义好了图表，得把图表的参数写进来

比如图表类型、X坐标轴代表啥、Y坐标值代表啥，每种图形的颜色色值是多少、以及展示的数据。
这完全不用担心，因为所有的格式参数Echarts团队都已经给你定义好了，你只需要复制粘贴、然后把对应坐标轴上的内容修修改改即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
option = {
   tooltip: {
       trigger: 'item',
       formatter: "{a} <br/>{b}: {c} ({d}%)"
   },
   legend: {
       orient: 'vertical',
       x: 'left',
       data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
   },

   grid:{left:"3%", right:"4%",bottom:"3%",containLabel:!0},

   series: [
       {
           name:'访问来源',
           type:'pie',
           radius: ['50%', '70%'],
           avoidLabelOverlap: false,
           label: {
               normal: {
                   show: false,
                   position: 'center'
               },
               emphasis: {
                   show: true,
                   textStyle: {
                       fontSize: '30',
                       fontWeight: 'bold'
                   }
               }
           },
           labelLine: {
               normal: {
                   show: false
               }
           },
           data:[
               {value:335, name:'直接访问'},
               {value:310, name:'邮件营销'},
               {value:234, name:'联盟广告'},
               {value:135, name:'视频广告'},
               {value:1548, name:'搜索引擎'}
           ]
       }
   ]
};

对应下方的图表，我相信应该不难理解。

4、最后一步，生成图表，按【启动】按钮 

1
2
myChart.setOption(option),
window.onresize=myChart.resize;

这里和英语的固定搭配一样，不用想为什么这么写，只需要照着写就对了。
经此四步，将该网页上线，就可以看到具体效果了，很简单吧！当然，如果你想要用到更多好玩酷炫的图形，就到**官方文档**里看看吧!

遇到的问题

我在其中遇到的问题，就是有很多图表的参数拷贝下来是不能正常显示的，但是加上这段以后就正常了

1
grid:{left:"3%", right:"4%",bottom:"3%",containLabel:!0},

如果你你也遇到了这个问题，不妨这样一试，兴许问题立马解决。

诡异的问题

在我测试过程中遇到了很诡异的情况：某个时间点以后，单独放一个图片完整代码，怎么也显示不出来，当我放了两张图的代码时，才能正常显示，但在Mou中预览我是可以正常显示该图表的。如上面的例子示例，第二张图我把显示区域设置成1像素值，所以才显得跟没有一样。目前先用这种笨办法掩盖掉，没有找到原因，如果有朋友同样遇到了这样的问题，还请赐教，谢谢！

酷炫的互动图形，通过Echarts，你也可以简单拥有！由于需要的行数多导致我机器有点卡，这里就先不放了，后续文章给大家展示一些漂亮的用例！