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

解决数据可视化项目layui表格前后端处理增删改查的问题

一、前端（Layui）引用Table表格

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

<div class="layui-col-sm4" >   #定义布局大小（通过更改sm后的数字，数字越大布局越大）
        <div class="layui-card">   #定义卡片块
              <div class="layui-tab layui-tab-brief layadmin-latestData">
                <ul class="layui-tab-title">
                  <li class="layui-this">音乐榜热搜</li>
                  <li>今日热帖</li>
                </ul>
                <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show">
                    <table id="musictop"></table>    #定义表格id,作为关键字链接script
                  </div>
                  <div class="layui-tab-item">
                    <table id="LAY-index-topCard"></table>
                  </div>
                </div>
              </div>
         </div>
</div>

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

#引入layui.js文件,根据情况改成自己layui.js所在目录
  <script src="../../layuiadmin/layui/layui.js"></script>   
  <script type="text/javascript"  >
        layui.use(['form', 'layer', 'table', 'laytpl', 'laydate'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,
                laytpl = layui.laytpl,
                table = layui.table,
                laydate = layui.laydate;

            //绑定时间选择器
            laydate.render({
                elem: '#startTime'

            });
            laydate.render({
                elem: '#endTime'
            });

            //渲染数据表格
           table.render({
                elem: '#musictop'    #表格id关键字
                , url: "/selectmusic"
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                         "count": res.count, //解析数据长度
                          "page":res.page,//当前页
                        "limit":res.limit,//当前页数据条数
                        "data": res.data,//解析数据列表
                        "pages":res.pages
                    };
                }
                   ,response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                   }
                 , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , page: true
                #定义表格id
                , id: 'table'
                , defaultToolbar: ['filter', 'exports', 'print',]
                , title: '微博热搜Top50'
                , height: '550'
                , cols:
                    [[
                    {#{ type: 'checkbox', fixed: 'left' }#}

                     { field: '排名', title: '排名', height:10,width: 75, align: 'center' , sort: true }
                    , {field: '标题', title: '标题', height:10,width: 200, align: 'center' , sort: true}
                    , {field: '热度', title: '热度', height:10,width: 100, align: 'center' , sort: true}
                    ]]
            });
		#表格搜索
		#绑定查询按钮id关键字
        $('#search').on('click', function () {   
        		#绑定查询字段id关键字
                var 排名 = $('#排名').val();    
                //执行重载
                if ( 排名== "") {
                    layer.msg("请先输入数据再查询")
                } else {
                	#绑定需要执行搜索表格重载的表格id
                    table.reload('table', {
                        #绑定搜索方法url
                        url: "/search/"
                        , method: "get"
                        , where: {
                            "排名": 排名,
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    })
                }
            });
        })
</script>

4.查看前端运行情况

可以正常进行展示

二、后端

1.在url.py定义前端调用的url并绑定函数

urlpatterns = [
	path('selectmusic/',sql_data.selectmusic),
    path('search/',sql_data.search),
]

2.在函数中编写调用方法

查询功能

def selectmusic(request):
    nowPage = request.GET.get("page")
    limit = request.GET.get("limit")
    if limit == "":
        limit = 5
    data = connect.con("select 序号,排名,标题,热度,采集时间 from music_top  ORDER BY `采集时间` DESC ,`排名` limit 50;")

    paginator = Paginator(list(data), int(limit))

    if int(nowPage) >= int(paginator.num_pages):
        nowPage = paginator.num_pages
    try:
        page = paginator.page(nowPage)
    except:
        page = paginator.page(paginator.num_pages)

    data = {
        'data': list(page),
        'code': "200",
        'count': paginator.count,
        'page': page.number,
        'limit': page.__len__(),
        'pages': paginator.num_pages
    }
    return JsonResponse(data)
    
def search(request):
    r = request.GET.get("排名")
    nowPage = request.GET.get("page")
    limit = request.GET.get("limit")
    if limit == "":
        limit = 5
    if r != "":
        data = connect.con("select * from weibo_top where `排名`= %r ORDER BY `采集时间` DESC ,`排名` limit 50 "%r)
    paginator = Paginator(list(data), int(limit))
    if int(nowPage) >= int(paginator.num_pages):
        nowPage = paginator.num_pages
    try:
        page = paginator.page(nowPage)
    except:
        page = paginator.page(paginator.num_pages)
    data = {
        'data': list(page),
        'code': "200",
        'count': paginator.count,
        'page': page.number,
        'limit': page.__len__(),
        'pages': paginator.num_pages
    }
    return JsonResponse(data)