<template>
<div>
<div id="leftBottom" style="width:6.75rem;height:3.375rem;"></div>
</div>
</template>
<script>
const echarts = require("echarts");
export default {
data() {
return {};
},
mounted() {
this.drawPie();
},
methods: {
drawPie() {
// 基于准备好的dom,初始化echarts实例
let myChartLeftCenter = echarts.init(
document.getElementById("leftBottom")
);
var colors = ["#3498ff", "#55d3c7"];
let option = {
color: colors,
backgroundColor: 'rgba(255, 255, 255,0)',
tooltip: {},
legend: {
data: ['学校', '企业'],
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10,
},
},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
textStyle: {
color: '#ffffff', //坐标的字体颜色
},
},
},
yAxis: {
type: 'category',
data: ['2020', '2019', '2018'],
axisLabel: {
textStyle: {
color: '#ffffff', //坐标的字体颜色
},
},
},
series: [{
name: '学校',
type: 'bar',
data: [20, 80, 30]
},
{
name: '企业',
type: 'bar',
data: [10, 50, 70]
}
]
};
myChartLeftCenter.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartLeftCenter.resize(), false);
}
},
destroyed() {
window.onresize = null;
}
};
</script>