echarts Map(地图) 不同区块显示

<template><div class="map" id="s-map"><div id="chartMap" :style="{height:height,width:width}"></div></div>
</template><script type="text/ecmascript-6">　　 // 在之前已经单独引入了echarts文件　　 // 在此只需引入需要的地区的json文件import echarts from "echarts";import gz from 'echarts/map/json/province/guizhou'import lianxi from '@/map/jiujiang.json'export default {components: {},data () {return {font: '12'}},props: {width: {type: String,default: '1000px'},height: {type: String,default: '500px'},nationCode: {type: String,default: '100000'},nationName: {type: String,default: '中华人民共和国'},},watch: {},data(){return{mapDatabase:{}}},created(){},mounted(){this.drawmap()},methods: {drawmap() {// if (condition) {// }console.log(this.nationCode)this.$axios.get("nation/getJson/" + this.nationCode).then(res => {var data = res.data.data.data;this.mapDatabase = JSON.parse(data)let chartMap = document.getElementById('chartMap');let smap = document.getElementById('s-map');　　　　　　　　　　var resizeWorldMapContainer = function () {chartMap.style.width  = smap.clientWidth +'px';chartMap.style.height = smap.clientHeight + 'px';};resizeWorldMapContainer();// 注册可用的地图echarts.registerMap('dataSource',JSON.parse(data));// echarts.registerMap('guizhou',lianxi);let myChart = echarts.init(chartMap);myChart.setOption({title : {text: this.nationName,subtext: '火灾数量区域图',x:'left'},tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (p / km2)'},roam: false,dataRange: {show:true,x: 'right',y: 'bottom',splitList: [{start: 1500},{start: 900, end: 1500},{start: 310, end: 1000},{start: 200, end: 300},{start: 10, end: 200, label: '10 到 200（火灾数量）'},{start: 5, end: 5, label: '5（火灾数量）', color: 'black'},{end: 10}],color: ['#eee', '#949fb1', '#f3ce85']},// tooltip : {//     trigger: 'item',//     formatter: '{b}',//     itemSize:'14px'// },legend: {orient: 'vertical',x:'center'},series: [{name: '',type: 'map',map: 'dataSource',mapType: 'maptype',roam: true,zoom: 0.6,itemStyle:{normal:{// areaColor: 'rgba(128, 128, 128, 0.01)',// borderWidth:1,// borderColor:'#999999',   label:{show:true,textStyle: {color: '#2991BE',fontSize: this.font}},},emphasis:{// areaColor: '#000',// borderWidth:1,// borderColor:'#999999',   label:{show:true,textStyle: {color: '#398def',fontSize: this.font}}}},data:[{name: '城口县',value: Math.round(Math.random()*2000)},{name: '开县',value: Math.round(Math.random()*2000)},{name: '巫溪县',value: Math.round(Math.random()*2000)},{name: '云阳县',value: Math.round(Math.random()*2000)},{name: '奉节县',value: Math.round(Math.random()*2000)},{name: '巫山县',value: Math.round(Math.random()*2000)},{name: '万州区',value: Math.round(Math.random()*2000)},{name: '梁平县',value: Math.round(Math.random()*2000)},{name: '忠县',value: Math.round(Math.random()*2000)},{name: '垫江县',value: Math.round(Math.random()*2000)},{name: '石柱土家族自治县',value: Math.round(Math.random()*2000)},{name: '丰都县',value: Math.round(Math.random()*2000)},{name: '长寿区',value: Math.round(Math.random()*2000)},{name: '涪陵区',value: Math.round(Math.random()*2000)},{name: '合川区',value: Math.round(Math.random()*2000)},{name: '潼南县',value: Math.round(Math.random()*2000)},{name: '铜梁县',value: Math.round(Math.random()*2000)},{name: '渝北区',value: Math.round(Math.random()*2000)},{name: '璧山县',value: Math.round(Math.random()*2000)},{name: '沙坪坝县',value: Math.round(Math.random()*2000)},{name: '江北区',value: Math.round(Math.random()*2000)},{name: '大足县',value: Math.round(Math.random()*2000)},{name: '永川区',value: Math.round(Math.random()*2000)},{name: '綦江县',value: Math.round(Math.random()*2000)},{name: '南川区',value: Math.round(Math.random()*2000)},{name: '万盛区',value: Math.round(Math.random()*2000)},{name: '大渡口区',value: Math.round(Math.random()*2000)},{name: '南岸区',value: Math.round(Math.random()*2000)},{name: '武隆县',value: Math.round(Math.random()*2000)},{name: '九龙坡区',value: Math.round(Math.random()*2000)},{name: '荣昌县',value: Math.round(Math.random()*2000)},{name: '秀山土家族苗族自治县',value: Math.round(Math.random()*2000)},{name: '酉阳土家族苗族自治县',value: Math.round(Math.random()*2000)},{name: '彭水苗族土家族自治县',value: Math.round(Math.random()*2000)},{name: '江津区',value: Math.round(Math.random()*2000)},{name: '北碚区',value: Math.round(Math.random()*2000)},{name: '巴南区',value: Math.round(Math.random()*2000)}]}]});});window.addEventListener("resize", function(){// resizeWorldMapContainer();// myChart.resize();})}},filters: {},computed: {},destroyed () {}}
</script><style lang="scss" scoped>@function px2rem($px) {$rem: 75px;@return ($px / $rem) + rem;}
</style>

