62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
|
|
||
|
|
<template>
|
||
|
|
<div class="chart" id="MBC" style="width: 100%; height: 300px"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from 'echarts'
|
||
|
|
export default {
|
||
|
|
name: 'MyBChart',
|
||
|
|
mounted() {
|
||
|
|
this.initBie();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initBie() {
|
||
|
|
let chartDom = document.getElementById('MBC');
|
||
|
|
let myChart = echarts.init(chartDom);
|
||
|
|
let option;
|
||
|
|
option = {
|
||
|
|
title: {
|
||
|
|
subtext: '',
|
||
|
|
left: 'center'
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
orient: 'vertical',
|
||
|
|
left: 'left'
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '发展方向',
|
||
|
|
type: 'pie',
|
||
|
|
radius: '50%',
|
||
|
|
data: [
|
||
|
|
{ value: 1304, name: '环境' },
|
||
|
|
{ value: 735, name: '社会' },
|
||
|
|
{ value: 580, name: '治理' },
|
||
|
|
],
|
||
|
|
emphasis: {
|
||
|
|
itemStyle: {
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX: 0,
|
||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
window.addEventListener('resize',function(){
|
||
|
|
myChart.resize();
|
||
|
|
})
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
|
||
|
|
</style>
|