echarts绘制饼状图及属性设置数据来自数据库 [数据库教程]
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‘]) 2def 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 = []
19while dictionary != False:
20 userlist.append(dictionary)
21 dictionary = ibm_db.fetch_both(result)
22#数据处理
23 resultlist=[]
24for 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)
33return 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 %}
27var dom = document.getElementById("display");
28var drawn_pieChart = echarts.init(dom);
29var app = {};
30var ldata = [];
31var sdata = [];
32{%for list in data6 %}
33var name =‘{{ list.state }}‘;
34var value = {{ list.population }};
35 sdata.push({value: value, name: name});
36 ldata.push(name);
37 {% endfor %}
38console.log(‘array：‘,ldata);
39option =null;
40option = {
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
92if (option &&typeof option ==="object") {
93 drawn_pieChart.setOption(option, true);
94}
95 {% endif %}
96</script>
97</body>
结果展示：
条形图是类似的：
只需要改变前端的样式，因此在这里展示前端代码了：
1option = { 2 title: { 3 text: ‘bar‘, 4 subtext: ‘‘ 5 }, 6 tooltip: { 7 trigger: ‘axis‘, 8 axisPointer: { 9 type: ‘shadow‘10 }11 },1213 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
39if (option && typeof option === "object") {
40 drawn_barChart.setOption(option, true);
41}
42 {% endif %}
散点图：
1option = { 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: ldata15 },16 xAxis: {17 max:2004,18 min:2021,19 splitLine: {20 lineStyle: {21 type: ‘value‘22 },2324 },
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};
64if (option && typeof option === "object") {
65 drawn_pointChart.setOption(option, true);
66}
67 {% endif %}
更多样式可到官网查询。
echarts绘制饼状图及属性设置 数据来自数据库
以上是 echarts绘制饼状图及属性设置数据来自数据库 [数据库教程] 的全部内容， 来源链接： utcz.com/z/534696.html
