echarts在页面上自定义更改数据

话不多说，直接上效果图！更改表格数据，点击按钮自动生成新的数据图！

表格代码：

对数量这一列的所有 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标签显示出来。代码包含在上述代码中，自己看哈。