**Django+Echart實現多個餅狀圖（echart數據格式問題 {value: 135, name: '視頻廣告'}）

1.直接上代碼：

option = {
    backgroundColor: '#f7f7f7',//背景顏色
    tooltip : {
        show: true,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    title: [
            {
              text: 'Other占比餅狀圖',
              top: '4%',
              left:'39%',
              textStyle:{
                  color:'#d1ecff',
                  fontStyle:'normal',
                  fontWeight:'600',
                  fontFamily:'sans-serif',
          　　    fontSize:25
              }
            },
            {
              text: '不同樓層房屋占比餅狀圖',
              top: '15%',
              left:'8%',
              textStyle:{
                  color:'#d1ecff',
                  fontStyle:'normal',
                  fontWeight:'600',
                  fontFamily:'sans-serif',
          　　　　fontSize:18
              }
          },{
              text: "不同戶型房屋占比餅狀圖",
              top:'15%',
              left:'39%',
              textStyle:{
                  color:'#ccc',
                  fontStyle:'normal',
                  fontWeight:'600',
                  fontFamily:'sans-serif',
              　　　　fontSize:18
              }
          },
          {
              text: "不同房屋朝向占比餅狀圖",
              top: '15%',
              left: '69%',
              textStyle:{
                  color:'#ccc',
                  fontStyle:'normal',
                  fontWeight:'600',
                  fontFamily:'sans-serif',
              　　　　fontSize:18
              }
          },
          {
              text: '不同裝修房屋占比餅狀圖',
              top: '55%',
              left:'8%',
              textStyle:{
                  color:'#d1ecff',
                  fontStyle:'normal',
                  fontWeight:'600',
                  fontFamily:'sans-serif',
          　　　　fontSize:18
              }
          },{
              text: "房屋有無電梯占比餅狀圖",
              top:'55%',
              left:'39%',
              textStyle:{
                  color:'#ccc',
                  fontStyle:'normal',
                  fontWeight:'600',
                  fontFamily:'sans-serif',
              　　　　fontSize:18
              }
          },
          {
              text: "不同房屋類型占比餅狀圖",
              top: '55%',
              left: '69%',
              textStyle:{
                  color:'#ccc',
                  fontStyle:'normal',
                  fontWeight:'600',
                  fontFamily:'sans-serif',
              　　　　fontSize:18
              }
          }],

    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable:false,
    series : [
        {
            name:'報警數占比',
            type:'pie',
            center: ['20%', '35%'],
            radius: [0, '25%'],
            data:[{name:'a0',value:114},
                {name:'b0',value:100},
                {name:'c0',value:240}],
            itemStyle: {//系列級個性化
                normal: {
                    color: function(params) {
                        var colorList = [
                          '#339CD1','#FE8463','#9BCA63','#FAD860',
                           '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                        ];
                        return colorList[params.dataIndex]
                    },
                    labelLine:{//餅圖不顯示線條
                        length:2,
                        show:false
                    },
                    label:{//餅圖不顯示文字
                        show:true,
                        position : 'inner',//餅圖圖上顯示百分比
                        formatter : function (params) {
                          return (params.percent - 0).toFixed(0) + '%'
                        },
                        textStyle:{
                            fontSize:14
                        }
                    },
                }
            }
        },
        {
            name:'掉線數占比',
            type:'pie',
            center: ['50%', '35%'],
            radius: [0, '25%'],
            data:[{name:'a1',value:45},
                {name:'b1',value:54},
                {name:'c1',value:23}],
            itemStyle: {//系列級個性化
                normal: {
                    color: function(params) {
                        var colorList = [
                          '#339CD1','#FE8463','#9BCA63','#FAD860',
                           '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                        ];
                        return colorList[params.dataIndex]
                    },
                    labelLine:{//餅圖不顯示線條
                        length:2,
                        show:false
                    },
                    label:{//餅圖不顯示文字
                        show:true,
                        position : 'inner',//餅圖圖上顯示百分比
                        formatter : function (params) {
                          return (params.percent - 0).toFixed(0) + '%'
                        },
                        textStyle:{
                            fontSize:14
                        }
                    }
                }
            }
        },
        {
            name:'掉線數占比',
            type:'pie',
            center: ['80%', '35%'],
            radius: [0, '25%'],
            data:[{name:'a2',value:76},
                {name:'b2',value:56},
                {name:'c2',value:97}],
            itemStyle: {//系列級個性化
                normal: {
                    color: function(params) {
                        var colorList = [
                          '#339CD1','#FE8463','#9BCA63','#FAD860',
                           '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                        ];
                        return colorList[params.dataIndex]
                    },
                    labelLine:{//餅圖不顯示線條
                        length:2,
                        show:false
                    },
                    label:{//餅圖不顯示文字
                        show:true,
                        position : 'inner',//餅圖圖上顯示百分比
                        formatter : function (params) {
                          return (params.percent - 0).toFixed(0) + '%'
                        },
                        textStyle:{
                            fontSize:14
                        }
                    }
                }
            }
        },
        {
            name:'掉線數占比',
            type:'pie',
            center: ['20%', '75%'],
            radius: [0, '25%'],
            data:[{name:'a3',value:34},
                {name:'b3',value:40},
                {name:'c3',value:40}],
            itemStyle: {//系列級個性化
                normal: {
                    color: function(params) {
                        var colorList = [
                          '#339CD1','#FE8463','#9BCA63','#FAD860',
                           '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                        ];
                        return colorList[params.dataIndex]
                    },
                    labelLine:{//餅圖不顯示線條
                        length:2,
                        show:false
                    },
                    label:{//餅圖不顯示文字
                        show:true,
                        position : 'inner',//餅圖圖上顯示百分比
                        formatter : function (params) {
                          return (params.percent - 0).toFixed(0) + '%'
                        },
                        textStyle:{
                            fontSize:14
                        }
                    }
                }
            }
        },
        {
            name:'掉線數占比',
            type:'pie',
            center: ['50%', '75%'],
            radius: [0, '25%'],
            data:[{name:'a4',value:12},
                {name:'b4',value:20},
                {name:'c4',value:14}],
            itemStyle: {//系列級個性化
                normal: {
                    color: function(params) {
                        var colorList = [
                          '#339CD1','#FE8463','#9BCA63','#FAD860',
                           '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                        ];
                        return colorList[params.dataIndex]
                    },
                    labelLine:{//餅圖不顯示線條
                        length:2,
                        show:false
                    },
                    label:{//餅圖不顯示文字
                        show:true,
                        position : 'inner',//餅圖圖上顯示百分比
                        formatter : function (params) {
                          return (params.percent - 0).toFixed(0) + '%'
                        },
                        textStyle:{
                            fontSize:14
                        }
                    }
                }
            }
        },
        {
            name:'掉線數占比',
            type:'pie',
            center: ['80%', '75%'],
            radius: [0, '25%'],
            data:[{name:'a5',value:314},
                {name:'b5',value:200},
                {name:'c5',value:140}],
            itemStyle: {//系列級個性化
                normal: {
                    color: function(params) {
                        var colorList = [
                          '#339CD1','#FE8463','#9BCA63','#FAD860',
                           '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                        ];
                        return colorList[params.dataIndex]
                    },
                    labelLine:{//餅圖不顯示線條
                        length:2,
                        show:false
                    },
                    label:{//餅圖不顯示文字
                        show:true,
                        position : 'inner',//餅圖圖上顯示百分比
                        formatter : function (params) {
                          return (params.percent - 0).toFixed(0) + '%'
                        },
                        textStyle:{
                            fontSize:14
                        }
                    }
                }
            }
        },

    ]
};

在echart運行中顯示：

 

 

echart代碼有了，我們需結合django+數據分析的代碼應用到echart中，

1.得到數據分析的數據是series數據類型

　　

從echart要求的數據格式是如類型：

 

 

2.把series數據類型轉為字典格式

##部分數據分析代碼

s = ("name","values")    #定義鍵
# print(count_by_floor.index.tolist(),count_by_floor.values)
d1 = [count_by_floor, new_count_by_model,new_count_by_forword, count_by_zx_extent,count_by_lift,count_by_home_tpye]
for dd in d1:       #遍歷數據
    l = []
    pp = dd.to_dict()       #轉為字典 如 {'中層': 2421, '低層': 1660, '高層': 1918}
    oo = zip(pp.keys(),pp.values())     #把字典轉為元組    (('中層', 2421), ('低層', 1660), ('高層', 1918))
    for i in oo:
        l.append(dict(zip(s,i)))        #使用zip函數跟鍵結合並放入列表  [{'name': '中層', 'values': 2421}, {'name': '低層', 'values': 1660}, {'name': '高層', 'values': 1918}]
    list_all.append(l)              #放入大列表

大列表list_all

 

 發現得到的數據跟echart的格式還是不一樣，echart的格式很像字典，但它的鍵沒有引號，在處理這點上花費了很長時間，起初想在數據分析代碼中把引號去掉，報的是 不是字典的錯誤，然后換思路，換到view中去處理

view代碼：

#部分代碼

#other
        other_all = other()     #接收大列表
        #把大列表轉為字符串再去把值替換
        other_all = str(other_all).replace("'name'","name").replace("'values'","values")
        print(other_all）

        return render(request, 'mainpage/index.html', locals())

可以輸出結果

 但是格式是字符串，在templates只能顯示一串字符，不能以列表去讀取每個元素，所以我們可以在view中遍歷other_all大列表，把小列表轉為字符串,重新生成大列表other_l

 

 這樣templates就可以接收參數了

得到圖表

 

 這里關於圖表的文字顯示跟百分比不能同時顯示（沒有更深的了解），我使用的是兩個圖表進行疊加的效果，例：

 

第一個：

 

 

 第二個：

 

 沒有設置itemstyle則默認顯示文字加線條

echart完整代碼：

<div class="row">
<div class="col-md-9" align="center">
    <div id="main3" style="width: 1080px;height:640px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main3'));
        option = {
            backgroundColor: '#f7f7f7',//背景顏色
            tooltip : {
                show: true,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            title: [
                    {
                      text: 'Other占比餅狀圖',
                      top: '4%',
                      left:'39%',
                      textStyle:{
                          color:'#d1ecff',
                          fontStyle:'normal',
                          fontWeight:'600',
                          fontFamily:'sans-serif',
                  　　    fontSize:25
                      }
                    },
                    {
                      text: '不同樓層房屋占比餅狀圖',
                      top: '15%',
                      left:'9%',
                      textStyle:{
                          color:'#d1ecff',
                          fontStyle:'normal',
                          fontWeight:'600',
                          fontFamily:'sans-serif',
                  　　　　fontSize:18
                      }
                  },{
                      text: "不同戶型房屋占比餅狀圖",
                      top:'15%',
                      left:'40%',
                      textStyle:{
                          color:'#ccc',
                          fontStyle:'normal',
                          fontWeight:'600',
                          fontFamily:'sans-serif',
                      　　　　fontSize:18
                      }
                  },
                  {
                      text: "不同房屋朝向占比餅狀圖",
                      top: '15%',
                      left: '70%',
                      textStyle:{
                          color:'#ccc',
                          fontStyle:'normal',
                          fontWeight:'600',
                          fontFamily:'sans-serif',
                      　　　　fontSize:18
                      }
                  },
                  {
                      text: '不同裝修房屋占比餅狀圖',
                      top: '55%',
                      left:'9%',
                      textStyle:{
                          color:'#d1ecff',
                          fontStyle:'normal',
                          fontWeight:'600',
                          fontFamily:'sans-serif',
                  　　　　fontSize:18
                      }
                  },{
                      text: "房屋有無電梯占比餅狀圖",
                      top:'55%',
                      left:'40%',
                      textStyle:{
                          color:'#ccc',
                          fontStyle:'normal',
                          fontWeight:'600',
                          fontFamily:'sans-serif',
                      　　　　fontSize:18
                      }
                  },
                  {
                      text: "不同房屋類型占比餅狀圖",
                      top: '55%',
                      left: '70%',
                      textStyle:{
                          color:'#ccc',
                          fontStyle:'normal',
                          fontWeight:'600',
                          fontFamily:'sans-serif',
                      　　　　fontSize:18
                      }
                  }],

            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable:false,
            series : [
                {
                    name:'房屋樓層占比',
                    type:'pie',
                    center: ['20%', '35%'],
                    radius: [0, '25%'],
                    data: {{ other_l.0|safe }},
                    itemStyle: {//系列級個性化
                        normal: {
                            color: function(params) {
                                var colorList = [
                                  '#339CD1','#FE8463','#9BCA63','#FAD860',
                                   '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                                ];
                                return colorList[params.dataIndex]
                            },
                            labelLine:{//餅圖不顯示線條
                                length:2,
                                show:false
                            },
                            label:{//餅圖不顯示文字
                                show:true,
                                position : 'inner',//餅圖圖上顯示百分比
                                formatter : function (params) {
                                  return (params.percent - 0).toFixed(0) + '%'
                                },
                                textStyle:{
                                    fontSize:14
                                }
                            },
                        }
                    }
                },
                {
                    name:'房屋樓層占比',
                    type:'pie',
                    center: ['20%', '35%'],
                    radius: [0, '25%'],
                    data: {{ other_l.0|safe }},
                },
                {
                    name:'房屋戶型占比',
                    type:'pie',
                    center: ['50%', '35%'],
                    radius: [0, '25%'],
                    data:{{ other_l.1|safe }},
                    itemStyle: {//系列級個性化
                        normal: {
                            color: function(params) {
                                var colorList = [
                                  '#339CD1','#FE8463','#9BCA63','#FAD860',
                                   '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                                ];
                                return colorList[params.dataIndex]
                            },
                            labelLine:{//餅圖不顯示線條
                                length:2,
                                show:false
                            },
                            label:{//餅圖不顯示文字
                                show:true,
                                position : 'inner',//餅圖圖上顯示百分比
                                formatter : function (params) {
                                  return (params.percent - 0).toFixed(0) + '%'
                                },
                                textStyle:{
                                    fontSize:14
                                }
                            }
                        }
                    }
                },
                {
                    name:'房屋戶型占比',
                    type:'pie',
                    center: ['50%', '35%'],
                    radius: [0, '25%'],
                    data:{{ other_l.1|safe }}
                },
                {
                    name:'房屋朝向占比',
                    type:'pie',
                    center: ['80%', '35%'],
                    radius: [0, '25%'],
                    data:{{ other_l.2|safe }},
                    itemStyle: {//系列級個性化
                        normal: {
                            color: function(params) {
                                var colorList = [
                                  '#339CD1','#FE8463','#9BCA63','#FAD860',
                                   '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                                ];
                                return colorList[params.dataIndex]
                            },
                            labelLine:{//餅圖不顯示線條
                                length:2,
                                show:false
                            },
                            label:{//餅圖不顯示文字
                                show:true,
                                position : 'inner',//餅圖圖上顯示百分比
                                formatter : function (params) {
                                  return (params.percent - 0).toFixed(0) + '%'
                                },
                                textStyle:{
                                    fontSize:14
                                }
                            }
                        }
                    }
                },
                {
                    name:'房屋朝向占比',
                    type:'pie',
                    center: ['80%', '35%'],
                    radius: [0, '25%'],
                    data:{{ other_l.2|safe }},
                },
                {
                    name:'房屋裝修占比',
                    type:'pie',
                    center: ['20%', '75%'],
                    radius: [0, '25%'],
                    data:{{ other_l.3|safe }},
                    itemStyle: {//系列級個性化
                        normal: {
                            color: function(params) {
                                var colorList = [
                                  '#339CD1','#FE8463','#9BCA63','#FAD860',
                                   '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                                ];
                                return colorList[params.dataIndex]
                            },
                            labelLine:{//餅圖不顯示線條
                                length:2,
                                show:false
                            },
                            label:{//餅圖不顯示文字
                                show:true,
                                position : 'inner',//餅圖圖上顯示百分比
                                formatter : function (params) {
                                  return (params.percent - 0).toFixed(0) + '%'
                                },
                                textStyle:{
                                    fontSize:14
                                }
                            }
                        }
                    }
                },
                {
                    name:'房屋裝修占比',
                    type:'pie',
                    center: ['20%', '75%'],
                    radius: [0, '25%'],
                    data:{{ other_l.3|safe }},
                },
                {
                    name:'有無電梯占比',
                    type:'pie',
                    center: ['50%', '75%'],
                    radius: [0, '25%'],
                    data:{{ other_l.4|safe }},
                    itemStyle: {//系列級個性化
                        normal: {
                            color: function(params) {
                                var colorList = [
                                  '#339CD1','#FE8463','#9BCA63','#FAD860',
                                   '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                                ];
                                return colorList[params.dataIndex]
                            },
                            labelLine:{//餅圖不顯示線條
                                length:2,
                                show:false
                            },
                            label:{//餅圖不顯示文字
                                show:true,
                                position : 'inner',//餅圖圖上顯示百分比
                                formatter : function (params) {
                                  return (params.percent - 0).toFixed(0) + '%'
                                },
                                textStyle:{
                                    fontSize:14
                                }
                            }
                        }
                    }
                },
                {
                    name:'有無電梯占比',
                    type:'pie',
                    center: ['50%', '75%'],
                    radius: [0, '25%'],
                    data:{{ other_l.4|safe }},
                },
                {
                    name:'房屋類型占比',
                    type:'pie',
                    center: ['80%', '75%'],
                    radius: [0, '25%'],
                    data:{{ other_l.5|safe }},
                    itemStyle: {//系列級個性化
                        normal: {
                            color: function(params) {
                                var colorList = [
                                  '#339CD1','#FE8463','#9BCA63','#FAD860',
                                   '#9CD2ED','#F8AB96','#80BF35','#F3C72C','#C1232B'
                                ];
                                return colorList[params.dataIndex]
                            },
                            labelLine:{//餅圖不顯示線條
                                length:2,
                                show:false
                            },
                            label:{//餅圖不顯示文字
                                show:true,
                                position : 'inner',//餅圖圖上顯示百分比
                                formatter : function (params) {
                                  return (params.percent - 0).toFixed(0) + '%'
                                },
                                textStyle:{
                                    fontSize:14
                                }
                            }
                        }
                    }
                },
                {
                    name:'房屋類型占比',
                    type:'pie',
                    center: ['80%', '75%'],
                    radius: [0, '25%'],
                    data:{{ other_l.5|safe }},
                },

            ]
        };
        //使用剛指定的配置項和數據顯示圖表
        myChart.setOption(option);

    </script>
</div>
</div>

 

之后查了資料，可以通過eval()函數來實現字符串轉列表的形式

 

 結果轉換的時候就報了個格式錯誤，跟在數據分析代碼的錯誤差不多。

然后又查了在templates中自定義過濾器，還沒弄懂，弄懂了在寫。