echarts地图动画和java_echarts 实现中国地图

实现效果如下

地图

//初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

//使用制定的配置项和数据显示图表

myChart.setOption(

{

//提示框组件

tooltip: {

show: false,//是否显示组件

trigger: 'item',//数据触发类型 item：数据图饼图触发 axis:坐标轴触发

formatter: '{b}'//地图 {b}(区域名称)

},

series: [{

name: '中国',

type: 'map',

mapType: 'china',

//selectedMode: 'multiple',

itemStyle: {//有2个状态 normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式

normal: {

label: {

show: true,

textStyle: {//标签的文本样式

fontSize: 18,

color: '#000'

}

},

borderColor: '#cdcdca',//边框颜色

borderWidth: 0.5,//边框线宽

areaStyle: {//区域样式

color: '#000'

}

},

emphasis: {

borderWidth: 0.5,

borderColor: '#cdcdca',

areaColor: '#fff',

label: {

shadowColor: '#000', //默认透明

shadowBlur: 10,

show: true,

textStyle: {

fontSize: 12,

color: '#3db77f'

}

}

}

},

label: {

normal: {

show: false,

},

emphasis: {

show: false,

}

},

data: [{

name: '黑龙江',

itemStyle: {

normal: {

areaColor: "#f2e9e4",

// borderWidth: 2

},

emphasis: {//高亮状态下的多边形和标签样式

borderWidth: 1,

borderColor: '#3db77f',

areaColor: '#fff',

label: {

shadowColor: '#000', //默认透明

shadowBlur: 10,

show: true,

textStyle: {

fontSize: 12,

color: '#3db77f'

}

}

}

},

label: {

normal: {

show: true,

textStyle: {

fontSize: 12,

color: '#0d6fb8'

}

},

emphasis: {

show: true,

color: '#3db77f'

}

}

}, {

name: '青海',

itemStyle: {

normal: {

areaColor: "#f2e9e4",

// borderWidth: 2

},

emphasis: {

// borderWidth: 1,

// borderColor: '#3db77f',

areaColor: '#f2e9e4',

label: {

shadowColor: '#000', //默认透明

shadowBlur: 10,

show: false,

textStyle: {

fontSize: 12,

color: '#3db77f'

}

}

}

}

}, {

name: '陕西',

itemStyle: {

normal: {

areaColor: "#f2e9e4",

// borderWidth: 2

},

emphasis: {

borderWidth: 1,

borderColor: '#3db77f',

areaColor: '#fff',

label: {

shadowColor: '#000', //默认透明

shadowBlur: 10,

show: true,

textStyle: {

fontSize: 12,

color: '#3db77f'

}

}

}

},

label: {

normal: {

show: true,

textStyle: {

fontSize: 12,

color: '#0d6fb8'

}

},

emphasis: {

show: true,

color: '#3db77f'

}

}

}, {

name: '广东',

itemStyle: {

normal: {

areaColor: "#f2e9e4",

// borderWidth: 2

},

emphasis: {

// borderWidth: 1,

// borderColor: '#3db77f',

areaColor: '#f2e9e4',

label: {

shadowColor: '#000', //默认透明

shadowBlur: 10,

show: false,

textStyle: {

fontSize: 12,

color: '#3db77f'

}

}

}

}

}, {

name: '广西',

itemStyle: {

normal: {

areaColor: "#daeadd",

// borderWidth: 2

},

emphasis: {

// borderWidth: 1,

// borderColor: '#3db77f',

areaColor: '#daeadd',

label: {

shadowColor: '#000', //默认透明

shadowBlur: 10,

show: false,

textS