百度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("圖表請求數據失敗啦!");
        }
    });

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

這里才是重點,如果你只是寫個假數據,做個寫死的圖表。

那我就不說什么了,祝你使用愉快~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM