Django：python后端框架实战笔记

最新推荐文章于 2023-04-12 13:18:37 发布

userEdward.

最新推荐文章于 2023-04-12 13:18:37 发布

阅读量534

点赞数

本文链接：https://blog.csdn.net/weixin_44409057/article/details/88960111

版权

前端图表网页部分：

编译环境vscode，语言采用html，css，js，部分使用vue框架

使用vscode编写需要展示的HTML网页，以柱状图为例：

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>示例网页</title>
          <!-- 引入 echarts.js -->
          <script src="/static/echarts.common.min.js"></script>

     </head>
     <body>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main" style="width: 800px;height:400px;"></div>
          <script type="text/javascript">
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'));
              // 指定图表的配置项和数据
              myChart.setOption({
                   title: {
                        text: '发展规模指数'
                   },
                   tooltip: {},
                   legend: {
                        data: ['销量']
                   },
                   xAxis: {
                        data: {{ l1 }}
                   },
                   yAxis: {},
                   series: [{
                        name: '发展规模指数',
                        type: 'bar',
                        barWidth : '30%',
                        data: {{ l2 }},
                        itemStyle : {
                            normal: {
                                label : {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color:"black"
                                    }
                                }
                            }
                        }
                   }]
              });


          </script>
     </body>
</html>

为x轴坐标和y轴数据预留数据参数，预留参数由<l1，l2>传入