用echarts写了一个广州市地图,想实现轮播效果,但是一直出现不了轮播效果  function createChart() {
// 假设设备数量数据存储在一个对象数组中,每个对象包含区域名称和设备数量两个属性
var TABLE_DATA = getData('data2');
var deviceData = [
{ name: '荔湾区', value: TABLE_DATA['荔湾区'] },
{ name: '越秀区', value: 200 },
{ name: '海珠区', value: 300 },
{ name: '花都区', value: 300 },
{ name: '从化区', value: 300 },
{ name: '黄埔区', value: 300 },
{ name: '白云区', value: 300 },
{ name: '番禺区', value: 300 },
{ name: '天河区', value: 300 },
{ name: '南沙区', value: 300 },
{ name: '增城区', value: 300 }
];
// 手动添加地图数据,直接存储在变量中
var geoJson = https://geo.datav.aliyun.com/areas_v3/bound/440100_full.json
// 注册地图扩展
echarts.registerMap('guangzhou', geoJson);
// 配置地图数据
option = {
// 设置地图类型
series: [{
type: 'map3D',
map: 'guangzhou',
viewControl: {
autoRotate: false, // 是否开启自动旋转
distance: 200, // 地图初始距离视角中心的距离
alpha: 40, // 地图初始视角绕 x 轴的角度
beta: 20 // 地图初始视角绕 y 轴的角度
},
label: {
show: true,
color: '#FFFFFF'
},
// 开启缩放、拖拽、平移功能
roam: true,
roamDetail: {
x: 0,
y: 0,
zoomSpeed: 0.1,
zoomLock: false // 是否锁定 zoom 轴
},
itemStyle: {
borderColor: '#4096FE',
borderWidth: 1,
areaColor: '#1D5CBB',
color: '#1D5CBB'
},
// 强调样式,鼠标移动到区域时的样式
emphasis: {
label: {
show: true,
color: '#FFFFFF'
},
itemStyle: {
areaColor: '#4096FF'
}
},
data: TABLE_DATA
}],
tooltip: { // 提示框组件
formatter: '{b}<br><span style="color: #00B83F; border-radius:4px;width:4px;height:4px;"></span>总舆情:<span style="color: #00B83F;">{c}</span>条'
}
};
// 绘制地图
myChart.setOption(option);
setTimeout(()=>{
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0, // 针对series下第几个数据
dataIndex: 1
})},1000)
}
createChart(); |