Exports注入Js地图海南省Js地图

本文主要是介绍Exports注入Js地图海南省Js地图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Exports注入Js地图海南省Js地图

例图：
在这里插入图片描述

Js写法：

function randomValue() {return Math.round(Math.random() * 1000);}var data = [{ name: '海口市', value: randomValue() },{ name: '三亚市', value: randomValue() },{ name: '儋州市', value: randomValue() },{ name: '五指山市', value: randomValue() },{ name: '文昌市', value: randomValue() },{ name: '琼海市', value: randomValue() },{ name: '万宁市', value: randomValue() },{ name: '东方市', value: randomValue() },{ name: '定安县', value: randomValue() },{ name: '屯昌县', value: randomValue() },{ name: '澄迈县', value: randomValue() },{ name: '临高县', value: randomValue() },{ name: '白沙县', value: randomValue() },{ name: '昌江县', value: randomValue() },{ name: '乐东县', value: randomValue() },{ name: '陵水县', value: randomValue() },{ name: '保亭县', value: randomValue() },{ name: '琼中县', value: randomValue() }];var myChart = echarts.init(document.getElementById('map22'));myChart.setOption(option = {title: {text: "示例",left: 'center',textStyle: {color: '#ffffff'}},visualMap: {min: 0,max: 1000,left: 'left',top: 'bottom',text: ['高', '低'], // 文本，默认为数值文本calculable: true,inRange: {color: ['yellow', 'lightskyblue', 'orangered']},textStyle: {color: '#ffffff'}},series: [{type: 'map',map: '海南',label: {normal: {show: true},emphasis: {textStyle: {color: '#fff'}}},itemStyle: {normal: {borderColor: '#389BB7',areaColor: '#fff',},emphasis: {areaColor: '#389BB7',borderWidth: 0}},animation: false,data: data}]});

Html写法：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>地图</title></head><style> /* 这里至关重要，不然地图显示不出来  */.mainwindow {height: 600px;width: 500px;}.mapwindow {height: 80%;width: 80%;margin: auto;}</style><body><div id="main" class="mainwindow"><div id="map22" class="mapwindow"></div></div><script src="./js/echarts.min.js"></script><script src="./js/hainan.js"></script><!-- <script src="./js/sichuan.js"></script> --><script src="./js/ditu.js"></script></body></html>