<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制第一个图表</title>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1200px;height:500px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var mapName = 'china'
var data1 = [
{"name":"北京","value":199},
{"name":"天津","value":-42},
{"name":"河北","value":102},
{"name":"山西","value":81},
{"name":"内蒙古","value":47},
{"name":"辽宁","value":67},
{"name":"吉林","value":82},
{"name":"黑龙江","value":123},
{"name":"上海","value":-24},
{"name":"江苏","value":92},
{"name":"浙江","value":114},
{"name":"安徽","value":109},
{"name":"福建","value":116},
{"name":"江西","value":91},
{"name":"山东","value":119},
{"name":"河南","value":137},
{"name":"湖北","value":116},
{"name":"湖南","value":114},
{"name":"重庆","value":91},
{"name":"四川","value":125},
{"name":"贵州","value":62},
{"name":"云南","value":83},
{"name":"西藏","value":-9},
{"name":"陕西","value":80},
{"name":"甘肃","value":56},
{"name":"青海","value":10},
{"name":"宁夏","value":18},
{"name":"新疆","value":180},
{"name":"广东","value":123},
{"name":"广西","value":59},
{"name":"海南","value":-14},
];
var geoCoordMap = {};
var data2 = [
{"name":"北京","value":9},
{"name":"天津","value":2},
{"name":"河北","value":2},
{"name":"山西","value":1},
{"name":"内蒙古","value":7},
{"name":"辽宁","value":7},
{"name":"吉林","value":2},
{"name":"黑龙江","value":3},
{"name":"上海","value":4},
{"name":"江苏","value":2},
{"name":"浙江","value":4},
{"name":"安徽","value":9},
{"name":"福建","value":6},
{"name":"江西","value":1},
{"name":"山东","value":9},
{"name":"河南","value":7},
{"name":"湖北","value":6},
{"name":"湖南","value":4},
{"name":"重庆","value":1},
{"name":"四川","value":5},
{"name":"贵州","value":2},
{"name":"云南","value":3},
{"name":"西藏","value":9},
{"name":"陕西","value":0},
{"name":"甘肃","value":6},
{"name":"青海","value":1},
{"name":"宁夏","value":8},
{"name":"新疆","value":8},
{"name":"广东","value":3},
{"name":"广西","value":9},
{"name":"海南","value":4},
];
/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function(v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;
});
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
option = {
title: {
text: "2019年各省份销售和利润情况",
textStyle: {
align: 'center',
color: '#fff',
fontSize: 20,
},
top: '5%',
left: 'center',
},
tooltip:{
show:true,
},
visualMap: {
show: true,
left: '8%',
top: 'bottom',
seriesIndex: [1],
textStyle:{
color:'blue',
},
},
geo: {
show: true,
map: mapName,
roam: false,
itemStyle: {
normal: {
areaColor: '#023677',
borderColor: '#1180c7',
},
emphasis: {
areaColor: '#4499d0',
}
}
},
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data2),
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
fontSize:8,
},
emphasis: {
show: true,
}
},
itemStyle: {
normal: {
color: '#fff',
}
}
},
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.5, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#FFFFFF',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data1
},
{
name: '散点',
type: 'effectScatter',
// animation: false,
coordinateSystem: 'geo',
data: convertData(data2),
symbolSize: function(val) {
return val[2]*2 ;
},
showEffectOn: 'render',
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'left',
show: false
}
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow'
}
},
zlevel: 1
},
]
};
myChart.setOption(option)
</script>
</body>
</html>
Django框架，大数据可视化
需积分: 1 149 浏览量
2024-01-06
08:52:30
上传
评论
收藏 919KB ZIP 举报
词云+中国地图资料.zip （15个子文件） 
资料 
词云对照模板.html 6KB js 
china.js 59KB echarts.min.js 952KB wordcount.min.js 16KB d3.min.js 216KB img 
header-left.png 2KB
loading.gif 108KB panel.png 5KB header-right.png 2KB bg06.png 274KB
thumb.jpg 77KB css bootstrap.min.css 118KB app.css 2KB index.html 2KB 地图对照模板.html 7KB资源评论
