echarts tooltip自动轮播 高亮显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts tooltip自动轮播 高亮显示相关的知识，希望对你有一定的参考价值。
参考技术A 柱状图tooltip自动轮播let myRank= this.$echarts.init(this.$refs.rank);
let option=
legend:
data: [
name: '销售总量',
icon: 'circle'
],
textStyle:
color: '#fff',
fontSize: 14,
fontFamily: 'PingFangSC',
fontWeight: 300
,
tooltip:
show:true,
trigger: 'axis',
axisPointer: // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
,
grid: [
height: 240,
top: 45,
left:100,
width: 420,
,
height: 240,
width: 420,
top: 45,
left:100,
],
xAxis:
name: "（万元）",
nameTextStyle:
color: '#fff',
fontSize: 16
,
axisLine:
lineStyle:
color: '#0177d4'
,
axisLabel:
color: '#fff',
fontSize: 16
,
splitLine:
show:false,
lineStyle:
color: '#0177d4'
,
interval:30,
max:120
,
yAxis:
data: ['民族','少儿','科技','美术','教育','万卷','人民','春风'],
axisLine:
lineStyle:
color: '#0177d4'
,
axisLabel:
color: '#fff',
fontSize: 14
,
series: [
name: '销售总量',
type: 'bar',
barWidth: 18,
itemStyle:
normal:
color:new this.$echarts.graphic.LinearGradient(0,0,0,1, [
offset: 0,
color: '#00b0ff'
,
offset: 0.8,
color: '#7052f4'
],false)
,
data: [1.0,1.63,1.66,1.86,10.80,12.69,30.34,118.0]
]
var faultByHourIndex= 0;//播放所在下标
var faultByHourTime= setInterval(function() //使得tootip每隔三秒自动显示
myRank.dispatchAction(
type: 'showTip',// 根据 tooltip 的配置项显示提示框。
seriesIndex: 0,
dataIndex: faultByHourIndex
);
faultByHourIndex++;
// faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
if (faultByHourIndex>= option.series[0].data.length)
faultByHourIndex= 0;
,3000 );
myRank.setOption(option)
饼状图高亮
var count= 0;
app.timeTicket= setInterval(function ()
myPeople.dispatchAction(
type: 'downplay',
seriesIndex: 0
);
myPeople.dispatchAction(
type: 'highlight',
seriesIndex: 0,
dataIndex: (count++)% 10
);
,1000);
Vue环境下用ECharts绘制中国地图，并实现拖动缩放与各省份自动轮播高亮显示
实现效果
完整代码+详细注释：
<template>
<div class="echart">
<div class="content">
<div id="map_cn"></div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import 'echarts/map/js/china.js' //这一步必须引入
export default
data()
return
//地图中的数据
dataList: [
name: "南海诸岛",
value: 25,
,
name: "北京",
value: 71,
,
name: "天津",
value: 52,
,
name: "上海",
value: 14,
,
name: "重庆",
value: 50,
,
name: "河北",
value: 20,
,
name: "河南",
value: 30,
,
name: "云南",
value: 55,
,
name: "辽宁",
value: 50,
,
name: "黑龙江",
value: 40,
,
name: "湖南",
value: 6,
,
name: "安徽",
value: 96,
,
name: "山东",
value: 75,
,
name: "新疆",
value: 45,
,
name: "江苏",
value: 15,
,
name: "浙江",
value: 8,
,
name: "江西",
value: 78,
,
name: "湖北",
value: 78,
,
name: "广西",
value: 36,
,
name: "甘肃",
value: 25,
,
name: "山西",
value: 140,
,
name: "内蒙古",
value: 85,
,
name: "陕西",
value: 85,
,
name: "吉林",
value: 74,
,
name: "福建",
value: 20,
,
name: "贵州",
value: 74,
,
name: "广东",
value: 47,
,
name: "青海",
value: 45,
,
name: "西藏",
value: 41,
,
name: "四川",
value: 3,
,
name: "宁夏",
value: 7,
,
name: "海南",
value: 7,
,
name: "台湾",
value: 200,
,
name: "香港",
value: 2,
,
name: "澳门",
value: 5,
],
//指定图表的配置项和数据
option:
//标题组件
title:
show: true,
text: '全国各省份旅游景点(已评级)数量',
subtext: '截至到2021年12月',
left: "center",
top: 16,
,
//提示框组件
tooltip:
show: true,
//触发类型：数据项图形触发
trigger: 'item',
padding: 10,
borderWidth: 1,
borderColor: '#409eff',
backgroundColor: 'rgba(255,255,255,0.4)',
textStyle:
color: '#000000',
fontSize: 12
,
//提示框内容格式器
formatter: (e) =>
let data = e.data;
//此处将各等级景点数量表示为0-10内的随机整数
data.five = Math.random() * 10 | 0;
data.four = Math.random() * 10 | 0;
data.three = Math.random() * 10 | 0;
data.two = Math.random() * 10 | 0;
data.one = Math.random() * 10 | 0;
//景点数量 - 五个等级之和
data.number = data.five + data.four + data.three + data.two + data.one;
//字符串模板
let context = `
<div>
<p style="line-height: 30px; font-weight: 600">$data.name</p>
<p><span>景点数量 : </span><span>$data.number处</span></p>
<p><span>5A级 : </span><span>$data.five处</span></p>
<p><span>4A级 : </span><span>$data.four处</span></p>
<p><span>3A级 : </span><span>$data.three处</span></p>
<p><span>2A级 : </span><span>$data.two处</span></p>
<p><span>1A级 : </span><span>$data.one处</span></p>
</div>
`;
return context;
,
//视觉映射组件(左下角)
visualMap:
show: true,
left: 26,
bottom: 40,
showLabel: true,
// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
calculable: false,
// 拖拽时，是否实时更新
realtime: true,
align: 'left',
//各颜色代表的区域
pieces: [
gte: 100,
label: "> 100",
color: "#FDB669"
,
gte: 50,
lt: 99,
label: "50 - 99",
color: "#FECA7B"
,
gte: 30,
lt: 49,
label: "30 - 49",
color: "#FEE191"
,
gte: 10,
lt: 29,
label: "10 - 29",
color: "#FFF0A8"
,
lt: 9,
label: '< 10',
color: "#FFFFBF"
]
,
//地理坐标系组件
geo:
//使用 registerMap 注册的地图名称
map: "china",
//是否开启鼠标缩放和平移漫游
roam: true,
//当前视角缩放比例
zoom: 1,
//滚轮缩放的极限控制
scaleLimit:
min: 1, //最小1倍
max: 3 //最大3倍
,
//地图组件离容器的距离
top: 90,
left: 'center',
//图形上的文本标签
label:
show: true,
fontSize: "11"
,
//地图区域的多边形 图形样式
itemStyle:
borderColor: "rgba(0, 0, 0, 0.2)",
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 10,
// 高亮状态(鼠标移入后)的多边形和标签样式
emphasis:
areaColor: "#f98333",
shadowOffsetX: 2,
shadowOffsetY: 2,
,
,
series: [
type: "map",
roam: true,
geoIndex: 0,
data: '',
label:
show: true,
]
,
;
,
methods:
//定义方法 draw_map 绘制中国地图
draw_map()
let myChart = this.$echarts.init(document.getElementById('map_cn'));
//高亮轮播展示
var hourIndex = 0;
var carouselTime = null;
//setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除
//使用setInterval方法后,必须使用箭头函数而不能写function,否则后续在该方法中无法调用data中的数据
//carouselTime =setInterval(function() //错误写法
carouselTime = setInterval(() =>
//dispatchAction echarts的API：触发图表行为
myChart.dispatchAction(
type: "downplay", //downplay 取消高亮指定的数据图形
seriesIndex: 0
);
myChart.dispatchAction(
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: hourIndex //数据index
);
myChart.dispatchAction(
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: hourIndex
);
hourIndex++;
//当循环到数组当中的最后一条数据后，重新进行循环
if (hourIndex > this.dataList.length)
hourIndex = 0;
, 3000);
//鼠标移入组件时停止轮播
myChart.on("mousemove", (e) =>
clearInterval(carouselTime); //清除循环
myChart.dispatchAction(
type: "downplay",
seriesIndex: 0,
);
myChart.dispatchAction(
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex
);
myChart.dispatchAction(
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex
);
);
//鼠标移出组件时恢复轮播
myChart.on("mouseout", () =>
carouselTime = setInterval(() =>
myChart.dispatchAction(
type: "downplay",
seriesIndex: 0,
);
myChart.dispatchAction(
type: "highlight",
seriesIndex: 0,
dataIndex: hourIndex
);
myChart.dispatchAction(
type: "showTip",
seriesIndex: 0,
dataIndex: hourIndex
);
hourIndex++;
if (hourIndex > this.dataList.length)
hourIndex = 0;
, 3000);
);
//显示地图
myChart.setOption(this.option);
,
//修改echart配制
setEchartOption()
this.option.series[0].data = this.dataList;
,
,
created()
this.setEchartOption();
,
mounted()
this.$nextTick(() =>
this.draw_map();
);
;
</script>
<style scoped lang="less">
.echart
width: 100%;
.content
width: 95.8%;
height: 100px;
margin: auto;
#map_cn
width: 65%;
height: 7rem;
background-color: #eaeaea;
margin: auto;
</style>
要点小结：
1.setTimeout() 与 setInterval() 的区别
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，只执行一次；
setInterval() 可在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除，多次调用。
2.使用 setInterval() 方法后，必须使用箭头函数形式而不能用 function
如果使用 function，后续在该方法中调用 data 中的数据如 console.log(this.dataList.length);会报如下错误(其实就是找不到该数据)；
这是因为 fun()、(function() ... )() 或回调函数中的 this 默认都指向 window，而 window 中是找不到你所要用的 data 中的数据的，我们应该改为箭头函数形式。
以上是关于echarts tooltip自动轮播 高亮显示的主要内容，如果未能解决你的问题，请参考以下文章
Vue环境下用ECharts绘制中国地图，并实现拖动缩放与各省份自动轮播高亮显示
vue 里怎么使用 echarts 实现地图自动轮播功能自定义 tooltip 悬浮位置提示自定义 label 标签位置样式？
原生 js 实现类 3d 地图大屏展示自动高亮轮播显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