前端由vue+element搭建框架,引入vue和element的index.js和css就可以写页面;
页面和js可以echarts官网实例看下都是有的,主要看下如何动态赋值:
柱状图和列表:
js:
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;
效果: