地图自动轮播
需求:地图有数据的置灰并且不轮播,有数据的轮播展示数据
/*
请勿在原图上直接修改保存
*/
function mapTooltipClick(name) {
alert(name)
}
function tooltipCharts() {
console.log(arguments[0]);
var myChart1 = echarts.init(document.getElementById('tooltipBarId'));
var option = {
tooltip: {},
xAxis: {
type: 'category',
interval: true,
axisLabel: {
rotate: 45
},
axisTick: {
show: false
}
},
yAxis: {},
color: ['#4FA8F9', '#F5A623'],
grid: {
show: true,
backgroundColor: '#FAFAFA',
left: 30,
right: 20,
top: 20
},
series: [{
type: 'bar',
smooth: true,
seriesLayoutBy: 'row',
barWidth: 10
}]
};
myChart1.setOption(option);
}
option = {
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: false,
orient: 'horizontal',
inRange: {
color: ['#ccc', '#006edd'],
// symbolSize: [30, 100]
}
},
tooltip: {
padding:8,
enterable: true,
transitionDuration: 1,
textStyle: {
color: '#fff',
decoration: 'none',
}
},
series: [{
name: '接入医院数量',
type: 'map',
mapType: 'china',
itemStyle: {
normal: {
label: {
show: false
}
},
emphasis: {
label: {
show: true
}
}
},
label: {
normal: { //静态的时候展示样式
show: true, //是否显示地图省份得名称
textStyle: {
color: "#fff",
fontSize: 12
}
},
emphasis: { //动态展示的样式
color: '#fff',
},
},
data: [{
name: '北京',
value: 50,
},
{
name: '天津',
value: 100,
},
{
name: '上海',
value: 200,
},
{
name: '重庆',
value: 300,
},
{
name: '河北',
value: 400,
},
{
name: '河南',
value: 500,
},
{
name: '云南',
value: 600,
},
{
name: '辽宁',
value: 700,
},
{
name: '黑龙江',
value: 800,
},
{
name: '湖南',
value:900,
},
{
name: '安徽',
value: 1000,
}
]
}, ]
}
var count = 0;
var timeTicket = null;
var dataLength = option.series[0].data.length;
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: (count) % dataLength
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: (count) % dataLength
});
count++;
}, 2000);
myChart.on('mouseover', function(params) {
console.log(params)
clearInterval(timeTicket);
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
});
myChart.on('mouseout', function(params) {
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: (count) % dataLength
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: (count) % dataLength
});
count++;
}, 1000);
});