156 lines
5.9 KiB
Vue
156 lines
5.9 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div id="scatterchart" class="chart-container"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
name: "ScatterCharts",
|
||
methods: {
|
||
initCharts() {
|
||
let airData = [
|
||
{ name: '北京市', value: 39.92 },
|
||
{ name: '天津市', value: 39.13 },
|
||
{ name: '上海市', value: 31.22 },
|
||
{ name: '重庆市', value: 66 },
|
||
{ name: '河北省', value: 147 },
|
||
{ name: '河南省', value: 113 },
|
||
{ name: '云南省', value: 25.04 },
|
||
{ name: '辽宁省', value: 50 },
|
||
{ name: '黑龙江省', value: 114 },
|
||
{ name: '湖南省', value: 175 },
|
||
{ name: '安徽省', value: 117 },
|
||
{ name: '山东省', value: 92 },
|
||
{ name: '新疆维吾尔自治区', value: 84 },
|
||
{ name: '江苏省', value: 67 },
|
||
{ name: '浙江省', value: 84 },
|
||
{ name: '江西省', value: 96 },
|
||
{ name: '湖北省', value: 273 },
|
||
{ name: '广西壮族自治区', value: 59 },
|
||
{ name: '甘肃省', value: 99 },
|
||
{ name: '山西省', value: 39 },
|
||
{ name: '内蒙古自治区', value: 58 },
|
||
{ name: '陕西省', value: 61 },
|
||
{ name: '吉林省', value: 51 },
|
||
{ name: '福建省', value: 29 },
|
||
{ name: '贵州省', value: 71 },
|
||
{ name: '广东省', value: 38 },
|
||
{ name: '青海省', value: 57 },
|
||
{ name: '西藏自治区', value: 24 },
|
||
{ name: '四川省', value: 58 },
|
||
{ name: '宁夏回族自治区', value: 52 },
|
||
{ name: '海南省', value: 54 },
|
||
{ name: '台湾省', value: 88 },
|
||
{ name: '香港特别行政区', value: 66 },
|
||
{ name: '澳门特别行政区', value: 77 },
|
||
{ name: '南海诸岛', value: 55 }
|
||
];
|
||
let scatterData = [
|
||
// { name: '成都', value: [104.06, 30.67] },
|
||
// { name: '重庆', value: [106.54, 29.59] },
|
||
// { name: '杭州', value: [120.19, 30.26] },
|
||
// { name: '武汉', value: [114.31, 30.52] },
|
||
// { name: '西安', value: [108.95, 34.27] },
|
||
// { name: '天津', value: [117.2, 39.13] },
|
||
// { name: '苏州', value: [120.62, 31.32] },
|
||
// { name: '南京', value: [118.78, 32.04] },
|
||
// { name: '郑州', value: [113.65, 34.76] },
|
||
// { name: '长沙', value: [113, 28.21] },
|
||
{ name: '东莞', value: [113.75, 23.04] },
|
||
|
||
// { name: '沈阳', value: [123.38, 41.8] },
|
||
// { name: '青岛', value: [120.33, 36.07] },
|
||
// { name: '合肥', value: [117.27, 31.86] },
|
||
// { name: '佛山', value: [113.11, 23.05] },
|
||
];
|
||
fetch('/data/china.json').then(function (response) {
|
||
return response.json();
|
||
}).then(function (result) {
|
||
console.log(result);
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('scatterchart'));
|
||
|
||
//在echarts中注册地图矢量数据
|
||
echarts.registerMap('china', result);
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
//配置地理坐标系组件
|
||
geo: {
|
||
type: 'map',
|
||
map: 'china',
|
||
roam: true, //设置允许缩放以及拖动的效果
|
||
label: {
|
||
show: false,
|
||
fontSize: 10
|
||
},
|
||
zoom: 4, //初始化缩放比例
|
||
center: [113.75, 23.04] //设置初始化中心点
|
||
},
|
||
series: [
|
||
{
|
||
data: airData,
|
||
geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
|
||
type: 'map'
|
||
}, {
|
||
// 配置散点的坐标数据
|
||
data: scatterData,
|
||
type: 'effectScatter',
|
||
// 指明散点使用的坐标系统 geo的坐标系统，可选值：'cartesian2d'、'polar'、'geo'、'bmap'
|
||
coordinateSystem: 'geo',
|
||
rippleEffect: {
|
||
color: '#ccc',//涟漪动画的颜色
|
||
scale: 3 // 设置涟漪动画的缩放比例
|
||
},
|
||
// symbolSize:[10,20],
|
||
// showEffectOn: 'emphasis',
|
||
label:{
|
||
color: '#219ebc',
|
||
show: true,
|
||
formatter:function(row){
|
||
return row.name;
|
||
}
|
||
},
|
||
labelLine:{
|
||
show: true
|
||
},
|
||
color:'#ccc',
|
||
itemStyle:{
|
||
color: '#ccc'
|
||
}
|
||
}
|
||
],
|
||
visualMap: {
|
||
min: 0,
|
||
max: 300,
|
||
inRange: {
|
||
symbolSize: [30, 100],
|
||
color: ['white', 'red'] // 控制颜色渐变的范围
|
||
},
|
||
calculable: true // 出现滑块
|
||
}
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
this.initCharts();
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="stylus" scoped>
|
||
.container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-content: center;
|
||
}
|
||
|
||
.chart-container {
|
||
width: 350px;
|
||
height: 300px;
|
||
}
|
||
</style>> |