<script type="text/javascript" src="/main/common/echarts/echarts.min.js"></script>

<div id="echart" style="width: 100%;height: 300px;margin-bottom: 10px"></div>

<el-table :data="tableData" border style="margin: 0 auto" row-class-name="row_padding"header-row-class-name="head_padding"><el-table-column fixed prop="processDeptName" label="单位名称" align="center" width="150" show-overflow-tooltip></el-table-column><el-table-column prop="acceptCount" label="本单位受理量"  align="center" show-overflow-tooltip></el-table-column><el-table-column prop="totalCount" label="办理总量"  align="center" show-overflow-tooltip></el-table-column>         <el-table-column prop="completedCount" label="正常完成"  align="center" show-overflow-tooltip></el-table-column><el-table-column prop="completedOverCount" label="超时完成"  align="center" show-overflow-tooltip></el-table-column><el-table-column prop="processCount" label="正常处理"  align="center" show-overflow-tooltip></el-table-column><el-table-column prop="processOverCount" label="超时处理"  align="center" show-overflow-tooltip></el-table-column><el-table-column prop="completedPercent" label="完成率"  align="center" show-overflow-tooltip></el-table-column></el-table>

var vue = new Vue({el: '#app',data: {tableData:[],},created: function () {this.initTable();},getChartOption(data){var option = {title: {text: '按办理单位任务统计',x:'center',textAlign:'left',top:'3%'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '1%',right: '1%',top: '15%',bottom:'10%',containLabel: true},backgroundColor:'#fff',xAxis: {type: 'category',data: data.nameList,axisLine:{lineStyle:{color:'#9a9a9a'}}},yAxis: {type: 'value',axisLine:{lineStyle:{color:'#9a9a9a'}}},series: [{data: data.valueList,type: 'bar',itemStyle:{normal:{color:'#427aff'}}}]};return option;},

var ele=document.getElementById('echart');var myChart = echarts.init(ele);var option=self.getChartOption({nameList:nameList,valueList:valueList});myChart.setOption(option);window.onresize = myChart.resize;