1. 程式人生 > >echarts動態重新整理資料

echarts動態重新整理資料

在這次的專案中圖表顯示的部分比較多,這邊給分享下用到的圖表的資料重新整理

 

 

 餅圖最後的效果

先看下

前端部分

<div div style="height: 40%; width: 17.5%; background-color: white;
margin-top: 20px; float: left; border-left: black;" id="member">

</div>

這是右邊圖的 echarts的html  一定要定義好大小

接下來是 js部分 先定義一個模板 官網有 自己稍加修改 (比較懶沒加註釋)

// 繪製會員量比例圖表
    var memberChart = echarts.init(document.getElementById('member'));
        memberChart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            itemHeight: 10,
            itemWidth: 10,
            orient: 'vertical',
            x: 'center',
            y: 'bottom',
            icon: 'roundRect',
            formatter: function(name) {
                var index = 0;
                var clientlabels = ['新增會員','老會員'];
                var clientcounts = [621,32032];
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
        },
        series: [
            {
                name:'男女比例',
                type:'pie',
                radius: ['45%', '53%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                data:[
                    {value:621, name:'新增會員'},
                    {value:32032, name:'老會員'},
                ],
                itemStyle: {
                    normal:{
                        label:{
                            position : 'outside',
                            formatter: '{d}%',
                            fontSize: 10,
                        },
                        labelLine :{
                            length: 2,
                            length2: 2,
                            show:false,
                        }
                    }

                }
            }
        ],
        color:['#0090FF','#F6A20C'],
        title: {
            subtext: '會員總人數',
            text: '32653',
            x: 'center',
            y: 'center',
            padding: 0,
            itemGap: 0,
            textStyle:{
                fontSize: 20,
            },
            subtextStyle:{
                fontSize: 10,
            },
        },
        graphic: {
            type: 'text',
            style:{
                x: 15,
                y: 15,
                font: 'bolder 1.2em "PingFang-SC-Medium", sans-serif',
                text:'今日新增會員比例',
            },
        },
    });

因為 主副標題被我拿去顯示不同資料了  所有用上了

graphic

原生圖形元素元件

 

接下來 看下 動態重新整理資料的js

function reflushMember(data) {
        memberChart.setOption({
            legend: {
                formatter: function(name) {
                    var index = 0;
                    var clientlabels = ['新增會員','老會員'];
                    var clientcounts = [data.newMemberCount, data.oldMemberCount];
                    clientlabels.forEach(function(value,i){
                        if(value == name){
                            index = i;
                        }
                    });
                    return name + "  " + clientcounts[index];
                }
            },

            series: [
                {
                    data:[
                        {value:data.newMemberCount, name:'新增會員'},
                        {value:data.oldMemberCount, name:'老會員'},
                    ],

                }],
            title: {
                text:data.memberCount,
            }

    })
    }

主要就是把之前模板上的資料部分替換成 後臺獲取到的資料   

 

餅圖的重新整理就到這裡

還有個橫向柱狀圖 其實都是差不多的 但是還是也看下吧

先看效果

 

 這是4個橫向柱狀圖  適應不同的搜尋條件 就看下 月度top5的吧

<p id="monthTitle" style="position:absolute;margin-left: 18%;margin-top: 1.4%;
    font: bolder 1.2em PingFang-SC-Medium sans-serif;"></p>
    <div style="height: 100%;width: 100%;position:absolute;" id="monthArea"></div>

P標籤是那個 標題

// 繪製月度熱力商圈圖表
    var monthAreaChart = echarts.init(document.getElementById('monthArea'));
        monthAreaChart.setOption({
        dataset: {
            source: [
               /* [58212, '小郡幹串串'],
                [78254, '鋼管廠'],
                [41032, '耐克'],
                [12755, '金大福'],
                [20145, '肯德基'],*/
            ]
        },
        /*grid: {containLabel: true},*/
        xAxis: {name: '(人)',
            show:true,
            splitLine: {
                show: false
            }},
        yAxis: {type: 'category',
            axisLine:{show:false},     //座標軸
            axisTick:[{    //座標軸小標記
                show:false
            }],
        },
        grid:{
            height:'70%',
            y2:20,
            left:'15%',
        },
        series: [
            {

                textStyle:{
                    fontSize:10,
                },
                type: 'bar',
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'amount',
                    // Map the "product" column to Y axis
                    y: 'product'
                },
                /*barWidth: 10,*/
                barGap:'70%',/*多個並排柱子設定柱子之間的間距*/
                barCategoryGap:'50%',/*多個並排柱子設定柱子之間的間距*/
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: '#438CFF'
                        }, {
                            offset: 1,
                            color: '#20C0F4'
                        }]),
                        label: {
                            show: true, //開啟顯示
                            position: 'right', //在上方顯示
                            textStyle: { //數值樣式
                                color: 'black',
                                fontSize: 10
                            }
                        },
                    }
                },
            }
        ],
        graphic: {
            type: 'text',
            style:{
                x: 15,
                y: 15,
                font: 'bolder 1.2em "PingFang-SC-Medium", sans-serif',
                text:'月度TOP5',
            },
        },

上面是 橫向柱狀圖 模板例子

var listTop5Result = result.listTop5Result;

                    for(var i = listTop5Result.length - 1; i >= 0; i--){
                        names.push(listTop5Result[i].deptName);    //挨個取出類別並填入類別陣列
                    }
                    for(var i = listTop5Result.length - 1; i >= 0; i--){
                        nums.push(listTop5Result[i].num);    //挨個取出人次並填入銷量陣列
                    }
                    myChart.hideLoading();    //隱藏載入動畫
                    myChart.setOption({        //載入資料圖表

                        yAxis: {
                            data: names
                        },
                        series: [{
                            data: nums
                        }]

                    });

上面是 動態獲取 並要重新整理的資料  和餅圖不同的是 柱狀圖傳進去的要是陣列

 

以上就是我要分享的內容了  

 

感謝

 

如果有什麼錯誤 請多多指教!

2019-11-12 19:5