html页面
<div id="EChart" style="width:100%; height: 180px;"></div>
js
<script>
import echarts from 'echarts'//引入
mounted () {
this.initData()
},
methods: {
initData() {
// 基于准备好的dom,初始化echarts实例
let EChart = this.$echarts.init(document.getElementById("EChart"));
// 配置参数
let config = {
tooltip: { //提示条的意思,
trigger: 'item' //trigger是触发器的意思,就是鼠标放上去显示的
},
title:{
text:'苹果',//标题文本
left:'center',
top:'55%',
textStyle:{//文本样式
fontSize: 15,
color:'rgba(255, 255, 255, 0.8)',
align:'center'
},
},,
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,//饼图内部false
},
emphasis: {
label: {
show: false//饼图上面的字为false
}
},
labelLine: {
show: true
},
data: [
{
value:60,name:'苹果',
label: {
show: true,
position: 'center', // 在饼图内部显示标签
color: '#ffffff',
fontSize:'20',
formatter: '{d}%'// 在饼图内部百分比
}
},
{ value: 40,name:'梨'},
]
}
],
};
// 设置参数
EChart.setOption(config)
}
}
</script>