vue中使用echarts在地图上绘制散点图,并根据数值大小实现不同效果

1、echarts省市地图上根据数值大小给散点设置不同颜色,地图颜色不根据数值大小渲染,自己设置颜色

123

<script>
    //引入基本模板
    let echarts = require('echarts/lib/echarts')
    // 引入组件
    require('echarts/lib/chart/map')
    // 引入地图js文件
    require('echarts/map/js/province/jiangsu')
    require('echarts/map/js/china')
    // 引入提示框
    require('echarts/lib/component/tooltip')
    // 引入标题组件
    require('echarts/lib/component/title')
    require('echarts/lib/component/legendScroll')
    export default {
        data() {
            return {
                img: require('../assets/img/photovoltaic.png')
            }
        },
        mounted() {
            this.mapInit();
        },
        methods: {
            // 分布图
            mapInit(){
                let myChart=echarts.init(document.getElementById("map"));
                let list = [
                    {
                        "areaName": "江苏xx",
                        "cityName":"江苏省",
                        "confidenceProbability": 0.41,
                        "latitude": 34.401,
                        "confidencePower": 20,
                        "longitude": 119.9526
                    },
                    {
                        "areaName": "江苏南京xx",
                        "cityName":"南京市",
                        "confidenceProbability": 50.23,
                        "latitude": 32.45,
                        "confidencePower": 20,
                        "longitude": 118.92
                    },
                    {
                        "areaName": "江苏镇江xx",
                        "cityName":"镇江市",
                        "confidenceProbability": 0.8,
                        "latitude": 32.0888,
                        "confidencePower": 40,
                        "longitude": 119.4225
                    },
                    {
                        "areaName": "江苏常州xx",
                        "cityName":"常州市",
                        "confidenceProbability": 12.4,
                        "latitude": 31.92,
                        "confidencePower": 120,
                        "longitude": 119.99
                    },
                    {
                        "areaName": "江苏无锡xx",
                        "cityName":"无锡市",
                        "confidenceProbability": 13.53,
                        "latitude": 31.5591,
                        "confidencePower": 80,
                        "longitude": 120.4113
                    },
                    {
                        "areaName": "江苏苏州xx",
                        "cityName":"苏州市",
                        "confidenceProbability": 8.47,
                        "latitude": 31.55,
                        "confidencePower": 139,
                        "longitude": 120.817
                    },
                    {
                        "areaName": "江苏徐州xx",
                        "cityName":"徐州市",
                        "confidenceProbability": 63,
                        "latitude": 34.0814,
                        "confidencePower": 100,
                        "longitude": 117.9255
                    },
                    {
                        "areaName": "江苏泰州xx",
                        "cityName":"泰州市",
                        "confidenceProbability": 11.8,
                        "latitude": 33.16,
                        "confidencePower": 120,
                        "longitude": 120.16
                    },
                    {
                        "areaName": "江苏南通xx",
                        "cityName":"南通市",
                        "confidenceProbability": 30.69,
                        "latitude": 32.06,
                        "confidencePower": 47,
                        "longitude": 121.03
                    },
                    {
                        "areaName": "江苏淮安xx",
                        "cityName":"淮安市",
                        "confidenceProbability": 0.64,
                        "latitude": 33.56,
                        "confidencePower": 160,
                        "longitude": 119.18
                    },
                    {
                        "areaName": "江苏盐城xx",
                        "cityName":"盐城市",
                        "confidenceProbability": 32.9,
                        "latitude": 33.5189,
                        "confidencePower": 200,
                        "longitude": 120.2789
                    },
                    {
                        "areaName": "江苏连云港xx",
                        "cityName":"连云港市",
                        "confidenceProbability": 34.8,
                        "latitude": 34.117,
                        "confidencePower": 0,
                        "longitude": 119.3315
                    },
                    {
                        "areaName": "江苏宿迁xx",
                        "cityName":"宿迁市",
                        "confidenceProbability": 45.6,
                        "latitude": 33.739,
                        "confidencePower": 0,
                        "longitude": 118.757
                    },
                    {
                        "areaName": "江苏扬州xx",
                        "cityName":"扬州市",
                        "confidenceProbability": 87.5,
                        "latitude": 33.13,
                        "confidencePower": 0,
                        "longitude": 119.38
                    }
                ];
                let data = [];
                let map = [];
                list.forEach((item) => {
                    if (item.cityName== "江苏省") {
                        return;
                    }
                    data.push(
                        {
                            value: [item.longitude, item.latitude, item.confidencePower],
                            name: item.areaName,
                            data: [item.confidencePower, item.confidenceProbability]
                        }
                    )
                    map.push({
                        name: item.cityName,
                        value: item.confidencePower,
                        data: [item.confidencePower, item.confidenceProbability]
                    })
                });
                let
  • 3
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值