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);

当能力支撑不了野心时,就该静下心来学习!
原文地址:https://www.cnblogs.com/1234cjq/p/6179792.html