(function () { var myChart = echarts.init(document.querySelector(".pie2 .chart")) option = { color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9'], tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {d}%' }, legend: { bottom: "0%", itemWidth: 10, itemHeight: 10, textStyle: { color: "rgba(255,255,255,.5)", fontSize: "12" } }, series: [ { name: "病虫害分布", type: "pie", radius: [30, 110], center: ["50%", "50%"], roseType: "radius", itemStyle: { borderRadius: 5 }, data: [ { value: 0.3, name: '棉蚜' }, { value: 0.1, name: '棉铃虫' }, { value: 0.15, name: '棉蓟马' }, { value: 0.1, name: '棉叶螨' }, { value: 0.1, name: '棉盲蝽' }, { value: 0.125, name: '枯萎病' }, { value: 0.125, name: '黄萎病' } ] } ] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }) })(); 这段代码 我想把数据放在后端 通过flask访问得到数据并且设置数据
时间: 2024-04-22 16:24:18 浏览: 12
你可以使用 Flask 来设置后端,并通过前端发送请求获取数据。首先,你需要在后端设置一个路由来处理请求并返回数据给前端。以下是一个示例代码:
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/get_data', methods=['GET'])
def get_data():
data = [
{ "value": 0.3, "name": '棉蚜' },
{ "value": 0.1, "name": '棉铃虫' },
{ "value": 0.15, "name": '棉蓟马' },
{ "value": 0.1, "name": '棉叶螨' },
{ "value": 0.1, "name": '棉盲蝽' },
{ "value": 0.125, "name": '枯萎病' },
{ "value": 0.125, "name": '黄萎病' }
]
return jsonify(data)
if __name__ == '__main__':
app.run()
```
在前端的代码中,你可以使用 JavaScript 的 fetch 函数来发送 GET 请求获取后端返回的数据。以下是一个示例代码:
```javascript
(function () {
var myChart = echarts.init(document.querySelector(".pie2 .chart"));
// 发送 GET 请求获取数据
fetch('/get_data')
.then(response => response.json())
.then(data => {
option = {
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {d}%'
},
legend: {
bottom: "0%",
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
series: [
{
name: "病虫害分布",
type: "pie",
radius: [30, 110],
center: ["50%", "50%"],
roseType: "radius",
itemStyle: {
borderRadius: 5
},
data: data // 使用获取到的数据
}
]
};
myChart.setOption(option);
});
window.addEventListener("resize", function () {
myChart.resize();
});
})();
```
这样,前端代码将通过发送 GET 请求到 `/get_data` 路由来获取数据,并将数据应用到 echarts 图表中。注意,在运行代码之前,确保 Flask 和 echarts 的依赖已经安装并引入到项目中。