vue+echarts踩过的坑
文字显示居中：可以修改label的padding（只限修改个别地区） 地图只显示某一部分地区 用到了geo中regions（用了一整张中国地图，放大这四个地区某个中心点） geo: { map: “china”, mapLocation: { x: ‘center’ }, center: [“115.892151”, “28.676493”], zoom:4.8, label: { normal:{ show:false }, emphasis: { show: false } }, roam: false, itemStyle: { normal: { areaColor: “#fff”, //地图默认的背景颜色 borderColor: “#fff”,//地图默认的边线颜色, opacity:0 }, emphasis: { areaColor: “#fff”,//地图触发地区的背景颜色 } }, regions: [ { name: “浙江”, label: { normal:{ show:true, fontSize:16, color:’#fff’, padding:[100,4,4,4] }, emphasis: { show: true }, // label:{ // formatter:’{b}’, // } }, itemStyle: { normal: { areaColor: “#1FB2A8”, borderWidth:4, borderColor:’#fff’, opacity:1 }, emphasis: { areaColor: “orange”, //地图触发地区的背景颜色 borderWidth:4, borderColor:’#fff’, } } }, { name: “江西”, label: { normal:{ show:true, fontSize:16, color:’#fff’, padding:[100,20,4,4] }, emphasis: { show: false } }, itemStyle: { normal: { areaColor: “#1FB2A8”, borderWidth:4, borderColor:’#fff’, opacity:1 }, emphasis: { areaColor: “orange”, //地图触发地区的背景颜色 borderWidth:4, borderColor:’#fff’ } } }, { name: “福建”, label: { normal:{ show:true, fontSize:16, color:’#fff’, padding:[0,70,0,0] }, emphasis: { show: false } }, itemStyle: { normal: { areaColor: “#1FB2A8”, borderWidth:4, borderColor:’#fff’, opacity:1 }, emphasis: { areaColor: “orange”, //地图触发地区的背景颜色 borderWidth:4, borderColor:’#fff’ } } }, { name: “上海”, label: { normal:{ show:true, fontSize:10, color:’#fff’, padding:[15,0,0,0] }, emphasis: { show: false } }, itemStyle: { normal: { areaColor: “#1FB2A8”, borderWidth:4, borderColor:’#fff’, opacity:1 }, emphasis: { areaColor: “orange” ,//地图触发地区的背景颜色 borderWidth:4, borderColor:’#fff’ } } } ] }, series: [ { type: ‘map’, coordinateSystem: ‘geo’, }, { type: ‘map’, geoIndex: 0, data:datass } ], 显示问题 formatter: function (params) { // console.log(params) var res=’’; var name=’’; for (var i = 0; i < datass.length; i++) { if (datass[i].name == params.name) { name=<p class="big">+datass[i].name+</p> if(datass[i].value==’’){ res=’’ }else{ datass[i].value.forEach(element => { res+=<p class="small">+element+</p> }); } } } return name+res }, y轴显示百分号 axisLabel: { formatter: ‘{value}%’ }
