Echarts介紹

今后要經(jīng)常做數(shù)據(jù)分析引谜，總不能一直拿靜態(tài)圖片來充當(dāng)圖表吧。于是想看看有沒有什么好的工具擎浴。

原來自己是一直在用D3制作交互式圖標(biāo)员咽，流程復(fù)雜，效果簡單≈ぃ現(xiàn)在發(fā)現(xiàn)了Echarts贝室，感覺發(fā)現(xiàn)了新大陸一樣。

具體教程去百度的官網(wǎng)（http://echarts.baidu.com/）查看文檔仿吞，很簡單的滑频，這里就不多說了。

echarts官網(wǎng)

下面來簡單說一下如何在Hexo驅(qū)動(dòng)的博客中使用echarts圖表唤冈。

在博客頁面中引用js文件

在所用主題目錄下layout\_partial中的head.ejs里加入：

<script src="http://echarts.baidu.com/dist/echarts.common.min.js"></script>

安裝hexo-tag-echarts插件

在博客站點(diǎn)目錄下執(zhí)行npm install hexo-tag-echarts --save峡迷。

使用范例

對于動(dòng)態(tài)百度圖表范例，將其提供的option部分復(fù)制你虹，形成下述代碼即可凉当。

{% echarts 400 '81%' %}
{
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
            type : 'shadow'        // 默認(rèn)為直線售葡，可選為：'line' | 'shadow'
        }
    },
    legend: {
        data:['利潤', '支出', '收入']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'value'
        }
    ],
    yAxis : [
        {
            type : 'category',
            axisTick : {show: false},
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    series : [
        {
            name:'利潤',
            type:'bar',
            itemStyle : {
                normal: {
                    label: {show: true, position: 'inside'}
                }
            },
            data:[200, 170, 240, 244, 200, 220, 210]
        },
        {
            name:'收入',
            type:'bar',
            stack: '總量',
            itemStyle: {
                normal: {
                    label : {show: true}
                }
            },
            data:[320, 302, 341, 374, 390, 450, 420]
        },
        {
            name:'支出',
            type:'bar',
            stack: '總量',
            itemStyle: {normal: {
                label : {show: true, position: 'left'}
            }},
            data:[-120, -132, -101, -134, -190, -230, -210]
        }
    ]
};
{% endecharts %}

其中看杭，參數(shù)400指定圖表展示的高度為400px，81%則指定圖表展示的寬度為81%挟伙，如不寫明這兩項(xiàng)參數(shù)則默認(rèn)值為高度400px楼雹，寬度81%。

最終制作的圖表效果可以參考我的博客：Hexo驅(qū)動(dòng)博客中使用Echarts動(dòng)態(tài)圖表｜Airing的博客尖阔。

參考資料：

• echarts官網(wǎng)：http://echarts.baidu.com/
• hexo-tag-echarts插件 鳥兒問答：http://zhoulvjun.github.io/2016/02/07/hexo-tag-echarts/
• zhoulvjun/hexo-tag-echarts Github：https://github.com/zhoulvjun/hexo-tag-echarts