代码触发 ECharts 中组件的行为
代码触发 ECharts 中组件的行为
别团等shy哥发育
发布于 2023-02-25 17:27:25
发布于 2023-02-25 17:27:25
代码可运行
运行总次数：0
代码可运行
饼图程序调用高亮显示
注意js文件存放的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts事件与行为</title>
<!--引入Echarts文件-->
<script src="../js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var dom=document.getElementById("main");
var myChart=echarts.init(dom);
var app={};
var option=null;
option = {
title: {
text: '饼图程序调用高亮示例',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: { //图例组件
//图例列表的布局朝向： horizontal垂直 veritical水平
orient: 'vertical',
left: 'left', //left:0 图例组件离容器左侧的距离。
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%', //饼图的外半径为可视区尺寸的55%长度
center: ['50%', '60%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: { //高亮的扇区和标签样式
itemStyle: {
shadowBlur: 10, //图形阴影的模糊大小
shadowOffsetX: 0,//阴影水平方向向上的偏移距离
shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影颜色
}
}
}
]
};
app.currentIndex = -1;
myChart.setOption(option);
setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 1000);
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-12-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
