场景需求：在使用echarts渲染的时候，有需求在页面中实现在echarts地图上叠加柱状图或者折线图，饼图等场景；
目前地图上叠加的代码是甘肃省的json文件，也可以更换成全国的或者其他省份的，有需要下载其他省份的json文件的可以私聊我；
目前实现的是echarts地图叠加柱状图，实现的效果图如下：
Renderings:
code show as below:
html代码如下
<Card class="cardBox leftBox">
<div id="proviceMap" ref="proviceMap"></div>
</Card>
js代码如下
<script>
//这里引入的是本地的json数据文件，目前是引用的甘肃省的JSON数据
import proviceJson from '../../../../../static/jsonData/ganSu.json'
export default {
name:"historicalResultsStatistics",
data(){
return{
searchForm:{
areas:[],
resultData:"",
time:"",
},
areasData:[],
typeListCode:[],
dataList:[
{
name: "兰州市", value: 540 ,value1:156},
{
name: "嘉峪关市", value: 830 ,value1:156},
{
name: "金昌市", value: 400,value1:156},
{
name: "白银市", value: 750,value1:156},
{
name: "天水市", value: 130,value1:156},
{
name: "武威市", value: 830,value1:156},
{
name: "张掖市", value: 110,value1:156 },
{
name: "平凉市", value: 19 ,value1:156},
{
name: "酒泉市", value: 1150,value1:156},
{
name: "庆阳市", value: 690,value1:156 },
{
name: "定西市", value: 960 ,value1:156},
{
name: "陇南市", value: 839 ,value1:156},
{
name: "临夏回族自治州", value: 639 ,value1:156},
{
name: "甘南藏族自治州", value: 139 ,value1:156},
],
myChart:null,
centerData:{
} ,//柱状图中心点的位置
}
},
created(){
var arr = proviceJson.features
arr.length>0 && arr.forEach((item,index) =>{
var obj = {
}
this.centerData[item.properties.name] = item.properties.center
})
},
mounted(){
this.$nextTick(() =>{
this.initProviceMap();
})
},
methods:{
// 初始化省级的地图
initProviceMap(){
var _this = this
this.$ECharts.registerMap('proviceJson', proviceJson)
this.myChart = this.$ECharts.init(this.$refs.proviceMap, null, {
renderer:'svg'});
this.myChart.off('click');
//echart 配制option
var options= {
tooltip: {
triggerOn: "mousemove", //mousemove、click
padding:8,
borderWidth:1,
borderColor:'#409eff',
backgroundColor:'rgba(255,255,255,0.7)',
textStyle:{
color:'#000000',
fontSize:13
},
},
visualMap: {
show:true,
left: 26,
bottom: 40,
showLabel:true,
pieces: [
{
gte: 1000,
label: ">= 1000",
color: "#5475f5"
},
{
gte: 700,
lt: 999,
label: "700 - 999",
color: "#e6ac53"
},
{
gte: 500,
lt: 699,
label: "500 - 699",
color: "#9feaa5"
},
{
gte: 100,
lt:499,
label: "100 - 499",
color: "#85daef"
},
{
gte: 10,
lt: 99,
label: "10 - 99",
color: "#74e2ca"
},
{
lt:10,
label:'<10',
color: "#9fb5ea"
}
]
},
geo: {
type: "map",
map:"proviceJson",
scaleLimit: {
min: 1,
max: 2
},
zoom: 1,
top: 120,
layoutSize: "100%", //保持地图宽高比
label: {
normal: {
show:true,
fontSize: "14",
color: "rgba(0,0,0,0.7)"
},
emphasis: {
show: false,
textStyle: {
color: "#F3F3F3"
}
}
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
areaColor: '#1955a4',
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
series: []
}
this.myChart.clear();
this.myChart.setOption(options , true);
this.myChart.resize();
//地图的点击事件
this.myChart.on('click', function(params) {
})
var option = {
xAxis: [],
yAxis: [],
grid: [],
series: [],
};
echarts.util.each(_this.dataList, function(dataItem, idx) {
var geoCoord = _this.centerData[dataItem.name];
var coord = _this.myChart.convertToPixel('geo', geoCoord);
idx += '';
var inflationData = [dataItem.value,dataItem.value1];
option.xAxis.push({
id: idx,
gridId: idx,
type: 'category',
nameLocation: 'middle',
nameGap: 3,
nameTextStyle:{
color:"#000000",
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color:"#fff",
show: false
},
axisLine: {
onZero: false,
lineStyle: {
color: '#555'
}
},
data: ["总体规划","专项规划"],
z: 100
});
option.yAxis.push({
id: idx,
gridId: idx,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
z: 100
});
option.grid.push({
id: idx,
width: 30,
height: 40,
left: coord[0] - 15,
top: coord[1] - 15,
z: 100
});
option.series.push({
id: idx,
type: 'bar',
xAxisId: idx,
yAxisId: idx,
barGap: 0,
barCategoryGap: 2,
data: inflationData,
z: 100,
itemStyle: {
normal: {
color: function(params){
// 柱状图每根柱子颜色
var colorList = ['#fcae91','#fb6a4a'];//['#fcae91','#fb6a4a','#cb181d'];
return colorList[params.dataIndex];
}
}
}
});
});
_this.myChart.setOption(option);
},
}
}
</script>