flask动态传参与echarts可视化

最新推荐文章于 2024-03-29 13:24:37 发布

fan_yi_fan1220

最新推荐文章于 2024-03-29 13:24:37 发布

阅读量1.3k

点赞数 1

文章标签： flask python 后端 echarts

本文链接：https://blog.csdn.net/m0_58715773/article/details/124770273

版权

首先我们在数据处理中面对数据可能不知道如何进行可视化操作，下面我来讲一下简单的echarts与flask的联用。

首先配上我运行图

不多说了来干flask 首先在pycharm 下载flask模块
然后创建这样的目录

3.创建bbb.html,然后看我的html的位置是放在templats中的 (你也用你的方式，这里只是举个例子)

4.创建一个py文件

5.先进行测试

代码如下看是否flask 能打开访问5000端口

正常的运行应该是

这样的点击可以跳转到上面的bbb.html 这就可以了

进入echarts官网下载他的 echarts.min.js 文件

复制他的那个示例代码放进自己的bbb.html像这样

bbb.html页面是这样的观察一下echarts官网中的 option 下的代码与我的图片中的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  引用echos-->
<!--    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>-->
    <script src="../static/assets/js/echarts.min.js"></script>
</head>
<body>
    <div id="demo1" style="width: 600px;height: 600px;"></div>
<script>
    var myChart = echarts.init(document.querySelector("#demo1"))
    var option =  {
        backgroundColor: '#2c343c',
        title: {
            text: 'Customized Pie',
            left: 'center',
            top: 20,
            textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data:{{data|tojson}}.sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};
    myChart.setOption(option)
</script>
</body>
</html>

再有一个我这个是做的动态传参数显示的所以我先写了个爬虫取出 name 与value

然后就开始动态传入bbb.html(aq就是上图的那个列表数据)

这里一定要注意一下 value和name 必须与echarts上的名称一样也即是这个

最后运行

截图

最后需要源码的

我后期会放到github上

本人小白勿喷

fan_yi_fan1220

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
flask动态传参与echarts可视化

首先我们在数据处理中面对数据可能不知道如何进行可视化操作，下面我来讲一下简单的echarts与flask的联用。首先配上我运行图不多说了来干flask 首先在pycharm 下载flask模块然后创建这样的目录3.创建bbb.html,然后看我的html的位置是放在templats中的 (你也用你的方式，这里只是举个例子)4.创建一个py文件5.先进行测试代码如下看是否flask 能打开访问5000端口正常的运行应该是这样的点...
复制链接

扫一扫