echarts繪製餅狀圖及屬性設定資料來自資料庫

阿新 • • 發佈：2020-07-19

E charts 官網有很多樣式可以選https://echarts.apache.org/examples/zh/index.html#chart-type-pie

但是我發現資料都是以列表或者字典的形式展現

現在想要實現：

1. 使用者web端輸入篩選條件

2. sql語句篩選資料

3. 然後使用E chart 展現在前端餅圖（其餘圖只需要改變前端樣式即可，傳資料部分是一樣的）

程式碼實現：

1.app.py

 1 @app.route('/test/', methods=['GET', 'POST'])
 2 def test():
 3 #傳參
 4     min =request.args.get(' 
min')
 5     max =request.args.get('max')
 6     year6 = request.args.get('year6')
 7     #重點是這一句，將列名當作引數傳入，（常見資料不需要這一句的處理）
 8     #year7 = '"' + str(year6) + '"'
 9     min1=int(min)*100000
10     max1=int(max)*100000
11 #sql語句取資料
12     sql = """
13     SELECT * 
14     FROM TABLE where """+year7+"""  between ' 
"""+str(min1)+"""' and '"""+str(max1)+"""' ;
15     """
16     result = ibm_db.exec_immediate(connect_db, sql)
17     dictionary = ibm_db.fetch_both(result)
18     userlist = []
19     while dictionary != False:
20         userlist.append(dictionary)
21         dictionary = ibm_db.fetch_both(result)
 
22 #資料處理
23     resultlist=[]
24     for i in userlist:
25         state=i["STATE"]
26         population = i[year6]
27 
28         diclist={
29             "state":state,
30             "population":population
31         }
32         resultlist.append(diclist)
33     return render_template('index.html', data6=resultlist)

前端程式碼展現：

 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>pie chart</title>
 7        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
 8        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
 9        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
10        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
11        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
12        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>  
13 </head>
14 <body>
15 <div>
16             <form method="GET" action="/test/">
17                 <input type="text" placeholder="min" name="min">
18                 <input type="text" placeholder="max" name="max">
19                 <input type="text" placeholder="year" name="year6">
20                 <button type="submit">search</button>
21                 </form>
22 
23     </div>
24 <div id="display" style="height: 500px; width: 500px"></div>
25 <script type="text/javascript">
26        {% if data6 %}
27 var dom = document.getElementById("display");
28 var drawn_pieChart = echarts.init(dom);
29 var app = {};
30 var ldata = [];
31 var sdata = [];
32 {% for list in data6 %}
33     var name = '{{ list.state }}';
34     var value = {{ list.population }};
35     sdata.push({value: value, name: name});
36     ldata.push(name);
37            {% endfor %}
38 console.log('array：',ldata);
39 option = null;
40 option = {
41     title: {
42         text: 'chart',
43         subtext: 'pie chart',
44         left: 'center',
45         backgroundColor: '#ee8f83',
46         // 主標題文字樣式設定
47             textStyle: {
48               fontSize: 26,
49               fontWeight: 'bolder',
50               color: '#80302e'
51             },
52             // 副標題文字樣式設定
53             subtextStyle: {
54               fontSize: 18,
55               color: '#498b7d'}
56     },
57     tooltip: {
58         trigger: 'item',
59         formatter: '{a} <br/>{b} : {c} ({d}%)'
60     },
61     legend: {
62         orient: 'vertical',
63         left: 'left',
64         backgroundColor: '#ebeeb5',
65         textStyle: {
66               color: '#511f66'  // 圖例文字顏色
67             },
68         data: ldata
69     },
70     series: [
71         {
72             name: 'visit',
73             type: 'pie',
74             radius: ['30%', '60%'],  // 設定環形餅狀圖， 第一個百分數設定內圈大小，第二個百分數設定外圈大小
75             center: ['50%', '50%'],
76             data: sdata,
77             //設定餅圖每部分的顏色都不一樣
78             color: ['#51CEC6','#FFB703','#5FA0FA','#ce392e','#511f66','#80302e'],
79             emphasis: {
80                 itemStyle: {
81                     shadowBlur: 10,
82                     shadowOffsetX: 0,
83                     shadowColor: 'rgba(30, 144, 255, 0.5)'
84 
85                 }
86             }
87         }
88     ]
89 };
90 ;
91 
92 if (option && typeof option === "object") {
93     drawn_pieChart.setOption(option, true);
94 }
95     {% endif %}
96        </script>
97 </body>

結果展示：

條形圖是類似的：

只需要改變前端的樣式，因此在這裡展示前端程式碼了：

 1 option = {
 2     title: {
 3         text: 'bar',
 4         subtext: ''
 5     },
 6     tooltip: {
 7         trigger: 'axis',
 8         axisPointer: {
 9             type: 'shadow'
10         }
11     },
12 
13     grid: {
14         left: '3%',
15         right: '4%',
16         bottom: '3%',
17         containLabel: true
18     },
19     xAxis: {
20         type: '',
21         boundaryGap: [0, 0.01]
22     },
23     yAxis: {
24         type: 'category',
25         data:ldata
26     },
27     series: [
28         {
29             name: 'pop',
30             type: 'bar',
31             data: sdata,
32             color: ['#51CEC6','#FFB703','#5FA0FA'],
33 
34         },
35 
36     ]
37 };
38 
39 if (option && typeof option === "object") {
40     drawn_barChart.setOption(option, true);
41 }
42     {% endif %}

散點圖：

 1 option = {
 2     backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
 3         offset: 0,
 4         color: '#f7f8fa'
 5     }, {
 6         offset: 1,
 7         color: '#cdd0d5'
 8     }]),
 9     title: {
10         text: 'chart'
11     },
12     legend: {
13         right: 10,
14         data: ldata
15     },
16     xAxis: {
17         max:2004,
18         min:2021,
19         splitLine: {
20             lineStyle: {
21                 type: 'value'
22             },
23 
24         },
25     },
26     yAxis: {
27         splitLine: {
28             lineStyle: {
29                 type: 'dashed'
30             }
31         },
32         scale: true
33     },
34     series: [{
35         name: '',
36         data: sdata,
37         type: 'scatter',
38 
39         emphasis: {
40             label: {
41                 show: true,
42                 formatter: function (param) {
43                     return param.data[3];
44                 },
45                 position: 'top'
46             }
47         },
48         itemStyle: {
49             shadowBlur: 10,
50             shadowColor: 'rgba(120, 36, 50, 0.5)',
51             shadowOffsetY: 5,
52             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
53                 offset: 0,
54                 color: 'rgb(251, 118, 123)'
55             }, {
56                 offset: 1,
57                 color: 'rgb(204, 46, 72)'
58             }])
59         }
60 
61 
62     }]
63 };
64 if (option && typeof option === "object") {
65     drawn_pointChart.setOption(option, true);
66 }
67     {% endif %}