话不多说,直接上效果图!更改表格数据,点击按钮自动生成新的数据图!
表格代码:
对数量这一列的所有 li 附上 id ,在表格上方添加个按钮,绑定点击事件
<div style="width: 1250px;height: 600px;margin:0 auto;margin-top: 1%;background-color:#000;border-radius: 10px 10px 10px 10px;position: relative">
<div id="main2" style="position: absolute;width: 100%;height: 100%;"></div>
<h1 style="color: #fefefe;position: absolute;margin-left: 5%">异常</h1>
<div id="sum_txr" style="position: absolute;width: 10%;height: 70px;margin-left: 25%;margin-top: 21%;text-align: center;color: #ff7000;font-size: 40px;padding-top: 12px;font-weight: bold"></div>
<button id="btn_tx_1" onclick="btn_tx_r()" class="btn btn-primary" style="position: absolute;margin-left: 70%;margin-top: 6%">生成图表</button>
<table class="table table-bordered" style="position: absolute;width: 20%;height: 20%;margin-left: 70%;margin-top: 10%">
<thead>
<tr style="color: #fefefe;font-size: 18px;background: #2795fe">
<th contenteditable="true">异常类型</th>
<th contenteditable="true">数量</th>
</tr>
</thead>
<tbody>
<tr style="color: #fefefe;font-size: 22px">
<td contenteditable="true">查找入库单</td>
<td contenteditable="true" id="tx_r1">0</td>
</tr>
<tr style="color: #fefefe;font-size: 22px">
<td contenteditable="true">次品</td>
<td contenteditable="true" id="tx_r2">106</td>
</tr>
<tr style="color: #fefefe;font-size: 22px">
<td contenteditable="true">入库多货</td>
<td contenteditable="true" id="tx_r3">0</td>
</tr>
<tr style="color: #fefefe;font-size: 22px">
<td contenteditable="true">来货不符</td>
<td contenteditable="true" id="tx_r4">56</td>
</tr>
<tr style="color: #fefefe;font-size: 22px">
<td contenteditable="true">入库错误</td>
<td contenteditable="true" id="tx_r5">5</td>
</tr>
<tr style="color: #fefefe;font-size: 22px">
<td contenteditable="true">开箱短装</td>
<td contenteditable="true" id="tx_r6">115</td>
</tr>
</tbody>
</table>
</div>
饼图代码:
var myChart2 = echarts.init(document.getElementById('main2'));
var data_txr = [{"name": "查找入库单", "value": 0},
{"name": "次品", "value": 0},
{"name": "入库多货", "value": 0},
{"name": "来货不符", "value": 0},
{"name": "入库错误", "value": 0},
{"name": "开箱短装", "value": 0}]
option2 = {
color: ['#A0CE3A', '#31C5C0', '#1E9BD1', '#1d6cff', '#FFA005', '#FDFF02', '#FFA005', "rgba(250,250,250,0.3)"],
grid: {
bottom: 150,
left: 100,
right: '10%'
},
series: [
// 主要展示层的
{
radius: ['30%', '61%'],
center: ['30%', '50%'],
type: 'pie',
label: {
normal: {
show: true,
formatter: "{b}:"+"{c}",
textStyle: {
fontSize: 24,
},
position: 'outside'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length: 30,
length2: 5
},
emphasis: {
show: true
}
},
data: data_txr,
},
// 边框的设置
{
radius: ['30%', '34%'],
center: ['30%', '50%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: [{
value: 1,
itemStyle: {
color: "rgba(250,250,250,0.3)",
},
}],
}, {
name: '外边框',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['30%', '50%'],
radius: ['65%', '65%'],
label: {
normal: {
show: false
}
},
data: [{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#0b5263'
}
}
}]
},
]
};
按钮点击事件:
把饼图的数据与表格的数据做绑定,最后展示数据图
function btn_tx_r(){
data_txr[0].value = document.getElementById('tx_r1').innerHTML
data_txr[1].value = document.getElementById('tx_r2').innerHTML
data_txr[2].value = document.getElementById('tx_r3').innerHTML
data_txr[3].value = document.getElementById('tx_r4').innerHTML
data_txr[4].value = document.getElementById('tx_r5').innerHTML
data_txr[5].value = document.getElementById('tx_r6').innerHTML
document.getElementById('sum_txr').innerHTML = parseInt(data_txr[0].value) + parseInt(data_txr[1].value) + parseInt(data_txr[2].value) + parseInt(data_txr[3].value) + parseInt(data_txr[4].value) + parseInt(data_txr[5].value)
myChart2.setOption(option2,true)
}
其余小技巧:
饼图中间的数值是所有数值之和,实现方法就是单纯的把饼图的数值获取过来,转化为int格式,在进行相加求和,通过绑定点击按钮事件,在P标签显示出来。代码包含在上述代码中,自己看哈。