echarts地图api series_基于Echarts的中国地图数据展示

一、概述

实际项目中大概率会遇到很多需要进行数据展示的地方，如折现图，柱状图等，今天给大家介绍一个更加炫酷的中国地图大数据展示，结合echarts免费开源第三方插件，可以实现自己的定制样式，定制提示。

二、演示效果

三、目录结构

项目构成：

引用：

四、详细步骤

1、首先给定一下全局样式、给个地图容器

*{margin:0;padding:0}

html,body{

width:100%;

height:100%;

}

#main{

width:800px;

height:600px;

margin: 150px auto;

border:1px solid #ddd;

}

/*建议长宽比0.75，符合审美*/

2、获取容器DOM，给定地图配置

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

myChart.setOption(option);

3、详细配置，定制样式，给自定义事件

option = {

tooltip: {

formatter:function(params,ticket, callback){

return params.seriesName+'
'+params.name+'：'+params.value

}

},

visualMap: {

min: 0,

max: 1500,

left: 'left',

top: 'bottom',

text: ['高','低'],

inRange: {

color: ['#e0ffff', '#006edd']

},

show:true

},

geo: {

map: 'china',

roam: false,

zoom:1.23,

label: {

normal: {

show: true,<