page.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <script type="text/javascript" src="{{static_url('pc/js/echarts.common.min.js')}}"></script>
  2. <script>
  3. // 基于准备好的dom,初始化echarts实例
  4. var myChart = echarts.init(document.getElementById('main'));
  5. var date = {% for key,value in enumerate(data['statList']) %}{% if key == 0 %}{% raw value['data']['time'] %}{% end %}{% end %};
  6. var series = [
  7. {% for key,value in enumerate(data['statList']) %}
  8. {% if key > 0 %},{% end %}
  9. {
  10. name:'{{value['name']}}',
  11. type:'line',
  12. data:{% raw value['data']['value'] %},
  13. markPoint: {
  14. data: [
  15. {type: 'max', name: '最大值'},
  16. {type: 'min', name: '最小值'}
  17. ]
  18. },
  19. markLine: {
  20. data: [
  21. {type: 'average', name: '平均值'}
  22. ]
  23. }
  24. }
  25. {% end %}
  26. ];
  27. // 指定图表的配置项和数据
  28. var option = {
  29. tooltip: {
  30. trigger: 'axis'
  31. },
  32. legend: {
  33. data:[{% for key,value in enumerate(data['statList']) %}{% if key > 0 %},{% end %}'{{value['name']}}'{% end %}]
  34. },
  35. xAxis: {
  36. type: 'category',
  37. boundaryGap: false,
  38. data: date
  39. },
  40. yAxis: {
  41. type: 'value',
  42. axisLabel: {
  43. formatter: '{value} {{data['type']['unit']}}'
  44. }
  45. },
  46. series: series
  47. };
  48. //myChart.showLoading();
  49. // 使用刚指定的配置项和数据显示图表。
  50. //myChart.hideLoading();
  51. myChart.setOption(option, true);
  52. </script>