echarts 移动端地图数据可视化开发教程

2024-08-24 17:06:38

如上效果图：

以下未代码：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<meta name="format-detection" content="telephone=no">

<title>ECharts地图选择器</title>

<script src="../../static/awareness_day/js/jquery.min.js"></script>

</head>

<body>

<div id="main" style="height:26rem"></div>

<script src="../../static/awareness_day/js/echarts.js"></script>

<script type="text/javascript">

// 路径配置

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载

],

function(ec) {

var myChart = ec.init(document.getElementById('main'));

// 过渡---------------------

// myChart.showLoading({

// text: '正在努力的读取数据中...',

// effect: 'whirling'

// });

// ajax getting data...............

var colorbg;

var selected;

var option = {

backgroundColor: '#000',

borderWidth: 10,

borderColor: '#ffffff',

dataRange: {

min: 0,

max: 1000,

color: ['rgba(255,222,0,1)', 'rgba(110,0,0,1)'],

text: ['高', '低'],

splitNumber: 0,

calculable: false,

show: false,

},

series: [{

name: 'Map',

type: 'map',

mapLocation: {

x: '4%',

y: '8%',

height: 400

},

selectedMode: 'multiple',

itemStyle: {

normal: {

borderWidth: 1,

borderColor: '#9c1a1a',

color: '#6e0000',

label: {

show: false

}

},

emphasis: { // 也是选中样式

borderWidth: 1,

borderColor: '#a95901',

color: colorbg,

label: {

show: false,

textStyle: {

color: '#fff'

}

}

},

},

data: [{

name: '海南',

value: Math.round(Math.random() * 1000)

},

{

name: '广东',

value: Math.round(Math.random() * 1000)

},

{

name: '广西',

value: Math.round(Math.random() * 1000)

},

{

name: '福建',

value: Math.round(Math.random() * 1000)

},

// {

// name: '甘肃',

// selected: false

// },

{

name: '江西',

value: Math.round(Math.random() * 1000)

},

{

name: '湖南',

value: Math.round(Math.random() * 1000)

},

{

name: '浙江',

value: Math.round(Math.random() * 1000)

},

{

name: '贵州',

value: Math.round(Math.random() * 1000)

},

{

name: '云南',

value: Math.round(Math.random() * 1000)

},

{

name: '上海',

value: Math.round(Math.random() * 1000)

},

{

name: '江苏',

value: Math.round(Math.random() * 1000)

},

{

name: '安徽',

value: Math.round(Math.random() * 1000)

},

{

name: '湖北',

value: Math.round(Math.random() * 1000)

},

{

name: '重庆',

value: Math.round(Math.random() * 1000)

},

{

name: '四川',

value: Math.round(Math.random() * 1000)

},

{

name: '河南',

value: Math.round(Math.random() * 1000)

},

{

name: '山东',

value: Math.round(Math.random() * 1000)

},

{

name: '天津',

value: Math.round(Math.random() * 1000)

},

{

name: '河北',

value: Math.round(Math.random() * 1000)

},

{

name: '山西',

value: Math.round(Math.random() * 1000)

},

{

name: '北京',

value: Math.round(Math.random() * 1000)

},

{

name: '辽宁',

value: Math.round(Math.random() * 1000)

},

{

name: '吉林',

value: Math.round(Math.random() * 1000)

},

{

name: '黑龙江',

value: Math.round(Math.random() * 1000)

},

{

name: '内蒙古',

value: Math.round(Math.random() * 1000)

},

{

name: '陕西',

value: Math.round(Math.random() * 1000)

},

{

name: '宁夏',

value: Math.round(Math.random() * 1000)

},

{

name: '青海',

value: Math.round(Math.random() * 1000)

},

{

name: '甘肃',

value: Math.round(Math.random() * 1000)

},

{

name: '新疆',

value: Math.round(Math.random() * 1000)

},

{

name: '西藏',

value: Math.round(Math.random() * 1000)

},

{

name: '香港',

value: Math.round(Math.random() * 1000)

},

{

name: '澳门',

value: Math.round(Math.random() * 1000)

},

{

name: '台湾',

value: Math.round(Math.random() * 1000)

},

{

name: '南海诸岛',

value: Math.round(Math.random() * 1000)

},

],

},

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

</script>

</body>

</html>

最新文章

热门文章