<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<!--script src="..\static\js\echarts.min.js"></script-->
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
<!-- <script src="/static/js/bmap.js" type="text/javascript" charset="utf-8"></script>-->
<!-- <script src="/static/js/china.js" type="text/javascript" charset="utf-8"></script>-->
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '全国地图',
subtext: 'data from china.js',
sublink: 'ireader.work',
left: 'center'
},
geo:{
map:'china'
},
tooltip : {
trigger: 'item'
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 使用刚指定的配置项和数据显示图表。
myChart.hideLoading();
$.ajax({
url:'/getjson10',
result:{},
type:'GET',
dataType:'json',
success:function(result){
//result=[{'name': '北京', 'value': 14113.6}, {'name': '天津', 'value': 9224.46}, {'name': '河北', 'value': 20394.26}, {'name': '山西', 'value': 9200.86}, {'name': '内蒙古', 'value': 11672.0}, {'name': '辽宁', 'value': 18457.3}, {'name': '吉林', 'value': 8667.58}, {'name': '黑龙江', 'value': 10368.6}, {'name': '上海', 'value': 17165.98}, {'name': '江苏', 'value': 41425.48}, {'name': '浙江', 'value': 27722.31}, {'name': '安徽', 'value': 12359.33}, {'name': '福建', 'value': 14737.12}, {'name': '江西', 'value': 9451.26}, {'name': '山东', 'value': 39169.92}, {'name': '河南', 'value': 23092.36}, {'name': '湖北', 'value': 15967.61}, {'name': '湖南', 'value': 16037.96}, {'name': '广东', 'value': 46013.06}, {'name': '广西', 'value': 9569.8539}, {'name': '海南', 'value': 2064.5}, {'name': '重庆', 'value': 7925.58}, {'name': '四川', 'value': 17185.48}, {'name': '贵州', 'value': 4602.16}, {'name': '云南', 'value': 7224.18}, {'name': '西藏', 'value': 507.46}, {'name': '陕西', 'value': 10123.48}, {'name': '甘肃', 'value': 4120.75}, {'name': '青海', 'value': 1350.43}, {'name': '宁夏', 'value': 1689.65}, {'name': '新疆', 'value': 5437.47}]
//result=[{'region': '北京', 'GDP': 14113.6}, {'region': '天津', 'GDP': 9224.46}, {'region': '河北', 'GDP': 20394.26}, {'region': '山西', 'GDP': 9200.86}, {'region': '内蒙古', 'GDP': 11672.0}, {'region': '辽宁', 'GDP': 18457.3}, {'region': '吉林', 'GDP': 8667.58}, {'region': '黑龙江', 'GDP': 10368.6}, {'region': '上海', 'GDP': 17165.98}, {'region': '江苏', 'GDP': 41425.48}, {'region': '浙江', 'GDP': 27722.31}, {'region': '安徽', 'GDP': 12359.33}, {'region': '福建', 'GDP': 14737.12}, {'region': '江西', 'GDP': 9451.26}, {'region': '山东', 'GDP': 39169.92}, {'region': '河南', 'GDP': 23092.36}, {'region': '湖北', 'GDP': 15967.61}, {'region': '湖南', 'GDP': 16037.96}, {'region': '广东', 'GDP': 46013.06}, {'region': '广西', 'GDP': 9569.8539}, {'region': '海南', 'GDP': 2064.5}, {'region': '重庆', 'GDP': 7925.58}, {'region': '四川', 'GDP': 17185.48}, {'region': '贵州', 'GDP': 4602.16}, {'region': '云南', 'GDP': 7224.18}, {'region': '西藏', 'GDP': 507.46}, {'region': '陕西', 'GDP': 10123.48}, {'region': '甘肃', 'GDP': 4120.75}, {'region': '青海', 'GDP': 1350.43}, {'region': '宁夏', 'GDP': 1689.65}, {'region': '新疆', 'GDP': 5437.47}]
myChart.setOption({
backgroundColor: '#FFFFFF',
title: {
text: '地域分布',
top: 14,
left: 14,
textStyle: {
borderColor: '#333333',
fontWeight: 400,
fontFamily: 'PingFangSC-Regular, PingFang SC',
color: '#666666',
fontSize: 14
}
},
tooltip: {
trigger: 'item',
show: true,
formatter: function(params) {
//return params.data['region'] + '：' + params.data['GDP'] + '%'
return params.name + '：' + params.data['value']
}
},
// 左侧小导航图标
visualMap: {
show: false,
x: 'left',
y: 'center',
min: 0,
max: 50000,
color: ['#0019ff', '#ffffff']
},
// 配置属性
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: false // 省份名称
},
emphasis: {
show: false
}
},
itemStyle: {
normal: { // 未选中状态
// areaColor: 'red', // 南沙诸岛背景颜色
borderColor: 'transparent',
label: {
show: true// 显示名称
}
},
emphasis: { // 也是选中样式
areaColor: '#49FFE9',
shadowColor: 'rgba(0,0,0,0.2)',
shadowOffsetX: 0, // 阴影水平方向上的偏移距离
shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
shadowBlur: 8, // 图形阴影的模糊大小。
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
data:result
}]
});
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
</script>
</body>
</html>