76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<template>
|
|
<div class="chart" id="MAC" style="width: 100%; height: 100%"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: 'MyAChart',
|
|
data() {
|
|
return {
|
|
// 项目查询参数
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 5,
|
|
pjName: null,
|
|
pjDone: null,
|
|
pjType: null,
|
|
pjDept: null,
|
|
},
|
|
// 数据收集表格数据
|
|
infoList: [],
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
this.initAie();
|
|
},
|
|
methods: {
|
|
initAie() {
|
|
listInfo(this.queryParams).then(response => {
|
|
this.infoList = response.rows;
|
|
let gList = this.infoList;
|
|
let length = this.infoList.length;
|
|
let list1 = gList[length-1];
|
|
let list2 = gList[length-2];
|
|
let list3 = gList[length-3];
|
|
let chartDom = document.getElementById('MAC');
|
|
let myChart = echarts.init(chartDom);
|
|
let option;
|
|
option = {
|
|
/** 配置图标离容器上下左右的距离 */
|
|
grid: {
|
|
top: "10%",
|
|
right: "5%",
|
|
left: "5%",
|
|
bottom: "10%",
|
|
},
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['2014', list1.infoYear, list2.infoYear, list3.infoYear],
|
|
['环境', list1.infoEnvironment, list2.infoEnvironment , list3.infoEnvironment],
|
|
['社会', list1.infoSociety, list2.infoSociety, list3.infoSociety],
|
|
['治理', list1.infoGovern, list2.infoGovern, list3.infoGovern]
|
|
]
|
|
},
|
|
xAxis: { type: 'category' },
|
|
yAxis: {},
|
|
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
|
|
};
|
|
window.addEventListener('resize',function(){
|
|
myChart.resize();
|
|
})
|
|
option && myChart.setOption(option);
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|