echarts Map(地图) 不同区块显示相关推荐

echaer 地图_echarts Map(地图) 不同颜色区块显示
echarts Map(地图) 不同区块显示这里以重庆地图为例配置项: var option = { title : { text: '重庆市', subtext: '', x:'left' }, ...
echarts map 地图做出立体效果
echarts map 地图做出立体效果最近做项目,需要用到立体地图,但是立体地图上还需要很多其他效果,所以用了 map 平面地图做出了立体效果. 想知道怎么弄的,扣1,欢迎来交流.
echarts map地图数据Json制作教程
首先来一个echarts map地图使用的教程(对应地图的数据包我的下载里有 echarts地图离线数据包有需要的可以自行下载或在博客下留言我会单独发你) <!DOCTYPE html> ...
echarts map(地图) 省份名称居中显示
修改echarts中的china.js文件中省份经纬度,使省份名称居中显示. 亲测可用,更新于2020-12-10 china.js 点击下载修改前,省份名称并不居中显示: 修改后: 具体修改方法( ...
echarts 5.4 版本 map 地图下钻，显示南沙群岛缩略图，海南三沙市编辑隐藏
需求:渲染中国地图,支持下钻,同时南沙群岛显示在地图右下脚,三沙市边界隐藏 geoJson 数据可从阿里云-dataV-下载如果要展示南海诸岛需要将地图类型设置为china, 将海南省中的三沙市 ...
echarts map地图geojson/json格式的简单使用
** echarts地图简单使用方法 (geojson格式/json格式) ** 首先贴两个非常有用的地图网站地图下载网站:http://datav.aliyun.com/tools/atlas/# ...
echarts map 地图做出立体效果 | 简单的解
正文先利用geo做出来十层阴影 ps:注意我的 map 是 "HK" let geoList = []for (let index = 0; index < 10; ind ...
echarts 使用案例：针对map地图中显示数据格式化
前言: 1,报表连接:http://gallery.echartsjs.com/editor.html?c=xrJZ60TVIg 2,echats 制作报表中,使用地图的展示样式,发现地图上的显示数据 ...
ECharts地图进去直接显示数字和颜色问题
上个月刚交付一个项目,最近没什么事,所以准备学学echarts,比较现在做图表什么的这个几乎是不二选择了. 然后一个朋友用echarts做地图方面的项目遇到一问题,让我解决下,顺手就记录下来了,也为方 ...

echarts Map(地图) 不同区块显示

echarts Map(地图) 不同区块显示相关推荐

最新文章

热门文章