前端由vue+element搭建框架，引入vue和element的index.js和css就可以寫頁面；

?頁面和js可以echarts官網(wǎng)實例看下都是有的，主要看下如何動態(tài)賦值：

柱狀圖和列表：

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

js:

var vue = new Vue({el: '#app',data: {tableData:[],},created: function () {this.initTable();},getChartOption(data){var option = {title: {text: '按辦理單位任務(wù)統(tǒng)計',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;

?效果：

?

轉(zhuǎn)載于:https://www.cnblogs.com/wmqiang/p/11008769.html

總結(jié)

以上是生活随笔為你收集整理的vue+element+echarts柱状图+列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。