Echarts 饼状图实现自动高亮扇面
在网上找了很多案例,基本上都不太符合自己想要的,这里想要饼状图中的每一个区域在定时器的作用下,每隔几秒高亮其中一个扇面,代码思路如下:1、引用echarts.min.js版本号以3.x.为例# 饼状图容器<div id="twoEchart" style="width: 210px;height: 100%"></d
·
在网上找了很多案例,基本上都不太符合自己想要的,这里想要饼状图中的每一个区域在定时器的作用下,每隔几秒高亮其中一个扇面,代码思路如下:
1、引用echarts.min.js版本号以3.x.为例
# 饼状图容器
<div id="twoEchart" style="width: 210px;height: 100%"></div>
2、饼状图详情实例
var myChart1 = echarts.init(document.getElementById('twoEchart'));
var option1 = {
color: ['#1e33ff', '#008fff', '#552de1', '#4f1577', '#50befe', '#c95be9', '#1221b4'],
tooltip: {
trigger: 'item',
backgroundColor: 'none',
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei'
},
position: function (point, params, dom, rect, size) {
$(dom).html('<div class="tip">\n' +
' <span class="name">' + params.name + '</span>\n' +
' <div class="num">' + params.value + '<span class="name">家</span></div>\n' +
' </div>');
return 'inside'
}
},
series: [
{
type: 'pie',
radius: '80%',
center: ['50%', '50%'],
label: {
normal: {
show: false
}
},
hoverOffset: 20,
startAngle: 90,
data: [
{value: 335, name: '小型企业'},
{value: 310, name: '一般工业企业'},
{value: 234, name: '第三产业'},
{value: 135, name: '建筑施工'},
{value: 1548, name: '畜禽养殖业'},
{value: 580, name: '污水处理厂'},
{value: 400, name: '固废处置单位'}
]
}
]
};
myChart1.setOption(option1);
var app = {
currentIndex: -1
};
setInterval(function () {
var dataLen = option1.series[0].data.length;
// 取消之前高亮的图形
myChart1.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// 高亮当前图形
myChart1.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex
});
// 显示 tooltip
myChart1.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 3000);
3、echarts中tooltip的dom样式文件
.tip{
width: 100%;
height: 100%;
display:flex;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.name{
font-size: 12px;
}
.num{
font-size: 18px;
}
4、效果图如下
更多推荐
已为社区贡献1条内容
所有评论(0)