Echarts笔记——高亮样式(1)饼图高亮显示
- 高亮样式类型 ( emphasis )
- 设置选中偏移量 (selectedOffset)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../js/echarts.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<title>高亮样式</title>
</head>
<body>
<div id="main" style="height: 800px;width:2200px"></div>
<script type="text/javascript">
var pieData = [
{name: '零食', value: 700,itemStyle:{color:'red'},label:{color:"green"}},
{name: '衣物', value: 2000},
{name: '化妆品', value: 1500},
{name: '数码产品', value: 1900},
{name: '生活用品', value: 1300},
]
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'))
$(function (ec) {
var option = {
title: {
text: '饼图高亮显示',
left: '25%',
textStyle:{
fontSize:30
}
},
legend: {
right:"15%"
},
tooltip: {},
emphasis:{ // 高亮样式
itemStyle:{
color:"yellow",
},
label:{
color:"black",
fontSize: 30
}
},
series: [{
type: 'pie',
data: pieData,
// radius:["45%","75%"],
roseType:'area', // 圆心角相同
label:{
show:true,
formatter:function (arg) {
// console.log(arg)
return arg.name + '类的支出为:' + arg.value + '元,占比为:' + arg.percent + "%"
},
fontSize:20
},
selectedMode:"multiple", // 多个选中
selectedOffset:30 // 选中偏移量
},
]
};
myChart.setOption(option)
})
</script>
</body>
</html>