Hexo博客下的Echarts展示

终于成功了！！！

尝试了几个小时，换了不知道多少个攻略，自行搜索网页+人形查看代码报错。。。
特别想唱一曲感动中国！
这里先做一下成果展示，下面一篇文章更新我的debug过程。（开个坑给自己）
芜湖起飞~

第一个例子

{% echarts 400 '85%' %}
var data = [];

for (var u = 0; u <= 10; u += 0.2) {
	var f = 12*u;
	f = Math.round(f*100)/100;
	data.push([u, f]);
}

option = {
    title: {
    text: "某地区蒸发量和降水量"
    },
	tooltip: {},
	xAxis: {
		name: 'U/V',
		interval: 1
	},
	yAxis: {
		name: 'f/Hz',
		interval: 10
	},
	series: [{
		data: data,
		type: 'line',
		lineStyle: {
			width: 4
		}
	}]
};
{% endecharts %}

第二个例子

{% echarts 400 '85%' %}
option = {
    title: {
        text: "某站点用户访问来源",
        subtext: "ECharts示例",
        x: "center"
    },
    tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: "vertical",
        x: "left",
        data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
    },
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: true
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    series: [
        {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
                {
                    value: 335,
                    name: "直接访问"
                },
                {
                    value: 310,
                    name: "邮件营销"
                },
                {
                    value: 234,
                    name: "联盟广告"
                },
                {
                    value: 135,
                    name: "视频广告"
                },
                {
                    value: 1548,
                    name: "搜索引擎"
                }
            ]
        }
    ]
};
{% endecharts %}

每个图的源代码在下方，F12也可以看到，一般位于对应的charts下，以<script type="text/javascript">开头的模块。

另外，想要知道怎么写自己的echarts，可以参考这些网站的模板：
菜鸟教程
 百度图说
菜鸟教程的在线编辑器有助于我们在平时使用Hexo简单的标签显示之外，更容易理解渲染后的代码，以便我们检查自己的网站哪里出了bug。
比如下面这个代码，在hexo中，我们只需要提取var option=中，option及其后面的内容，不需要在.md中写var，关于echarts的拆解，以后也会提到。