meface/docs/.vuepress/components/ScatterCharts.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>>