上图为公司要求做的效果,做一个饼状图。这里记录一下第一次用的代码
<template>
<div id="echart_two"></div>
</template>
<script>
var echarts = require('echarts');
export default {
mounted(){
var myChart_two = echarts.init(document.getElementById('echart_two'));
myChart_two.setOption({
tooltip: {
trigger: 'item',//触发类型:item数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
formatter: "{a} <br/>{b}: {c} ({d}%)"//提示框浮层内容格式器,这里为字符串模板格式
},
legend: {
orient: 'vertical',//图例列表的布局朝向
x: 'left',
data:['访客','员工'],
textStyle: {
color: 'white'
}
},
color:['#8fbaeb', 'yellow'],//这里可以设置图标的颜色
series: [
{
name:'签到人数',
type:'pie',//这里为图标的类型
radius: ['60%', '80%'],//饼图的半径,数组的第一项是内半径,第二项是外半径
avoidLabelOverlap: false,//是否启用防止标签重叠策略,默认开启
label: {
normal: {
show: false,
position: 'center'
},
emphasis: { //高亮的扇区和标签样式
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{value:400, name:'访客'},
{value:200, name:'员工'}
]
}
]
});
}
}
</script>
基本上第一次用到的就这些,先记录这些~