Echarts 饼状图实现自动高亮扇面

在网上找了很多案例，基本上都不太符合自己想要的，这里想要饼状图中的每一个区域在定时器的作用下，每隔几秒高亮其中一个扇面，代码思路如下：

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});// 显示 tooltipmyChart1.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、效果图如下

Echarts 饼状图实现自动高亮扇面相关推荐

echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
echarts饼状图的使用
echarts饼状图的使用地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...
Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
vue+echarts饼状图中间计算总数
饼状图中间显示总数值,效果图如下: dom结构: <div class="chart1" ref="chart1" style="width: ...

Echarts 饼状图实现自动高亮扇面

Echarts 饼状图实现自动高亮扇面相关推荐

最新文章

热门文章