省直辖市自定义区域颜色echarts <br>' + param.data.goodsList[0].price + param.data.goodsList[0].unit } }, itemStyle: { normal: { borderColor: '#000配置项内容和展示
已知区域颜色是自定义区域颜色（省直辖市）
配置项如下
var dataMap = [{
"areaId": "CN-9684",
"areaColor": "#90baf2",
"areaName": "天津市",
"goodsList": [{
"unit": "元/公斤",
"price": 33.44,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-1",
"areaColor": "#458ef1",
"areaName": "上海市",
"goodsList": [{
"unit": "元/公斤",
"price": 35.41,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-43459",
"areaColor": "#5c9bf1",
"areaName": "青海省",
"goodsList": [{
"unit": "元/公斤",
"price": 34.39,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-18757",
"areaColor": "#ccd9eb",
"areaName": "新疆",
"goodsList": [{
"unit": "元/公斤",
"price": 31.59,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-19840",
"areaColor": "#5c9bf1",
"areaName": "江苏省",
"goodsList": [{
"unit": "元/公斤",
"price": 34.54,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-21395",
"areaColor": "#458ef1",
"areaName": "江西省",
"goodsList": [{
"unit": "元/公斤",
"price": 35.28,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-33784",
"areaColor": "#90baf2",
"areaName": "甘肃省",
"goodsList": [{
"unit": "元/公斤",
"price": 33.33,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-11966",
"areaColor": "#a7c7f2",
"areaName": "山东省",
"goodsList": [{
"unit": "元/公斤",
"price": 32.56,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-41593",
"areaColor": "#90baf2",
"areaName": "陕西省",
"goodsList": [{
"unit": "元/公斤",
"price": 33.42,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-3475",
"areaColor": "#76abf4",
"areaName": "北京市",
"goodsList": [{
"unit": "元/公斤",
"price": 33.76,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-31233",
"areaColor": "#2e81f3",
"areaName": "湖南省",
"goodsList": [{
"unit": "元/公斤",
"price": 35.85,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-15591",
"areaColor": "#276fd3",
"areaName": "广东省",
"goodsList": [{
"unit": "元/公斤",
"price": 37.21,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-10215",
"areaColor": "#76abf4",
"areaName": "安徽省",
"goodsList": [{
"unit": "元/公斤",
"price": 34.14,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-3815",
"areaColor": "#a7c7f2",
"areaName": "吉林省",
"goodsList": [{
"unit": "元/公斤",
"price": 32.8,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-40518",
"areaColor": "#2e81f3",
"areaName": "重庆市",
"goodsList": [{
"unit": "元/公斤",
"price": 36.07,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-17313",
"areaColor": "#2a78e3",
"areaName": "广西",
"goodsList": [{
"unit": "元/公斤",
"price": 36.78,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-29887",
"areaColor": "#5c9bf1",
"areaName": "湖北省",
"goodsList": [{
"unit": "元/公斤",
"price": 34.7,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-35288",
"areaColor": "#2a78e3",
"areaName": "福建省",
"goodsList": [{
"unit": "元/公斤",
"price": 36.73,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-29627",
"areaColor": "#2467c3",
"areaName": "海南省",
"goodsList": [{
"unit": "元/公斤",
"price": 38.2,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-237",
"areaColor": "#458ef1",
"areaName": "云南省",
"goodsList": [{
"unit": "元/公斤",
"price": 34.97,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-28009",
"areaColor": "#276fd3",
"areaName": "浙江省",
"goodsList": [{
"unit": "元/公斤",
"price": 37.3,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-38897",
"areaColor": "#a7c7f2",
"areaName": "辽宁省",
"goodsList": [{
"unit": "元/公斤",
"price": 32.43,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-1815",
"areaColor": "#ccd9eb",
"areaName": "内蒙古",
"goodsList": [{
"unit": "元/公斤",
"price": 32.25,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-43919",
"areaColor": "#a7c7f2",
"areaName": "黑龙江省",
"goodsList": [{
"unit": "元/公斤",
"price": 32.31,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-14059",
"areaColor": "#90baf2",
"areaName": "山西省",
"goodsList": [{
"unit": "元/公斤",
"price": 33.01,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-4771",
"areaColor": "#2e81f3",
"areaName": "四川省",
"goodsList": [{
"unit": "元/公斤",
"price": 36.18,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-36492",
"areaColor": "#5c9bf1",
"areaName": "西藏",
"goodsList": [{
"unit": "元/公斤",
"price": 34.39,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-23078",
"areaColor": "#90baf2",
"areaName": "河北省",
"goodsList": [{
"unit": "元/公斤",
"price": 32.94,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-9947",
"areaColor": "#a7c7f2",
"areaName": "宁夏",
"goodsList": [{
"unit": "元/公斤",
"price": 32.78,
"goods": "外三元",
"priceUp": false
}]
}, {
"areaId": "CN-25475",
"areaColor": "#76abf4",
"areaName": "河南省",
"goodsList": [{
"unit": "元/公斤",
"price": 34.13,
"goods": "外三元",
"priceUp": true
}]
}, {
"areaId": "CN-37257",
"areaColor": "#2a78e3",
"areaName": "贵州省",
"goodsList": [{
"unit": "元/公斤",
"price": 36.7,
"goods": "外三元",
"priceUp": true
}]
}]
var dataList = dataMap.map(function(item) {
let i = {
name: item.areaName.replace(/['市','省']/g, ""),
value: 0,
goodsList: item.goodsList,
itemStyle: {
areaColor: item.areaColor
},
emphasis: {
label: {
show: false
},
itemStyle: {
areaColor: item.areaColor,
opacity: 0.8
}
}
}
return i;
});
dataList.push({
name: "南海诸岛",
value: 0,
itemStyle: {
areaColor: '#ccd9eb'
}
})
// var dataList1 = [{
// name: "南海诸岛",
// value: 0,
// itemStyle: {
// areaColor: '#458ef1'
// }
// },
// {
// name: '北京',
// value: 54,
// itemStyle: {
// areaColor: '#276fd3'
// }
// },
// {
// name: '天津',
// value: 13
// },
// {
// name: '上海',
// value: 40
// },
// {
// name: '重庆',
// value: 75
// },
// {
// name: '河北',
// value: 13,
// itemStyle: {
// areaColor: '#276fd3'
// }
// },
// {
// name: '河南',
// value: 83
// },
// {
// name: '云南',
// value: 11
// },
// {
// name: '辽宁',
// value: 19
// },
// {
// name: '黑龙江',
// value: 15
// },
// {
// name: '湖南',
// value: 69
// },
// {
// name: '安徽',
// value: 60
// },
// {
// name: '山东',
// value: 39
// },
// {
// name: '新疆',
// value: 4
// },
// {
// name: '江苏',
// value: 31
// },
// {
// name: '浙江',
// value: 104
// },
// {
// name: '江西',
// value: 36
// },
// {
// name: '湖北',
// value: 1052
// },
// {
// name: '广西',
// value: 33
// },
// {
// name: '甘肃',
// value: 7
// },
// {
// name: '山西',
// value: 9
// },
// {
// name: '内蒙古',
// value: 7
// },
// {
// name: '陕西',
// value: 22
// },
// {
// name: '吉林',
// value: 4
// },
// {
// name: '福建',
// value: 18
// },
// {
// name: '贵州',
// value: 5
// },
// {
// name: '广东',
// value: 98
// },
// {
// name: '青海',
// value: 1
// },
// {
// name: '西藏',
// value: 0
// },
// {
// name: '四川',
// value: 44
// },
// {
// name: '宁夏',
// value: 4,
// itemStyle: {
// areaColor: '#a7c7f2'
// }
// },
// {
// name: '海南',
// value: 22
// },
// {
// name: '台湾',
// value: 3
// },
// {
// name: '香港',
// value: 5
// },
// {
// name: '澳门',
// value: 5
// }
// ];
option = {
tooltip: {
trigger: 'item',
},
series: [{
name: "区域价格",
type: "map",
map: "china",
data: dataList,
tooltip: {
formatter: function(param) {
//这里需要在按样式实现
// console.log(param.data.goodsList)
return param.data.name + '<br>' + param.data.goodsList[0].price + param.data.goodsList[0].unit
}
},
itemStyle: {
normal: {
borderColor: '#000',
borderWidth: 0,
}
},
label: {
normal: {
show: false
}
}
}]
};
// 实例
var chart = echarts.init(document.getElementById('chart-panel'));
chart.setOption(option, true);
截图如下
