百度echart使用心得，百度圖表。

前一段時間公司作了輿情相關的軟件，輿情用到了大量的圖表，至關大的數據交互。當時沒有整理下來，昨天有一次用到這些東西，因此準備記錄下來，方便之後使用。

百度echart算是百度針對數據展現作的一個圖表插件吧，通常咱們使用都不是問題，主要仍是對於對動態數據的解析。我這裏使用餅狀圖，和柱狀圖爲例：

首先，咱們須要定義一個繪圖的容器：（class是我本身定義的，這個容器用一個div就能夠）

<div class="fm_box pd-10 border-grey" id="shanxing" style="height: 500px;"></div>

 

  <div class="fm_box pd-10 border-grey" id="zhuzhuang" style="height: 500px;"></div>

而後須要引入咱們的echart.min.js.

準備工做作好後，下面就是咱們初始化圖表的時候了。

首先咱們須要定義兩個mychart分別做爲咱們的扇形圖和柱狀圖

var myChart = echarts.init(document.getElementById('shanxing'));
var myChart2 = echarts.init(document.getElementById('zhuzhuang'));

而後分別定義option:就是數據格式的寫入：（這裏由於有兩個圖，數據分別用option ，option2來表示）

 option = {
        title : {
            text: '某站點用戶訪問來源',
            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: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'訪問來源',
                type:'pie',
                radius : '55%',
                center: ['50%', '55%'],
                data:[
//                    {value:335, name:'直接訪問'},
//                    {value:310, name:'郵件營銷'},
//                    {value:234, name:'聯盟廣告'},
//                    {value:135, name:'視頻廣告'},
//                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    option2 = {
        title : {
            text: '某地區蒸發量和降水量',
            subtext: '純屬虛構'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['項目數']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'項目',
                type:'bar',
                data:[],

            }

        ]
    };

 

你們能夠看到，我把series裏面的data註釋掉，或者刪除了，由於圖表咱們通常用來展現動態數據，監控數據變化，固定的圖表就沒有我寫這個博文的意義了。

好的接下來，咱們模擬一個json文件。用做咱們的數據。很簡單的數據格式。

{"result":1,"msg":null,"object":[["網站","微博","微信","論壇","新聞","政務","報刊"],[10,20,180,995,450,250,360]],"totalPage":0,"sum":0}

這個json是一個普通的數據。咱們比方說，在後臺拿到的就是這麼一串json、接下來就是如何解析，而且放入圖表繪製的方法中。

 

咱們須要先作請求。

 

 $.ajax({
        type: "get",
        async: true, //同步執行
        url: "tets.json",
        dataType: "json", //返回數據形式爲json
        success: function(data){
            console.log(data.object[0].length);
            for(var i= 0,len=data.object[0].length;i<len;i++){
                var json={};
                var data2=data.object[0];
                json.name=data.object[0][i];
                json.value=data.object[1][i];
                option.series[0].data[i]=json;
                option.legend.data=data.object[0];
                option2.xAxis[0].data=data.object[0];
                option2.series[0].data=data.object[1];
            }
            myChart.clear();
            myChart.hideLoading();
            myChart.setOption(option);
            myChart2.clear();
            myChart2.hideLoading();
            myChart2.setOption(option2);// 使用剛指定的配置項和數據顯示圖表。
        },
        error: function(errorMsg) {
            alert("圖表請求數據失敗啦!");
        }
    });

 

其中的url是咱們請求數據的接口，當咱們請求到數據以後，對數據進行遍歷。你們可能看到我在其中定義了一個對象，由於咱們根據請求到的數據來看，並不太符合咱們的要求，因此咱們須要進行數據的轉換。

詳細的再也不多說，本身參考。

咱們來講說myChart.clear();myChart.hideLoading();myChart.setOption(option);

第一個是在每一次繪製圖標前，作一次初始化，清空畫布，目的是爲了防止數據沒有清理乾淨，會存在緩存或者什麼。這樣會影響繪圖效果。

第二個是圖片繪製的時候一個相似加載的動畫效果。還有個myChart.showLoading();

第三個是繪製！至關於調用全部的配置，開始繪製。上邊的容器，數據的寫入，都是爲了準備，而myChart.setOption();纔是真正的繪製，使用剛指定的配置項和數據顯示圖表。

 

 

下邊是除了容器，配置的完整代碼：

    //echart

    var myChart = echarts.init(document.getElementById('qinggan'));
    var myChart2 = echarts.init(document.getElementById('bar'));
    option = {
        title : {
            text: '某站點用戶訪問來源',
            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: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'訪問來源',
                type:'pie',
                radius : '55%',
                center: ['50%', '55%'],
                data:[
//                    {value:335, name:'直接訪問'},
//                    {value:310, name:'郵件營銷'},
//                    {value:234, name:'聯盟廣告'},
//                    {value:135, name:'視頻廣告'},
//                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    myChart.hideLoading();
    myChart.setOption(option);

    option2 = {
        title : {
            text: '某地區蒸發量和降水量',
            subtext: '純屬虛構'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['項目數']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'項目',
                type:'bar',
                data:[],

            }

        ]
    };
    //情感分析圖
    $.ajax({
        type: "get",
        async: true, //同步執行
        url: "tets.json",
        dataType: "json", //返回數據形式爲json
        success: function(data){
            console.log(data.object[0].length);
            for(var i= 0,len=data.object[0].length;i<len;i++){
                var json={};
                var data2=data.object[0];
                json.name=data.object[0][i];
                json.value=data.object[1][i];
                option.series[0].data[i]=json;
                option.legend.data=data.object[0];
                option2.xAxis[0].data=data.object[0];
                option2.series[0].data=data.object[1];
            }
            myChart.clear();
            myChart.hideLoading();
            myChart.setOption(option);
            myChart2.clear();
            myChart2.hideLoading();
            myChart2.setOption(option2);// 使用剛指定的配置項和數據顯示圖表。
        },
        error: function(errorMsg) {
            alert("圖表請求數據失敗啦!");
        }
    });

好了，基本就是這些，重點不是在顯示，是在你如何解析接收到的後臺數據，進行數據的配置。

這裏纔是重點，若是你只是寫個假數據，作個寫死的圖表。

那我就不說什麼了，祝你使用愉快~