参考地址:https://blog.csdn.net/zhaolinru/article/details/90480045
使用 echarts-for-react组件,使用echart轮播高亮
1、定义全局变量
var index = 0; //播放所在下标
let mychart;
2、设置mychart
// echarts-for-react组件只有一个API getEchartsInstance
// 调用之后,mychart就可以使用echart的API了
// this.echartsReact是echarts-for-react组件的ref,完整代码中有
componentDidMount(){
echarts.registerMap('山东', this.state.geoJson);
mychart = this.echartsReact.getEchartsInstance()
this.autoTooltip()
}
3、轮播方法 dispatchAction
官网链接:https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction
// tooltip轮播
autoTooltip = () => {
const dataLength = this.props.mapData.length;
const _this = this;
setTimeout(function() {
mychart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index
});
index++;
if(index >= dataLength) {
index = 0;
}
_this.autoTooltip();
}, 2000);
}
4、完整代码
import React from 'react'
import style from '../index.less'
import echarts from 'echarts';
import ReactEcharts from "echarts-for-react";
import geoJson from 'echarts/map/json/province/shandong'
import mapTootipbg from '../../../assets/MedicalServers/mapTootipbg.png'
import mapTootipTitleBg from '../../../assets/MedicalServers/mapTootipTitleBg.png'
const geoCoordMap = {}
var index = 0; //播放所在下标
let mychart;
geoJson.features.forEach(function (v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;
});
let myChart = {};
class MapChart extends React.Component{
constructor(props){
super(props)
this.state = {
currentMap: 0,
geoJson: geoJson,
mapName: '山东',
mapProData: [],
}
this.echartsReact = React.createRef()
}
componentDidMount(){
echarts.registerMap('山东', this.state.geoJson);
mychart = this.echartsReact.getEchartsInstance()
this.autoTooltip()
}
// tooltip轮播
autoTooltip = () => {
const dataLength = this.props.mapData.length;
const _this = this;
setTimeout(function() {
mychart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index
});
index++;
if(index >= dataLength) {
index = 0;
}
_this.autoTooltip();
}, 2000);
}
getOption = () => {
const option = {
tooltip: {
show: true,
backgroundColor:'transparent',
textStyle:{
color:'#fff',
fontSize:10,
height:25,
lineHeight:25
},
formatter: function (obj) {
var value = obj.data.value;
return `<div style="background:url(${mapTootipbg}) no-repeat;background-size:100% 100%;width:210px;height:160px;padding:10px 20px;">
<div style="background:url(${mapTootipTitleBg}) no-repeat;background-size:100% 100%;width:132px;height:20px;padding-left:20px">
${obj.name}
</div>
xxx次数: ${value[0]} 人次<br>
xxx人次: ${value[1]} 人次<br>
xxxx人次: ${value[2]} 人次<br>
xxxxx人次: ${value[3]} 人次<br>
xxxxx费用: ${value[4]} 元<br>
</div>`
}
},
visualMap: {
type: 'continuous',
text: ['人次', ''],
showLabel: true,
right: '10',
min: 0,
max: 100000,
inRange: {
color: ['#006EFF','#00FFA8','#FFD800', '#FF4300']
},
splitNumber: 0,
itemWidth:14,
itemHeight:64,
align:'left',
textStyle:{
color:'#fff'
},
calculable:true
},
geo: {
show: true,
map: this.state.mapName,
roam: false,//是否开启鼠标缩放和平移漫游
label: {
emphasis: {
show: false //城市模式下,鼠标移上去不显示省份名称
}
},
itemStyle: {
normal: {
areaColor: '#eeeeee',
borderColor: '#111'
},
emphasis: {
areaColor: '#00a695',
}
}
},
series: [{
name: '山东省',
type: 'map',
mapType: this.state.mapName,
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
data: this.props.mapData
}]
}
return option
}
render(){
// let onEvents = {
// 'onload': this.onChartOnload,
// };
echarts.registerMap('mapName', this.state.geoJson);
return(
<ReactEcharts
ref={(e) => { this.echartsReact = e }}
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
style={{ height: "100%", marginRight: "85px", width: '100%' }}
// onEvents={(onEvents)}
/>
)
}
}
export default MapChart