当前位置:   article > 正文

Django、Echarts异步请求、动态更新_echarts 点击按钮更新 django

echarts 点击按钮更新 django

前端页面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>echarts示例</title>
  6. <script src="jquery.min.js"></script>
  7. <script type = "text/javascript" src = "echarts.min.js" ></script>
  8. </head>
  9. <body>
  10. <div id="main" style="width: 600px;height:400px;"></div>
  11. <script type="text/javascript">
  12. var myChart = echarts.init(document.getElementById('main'));
  13. // 初始化图表选项
  14. myChart.setOption({
  15. title: {
  16. text: 'ECharts 数据异步加载示例'
  17. },
  18. tooltip: {},
  19. legend: {
  20. data: ['销量']
  21. },
  22. xAxis: {
  23. data: []
  24. },
  25. yAxis: {},
  26. series: [{
  27. name: '销量',
  28. type: 'bar',
  29. data: []
  30. }]
  31. });
  32. function fetchData() {
  33. $.ajax({
  34. url: 'api/echarts/demo/', // 改为你的数据接口地址
  35. dataType: 'json',
  36. success: function(data) {
  37. // 假设返回的数据格式如下:
  38. // {
  39. // categories: ["衬衫", "羊毛衫", ...],
  40. // values: [5, 20, ...]
  41. // }
  42. myChart.setOption({
  43. xAxis: {
  44. data: data.categories
  45. },
  46. series: [{
  47. name: '销量',
  48. data: data.values
  49. }]
  50. });
  51. },
  52. error: function(xhr, type, errorThrown) {
  53. // 处理错误
  54. }
  55. });
  56. }
  57. // 设置定时器,定期更新数据
  58. setInterval(function () {
  59. fetchData(); // 调用获取数据的函数
  60. }, 5000); // 5000毫秒即5秒钟更新一次数据
  61. </script>
  62. </body>
  63. </html>

跨域问题,依然采用nginx代理。

后端代码

  1. from django.http import HttpResponse
  2. import json
  3. def EchartsDemo(request):
  4. data = {}
  5. categories = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  6. values = [50, 20, 36, 10, 10, 20]
  7. data['categories'] = categories
  8. data['values'] = values
  9. print("echerts=",data)
  10. return HttpResponse(json.dumps(data), content_type="application/json")

展示效果:

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号