Django+Layui+Mysql数据可视化系统项目（二）

Powehi777

已于 2022-02-15 16:29:25 修改

阅读量1.2k

点赞数

分类专栏：数据可视化系统文章标签： echarts 前端 javascript

于 2022-02-14 16:16:00 首次发布

本文链接：https://blog.csdn.net/Powehi777/article/details/122923899

版权

数据可视化系统专栏收录该内容

5 篇文章 4 订阅

订阅专栏

Echarts图表的应用（联动和共享数据集）

解决数据可视化项目Echarts的后端传值问题

一、前端引用图表

使用静态数据展示，测试图表在前端的展示情况，调试布局情况
1.在head标签下引入echarts文件
可以引入Echarts最新版本号的js文件

<head>
  <meta charset="utf-8">
  <title>图表</title>
    <!--引入jquery.js-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <!-- 引入echarts.js（如果还是无法显示，可以尝试引入最新echarts.js的版本）-->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
</head>

2.在body标签下写入div文件

<div carousel-item id="echarts">

</div>

3.在script标签下写入js文件

<script>
var chartDom = document.getElementById('echarts');
var myChart = echarts.init(chartDom);
var option;

setTimeout(function () {
  option = {
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '55%' },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@2012} ({d}%)'
        },
        encode: {
          itemName: 'product',
          value: '2012',
          tooltip: '2012'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

option && myChart.setOption(option);
</script>

4.查看前端运行情况
echarts
可以正常进行展示

二、后端传值到前端

1.后端传值部分

def homepage2(request):
    #图表块数据
    data_time = connect.con('SELECT  substr(`采集时间`,1,7)as time from weibo_top GROUP BY time ORDER BY time')
    data_w = connect.con('SELECT  count(`序号`)as sum,substr(`采集时间`,1,7)as time from weibo_top GROUP BY time ORDER BY time')
    data_t = connect.con('SELECT  count(`序号`)as sum,substr(`采集时间`,1,7)as time from tieba_top GROUP BY time ORDER BY time')
    data_b = connect.con('SELECT  count(`序号`)as sum,substr(`采集时间`,1,7)as time from baidu_top GROUP BY time ORDER BY time')

    time = ['product']  #此处不可更改，作为echarts饼图链接关键字，更改了会出现饼图数据名称无法显示的问题
    list_w = ['微博']
    list_t = ['贴吧']
    list_b = ['百度']
    table = []
    for i in data_time:
        time.append(i['time'])
    for i in data_w:
        list_w.append(i['sum'])
    for i in data_t:
        list_t.append(i['sum'])
    for i in data_b:
        list_b.append(i['sum'])
    table = []
    table.append(time)
    table.append(list_w)
    table.append(list_t)
    table.append(list_b)
    
    return render(request, 'home/homepage2.html',{"time":time,"table":table})

2.前端受值部分

更改前端页面script标签下echarts_json的数据集部分

dataset: {
      source: {{ table|safe }}
    },

如此，传值到echarts图表即可成功
在这里插入图片描述

如果需要饼图和折线图展示不同的数据，可以参考如下文章
Echarts多图表联动共享数据集（多个数据集）

Powehi777

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Django+Layui+Mysql数据可视化系统项目（二）

Echarts图表的应用（联动和共享数据集）一、前端引用图表使用静态数据展示，测试图表在前端的展示情况，调试布局情况1.在head标签下引入echarts文件<head> <meta charset="utf-8"> <title>图表</title>  <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js
复制链接

扫一扫