基于django的可视化大屏编程

最新推荐文章于 2023-12-14 15:39:44 发布

TongXiaoM

最新推荐文章于 2023-12-14 15:39:44 发布

阅读量3.9k

点赞数 2

本文链接：https://blog.csdn.net/qq_43505386/article/details/101110489

版权

一、创建工程

1、在项目下创建模板static目录，并建立css、img、js目录

2、js目录下创建charts目录，其下创建bar.js、bar_vertical.js、heatmap.js、line.js、map.js、pie.js、rose.js、sandian.js、wordcloud.js文件

wordcloud.js的代码

function create_wordcloud(dom_id,data) {
    var chart = echarts.init(document.getElementById(dom_id));
    var option = {
      tooltip: {},
      series: [{
        type: 'wordCloud',
        gridSize: 2,
        sizeRange: [12, 50],
        rotationRange: [-90, 90],
        //shape: 'pentagon',
        width:100,
        height: 100,
        drawOutOfBound: true,
        textStyle: {
          normal: {
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: data
      }]
    };

    if (option && typeof option === "object") {
        chart.setOption(option, true);
    }
  }

dashboard.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>用户行为分析展示大屏</title>
        <link rel="stylesheet" href="/static/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/layui.css">
        <link rel="stylesheet" href="/static/css/site.css">
        <link rel="stylesheet" href="/static/css/dashboard.css">
        <script src="/static/js/jquery.min.js"></script>
        <script src="/static/js/bootstrap.min.js"></script>
        <script src="/static/js/echarts.min.js"></script>
        <script src="/static/js/echarts-wordcloud.min.js"></script>
        <script src="/static/js/shine.js"></script>
        <script src="/static/js/macarons.js"></script>
        <script src="/static/js/china.js"></script>
        <script src="/static/js/charts/pie.js"></script>
        <script src="/static/js/charts/map.js"></script>
        <script src="/static/js/charts/bar_vertical.js"></script>
        <script src="/static/js/charts/line.js"></script>
        <script src="/static/js/charts/rose.js"></script>
        <script src="/static/js/charts/heatmap.js"></script>
        <script src="/static/js/charts/bar.js"></script>
        <script src="/static/js/charts/sandian.js"></script>
        <script src="/static/js/charts/wordcloud.js"></script>
        <script src="/static/js/dashboard.js"></script>

    </head>
    <body>
        <div class="container">
            <div class="row" style="text-align:
                center;height:50px;font-weight:bolder;font-size:28px;color:white;b

最低0.47元/天解锁文章

TongXiaoM

关注

2
点赞
踩
45

收藏

觉得还不错? 一键收藏
2
评论
基于django的可视化大屏编程

一、创建工程1、在项目下创建模板static目录，并建立css、img、js目录2、js目录下创建charts目录，其下创建bar.js、bar_vertical.js、heatmap.js、line.js、map.js、pie.js、rose.js、sandian.js、wordcloud.js文件wordcloud.js的代码function crea...
复制链接

扫一扫