• echarts图表绑定数据


    <div class="col-xs-12 col-md-12">
    <label style=" 200px;font-size: 16px;font-weight:bold;">事件发生地点</label>
    </div>
    <div class="col-xs-12 col-md-12">
    <div class="col-md-6 col-sm-6">
    <div style="padding: 20px;">
    <!-- <h4 class="center">总人数</h4> -->
    <div id="c1" style="background: none; 100%; height: 200px; position: relative;"
    _echarts_instance_="ec_1478157057300">
    <div style="border- 0px; margin: 0px; padding: 0px; 343px; height: 300px; overflow: hidden; position: relative; cursor: default;">
    <canvas width="343" height="300" style="border- 0px; margin: 0px; padding: 0px; left: 0px; top: 0px; 343px; height: 300px; position: absolute;"
    data-zr-dom-id="zr_0"></canvas>
    </div>
    <div style="font: 14px/21px Microsoft YaHei; padding: 5px; border-radius: 4px; border: 0px solid rgb(51, 51, 51); transition:left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); left: 114px; top: 97.13px; color: rgb(255, 255, 255); display: none; white-space: nowrap; position: absolute; z-index: 9999999; font-size-adjust: none; font-stretch: normal; background-color: rgba(50, 50, 50, 0.7); -webkit-transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); -moz-transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);">
    访问来源
    </div>
    </div>
    </div>
    </div>
    <div class="col-md-5 col-sm-5">
    <table class="list" width="98%">
    <thead>
    <tr>
    <th align="center" style=" 50%;height: 40px;">事件发生地点</th>
    <th align="center" style=" 50%;height: 40px;">次数</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${addresslist}" var="address" varStatus="s">
    <tr>
    <td align="center" style=" 50%;height: 40px;">${address.addressname}</td>
    <td align="center" style=" 50%;height: 40px;">${address.addressnum}</td>
    </tr>
    </c:forEach>
    </tbody>
    </table>
    </div>
    </div>

    // 基于准备好的dom,初始化echarts实例
    var c1 = echarts.init(document.getElementById('c1'));

    // 指定图表的配置项和数据
    var option1 = {
    tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
    orient: 'vertical',
    x: 'left',
    data:[
    <c:forEach items="${addresslist}" var="address" varStatus="s">
    {name :'${address.addressname}',},
    </c:forEach>
    ],
    },
    series: [
    {
    name:'访问来源',
    type:'pie',
    radius: ['50%', '70%'],
    avoidLabelOverlap: false,
    label: {
    normal: {
    show: false,
    position: 'center'
    },
    emphasis: {
    show: true,
    textStyle: {
    fontSize: '30',
    fontWeight: 'bold'
    }
    }
    },
    labelLine: {
    normal: {
    show: false
    }
    },
    data:[
    <c:forEach items="${addresslist}" var="address" varStatus="s">
    {name :'${address.addressname}',value:"${address.addressnum}",},
    </c:forEach>
    ]
    },
    ],
    };

    // 使用刚指定的配置项和数据显示图表。
    c1.setOption(option1);

    当能力支撑不了野心时,就该静下心来学习!
  • 相关阅读:
    如何将Superset嵌入后台系统之实践
    如何将Superset嵌入后台系统之实践
    SQL server添加链接服务器脚本
    面试题:JQuery有几种选择器?
    数据库增加索引
    Mybatis与Ibatis比较
    jQuery 选择器
    Form 和 Input 对象
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
  • 原文地址:https://www.cnblogs.com/1234cjq/p/6179792.html
Copyright © 2020-2023  润新知