板块整改中力导向布局图
事件河流图
主题预览 ，主题定制调试工具
ps:别太依赖代码编辑区，没做本地缓存，页面刷新就没了，建议使用一个本地编辑器编辑主题，只用代码区作为主题定制调试工具。主题写好试试顶部的SaveAsImage（IE8-不支持），会把所有图表合并到一张图中，这是默认样式，期待与我们联系，show出你的主题，让你的设计成为ECharts内置甚至默认主题随时有可能，我们将为您献上一份小礼品同时你的名字将被永留在贡献者名单中。
专题页没做低版本IE兼容性处理，请用IE9+、chrome、safari、firefox或opear等现代浏览器。
by （百度） · （百度）
by 于博（新华社） · 吴楚茵（南方都市报） · （百度）
by 孟立昕（腾讯）· 王飞宇（证券时报） · 颜冬（视觉中国） · （百度）
by （北京理工大学软件学院）
by （CSDN开源夏令营）数据-echarts地图怎么用，这个是静态的，怎么与后台连接写成动态的,麻烦有用过的解决一下
作者：用户
浏览：418 次
echarts地图怎么用，这个是静态的，怎么与后台连接写成动态的,麻烦有用过的解决一下40C&scripttype="text/javascript"&option={title:{tex
echarts地图怎么用，这个是静态的，怎么与后台连接写成动态的,麻烦有用过的解决一下
&script type="text/javascript"&
option = {
text: '地区分布统计注册量',
subtext: '2015年度',
x:'center'
tooltip : {
//tooltip提示框，鼠标悬浮交互时的信息提示
trigger: 'item' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
//legend图例
orient: 'vertical',//布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
x: 'left',
data:['男','女','未知'] //图例内容数组
dataRange: { //dataRange值域选择
min: 0,//指定的最小值，eg: 0，默认无，必须参数，唯有指定了splitList时可缺省min。
max: 2500,
x: 'left',//水平安放位置，默认为全图左对齐，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
y: 'bottom',//垂直安放位置，默认为全图底部，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
text:['高','低'],
// 文本，默认为数值文本
calculable : true //是否启用值域漫游，启用后无视splitNumber和splitList，值域显示为线性渐变
toolbox: { //toolbox
show: true,
orient : 'vertical',//布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
roamController: { //缩放漫游组件
show: true,
x: 'right',
mapTypeControl: { //必须，指定漫游组件可控地图类型，如：{ china: true }
'china': true
series : [ //通用,驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效
name: '男',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '云南',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '黑龙江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山东',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江苏',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '广西',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '陕西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '贵州',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
name: '女',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
name: '未知',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
};&/script&
json类型的数据ajax请求就可以
解决方案二：
这个我知道，可是这个该怎么写？怎么去封装？这个东西我没用过，不知道该怎么整
解决方案三：
那些数据需要动态调用的，你用ajax动态回去后在配置option选项，将返回的值赋值给option，最后在生成echarts
&script type="text/javascript" src="/ajax/jQuery/jquery-1.4.1.min.js"&&/script&
$(function () {
url: 'xxxxx', cache: false, dataType: 'json',
error: function (xhr) { alert('错误：' + xhr.responseText) },
success: function (data) {
option = {
name: '未知',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
data: data///////////////
{ "name": "北京", "value": Math.round(Math.random() * 1000) },
{ "name": "天津" ,"value": Math.round(Math.random() * 1000) }
【云栖快讯】红轴机械键盘、无线鼠标等753个大奖，先到先得，云栖社区首届博主招募大赛9月21日-11月20日限时开启，为你再添一个高端技术交流场所&&
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供Echarts地图省市跳转数据展示_心得技巧_动态网站制作指南
Echarts地图省市跳转数据展示
来源：人气：107
&&&& 介于前一段时间做了省市地图跳转的东西，遇到了一些问题，如今做下总结，希望日后可以用到，也可以帮到遇到同样问题的朋友。
&&&&&& 前提：Echarts3.0（其他版本不知道情况是否相同）
一、数据准备
1、各省份对应的数据；
2、各城市对应的数据；
二、地图js下载
1、/download-map.html
此页面提供了中国地图、世界地图、各省地图的下载，支持js、json两种格式，当前采用js格式。
2、省市跳转，需要用到中国地图、各省地图，将其下载到本地，引用到自己的页面。
三、数据展示
1、页面引用了Echarts工具js和地图js后，需要添加几行代码：
&scrt type=&text/script&&
// 路径配置
require.config({
echarts: '/build/dist'
'echarts',
'echarts/chart/map'
2、其次页面创建一片区域供实例展示：
&div style=&border-style: border-width:1 border-color:#margin-top: 10background-color: #F4F4F4;&&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id=&main& style=&height:600margin-top: 20&&&/div&
3、js文件中，查询数据并进行图表初始化：
type : &post&,
url : &../../componentsStatistics/componentsvncGatherStatistics.do?&+params,
dataType : 'json',
async : false,//设置为同步操作就可以给全局变量赋值成功
success : function(data) {
optionData = data.rows[0];
myChart = echarts.init(document.getElementById('main'));
componentPrvncStatistic(myChart,optionData);
4、下面对componentPrvncStatistic方法进行说明：
1）数据接收、设置数据默认最大值
//数据准备
var seriesData = optionData.seriesD
//设置默认值为100
var maxFunnelValue = getMaxDataValue(seriesData);
if (maxFunnelValue==null || maxFunnelValue==&&) {
maxFunnelValue = 100;
2）注册配置以及事件，省名称列表初始化，省名称要是以下形式，省份地图才会展示，需要做好配对。
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
var curIndx = 0;
var flag =
var mapType = [
'广东', '青海', '四川', '海南', '陕西',
'甘肃', '云南', '湖南', '湖北', '黑龙江',
'贵州', '山东', '江西', '河南', '河北',
'山西', '安徽', '福建', '浙江', '江苏',
'吉林', '辽宁', '台湾',
// 5个自治区
'新疆', '广西', '宁夏', '内蒙古', '西藏',
// 4个直辖市
'北京', '天津', '上海', '重庆',
// 2个特别行政区
'香港', '澳门'
3）点击某个省份时，对于城市名称比较密集的省份，屏蔽名称展示（如果有好的解决方法，欢迎留言，感谢！）
myChart.on('click', function (param){
var len = mapType.
var mt = mapType[curIndx % len];
if (mt == 'china') {
// 全国选择时指定到选中的省份
var selected = param.
for (var i = 0 ; i& i++) {
if (selected) {
if(mt==&海南&||mt==&北京&||mt==&天津&||mt==&重庆&||mt==&上海& ){
while (len--) {
if (mapType[len] == mt) {
curIndx = 0;
mt = 'china';
option.series[0].mapType =
option.series[0].itemStyle.normal.label.show =
myChart.setOption(option);
4）option准备
option = {
text : '采集省统计'
//图表标题名称
//&& &&&&&&&& subtext : '（点击切换）'
tooltip : {
trigger: 'item'
orient: 'vertical',
x:'right',
data:['采集数量（个）']
dataRange: {
max: maxFunnelValue,
color:['#4198E6','#E0FFFF'],
//端值对应的颜色
text:['高','低'],
// 文本，默认为数值文本
calculable : true
color:['#2ECBCA','#B6A2DF','#59B1F0','#FFB880','#87CEFA'],
//图例的颜色
toolbox: {
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
series : [
name: '采集数量（个）',
type: 'map',
mapType: 'china',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:flag}},
//地图初始化城市名称是否展示
emphasis:{label:{show:true}}
//鼠标移入城市名称是否展示
data:function(){
var serie=[];
var data = seriesData[0].dataA
for(var i=0;i&data.i++){
var item = {name:data[i].name,
value:data[i].value
serie.push(item);
//此处的括号不可省略
myChart.setOption(option);
window.onresize = myChart.
&&&&&&& 以上是整个流程的概要说明，其中有很多地方有不足之处，还请批评指正！初学者可以参考思路，结合官方的Demo进行使用。
5、结果展示：
1）全国地图展示：
2）某个省份
优质网站模板