VUE 中实现echarts江苏气泡图

最新推荐文章于 2024-06-11 02:51:53 发布
最新推荐文章于 2024-06-11 02:51:53 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： echarts数据可视化 文章标签： echarts vue 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012967771/article/details/114005647
版权

VUE 中实现echarts江苏气泡图

效果图：

安装Echarts依赖

要在vue中使用Echarts 需要先安装依赖

npm install echarts --save

这是我的Echarts版本(据了解低版本的echarts，默认并没有地图相关数据)

"echarts": "^4.0.4"

引入Echarts 以及 地图数据

import echarts from 'echarts'
import 'echarts/map/js/province/jiangsu'

地图数据在 根目录 node_modules > echarts > map 文件夹下

初始化Echarts

在 methods 中编写方法

  methods: {
            //加载中国飞线地图
            loadChinaLineMap() {
                var echarts = require('echarts');
                var myCharts = echarts.init(document.getElementById('ChinaLineMap'));
                let geoCoordMap = {
                    '苏州市': [120.585728, 31.2974],
                    '南通市': [120.894676, 31.981143],
                    '徐州市': [117.284124, 34.205768],
                    '常州市': [119.974061, 31.811226],
                    '无锡市': [120.31191, 31.491169],
                    '盐城市': [120.163107, 33.347708],
                    '连云港市': [119.221611, 34.596653],
                    '淮安市': [119.113185, 33.551052],
                    '南京市': [118.796682, 32.05957],
                    '镇江市': [119.425836, 32.187849],
                    '宿迁市': [118.275198, 33.963232],
                    '扬州市': [119.412939, 32.394209],
                    '泰州市': [119.922933, 32.455536]
                };.....................................................................................................................................................................................................

在 mounted 中调用

 mounted() {
            this.loadChinaLineMap()
},

完整页面代码

<template>
    <div class="min-body">
        <div class="header">
            <p class="til">江苏气泡地图</p>
            <div class="time-box">{{time}}</div>
        </div>
        <div id="ChinaLineMap">

        </div>
    </div>
</template>

<script>
    //import 'echarts/map/js/china'   //引入中国地图
    //import 'echarts/map/js/province/jiangsu.js';//引入江苏地图
    import 'echarts/map/js/province/jiangsu'
    //import * as api from '@/api/admin.js';
    export default {
        name: "jiangsuMap",
        data: function () {
            return {
                time:''
            }
        },
        created() {
            this.loadTime()

        },
        mounted() {
            this.loadChinaLineMap()
        },
        methods: {
            //加载时间
            loadTime(){
                var that = this
                //var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                setInterval(function () {
                    that.updateTime()
                }, 1000);
                that.updateTime()

            },
            updateTime(){
                var that = this
                var cd = new Date();
                var  time = that.zeroPadding(cd.getHours(), 2) + ':' + that.zeroPadding(cd.getMinutes(), 2) + ':' + that.zeroPadding(cd.getSeconds(), 2);
                var date = that.zeroPadding(cd.getFullYear(), 4) + '年' + that.zeroPadding(cd.getMonth()+1, 2) + '月' + that.zeroPadding(cd.getDate(), 2) + '日 ';
                that.time =  date+" "+time
            },
            zeroPadding(num, digit) {
                var zero = '';
                for(var i = 0; i < digit; i++) {
                    zero += '0';
                }
                return (zero + num).slice(-digit);
            },
            //加载中国飞线地图
            loadChinaLineMap() {
                var echarts = require('echarts');
                var myCharts = echarts.init(document.getElementById('ChinaLineMap'));
                let geoCoordMap = {
                    '苏州市': [120.585728, 31.2974],
                    '南通市': [120.894676, 31.981143],
                    '徐州市': [117.284124, 34.205768],
                    '常州市': [119.974061, 31.811226],
                    '无锡市': [120.31191, 31.491169],
                    '盐城市': [120.163107, 33.347708],
                    '连云港市': [119.221611, 34.596653],
                    '淮安市': [119.113185, 33.551052],
                    '南京市': [118.796682, 32.05957],
                    '镇江市': [119.425836, 32.187849],
                    '宿迁市': [118.275198, 33.963232],
                    '扬州市': [119.412939, 32.394209],
                    '泰州市': [119.922933, 32.455536]
                };
                var data = [
                    {name: '徐州市',value:886},
                    {name: '泰州市',value:45},
                    {name: '镇江市',value:12},
                    {name: '苏州市',value:45},
                ];
                var convertData = function(data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        console.log(geoCoord);
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    console.log(res);
                    return res;
                };
                let lineConvertData = function (data) {
                    let res = [];
                    for (let i = 0; i < data.length; i++) {
                        let dataItem = data[i];
                        let fromCoord = geoCoordMap[dataItem[0].name];
                        let toCoord = geoCoordMap[dataItem[1].name];
                        if (fromCoord && toCoord) {
                            res.push({
                                fromName: dataItem[0].name,
                                toName: dataItem[1].name,
                                coords: [fromCoord, toCoord]
                            });
                        }
                    }
                    return res;
                };
                let nJData = [
                    [{name: '无锡市', value: 20}, {name: '南京市', value: 100}],
                    [{name: '南通市', value: 80}, {name: '南京市', value: 100}],
                    [{name: '苏州市', value: 60}, {name: '南京市', value: 100}],
                    [{name: '淮安市', value: 40}, {name: '南京市', value: 100}],
                    [{name: '徐州市', value: 100}, {name: '南京市', value: 100}],
                    [{name:'宿迁市',value:100}, {name:'南京市',value:100}],
                    [{name:'连云港市',value:100}, {name:'南京市',value:100}],
                    [{name:'盐城市',value:100}, {name:'南京市',value:100}],
                    [{name:'扬州市',value:100}, {name:'南京市',value:100}],
                    [{name:'泰州市',value:100}, {name:'南京市',value:100}],
                    [{name:'镇江市',value:100}, {name:'南京市',value:100}],
                    [{name:'常州市',value:100}, {name:'南京市',value:100}]
                ];
                let option = {

                    tooltip: {
                        trigger: 'item',
                        showDelay: 0,
                        transitionDuration: 0.2,
                        formatter: function (params) {
                            let value = (params.value + '').split('.');
                            value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                            return params.seriesName + '<br/>' + params.name + ': ' + value;
                        }
                    },
                    visualMap: {
                        left: 'left',
                        min: 500000,
                        max: 3800000,
                        inRange: {
                            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                        },
                        text:['High','Low'],
                        calculable: true,
                        show: false
                    },
                    geo: {
                        map: '江苏',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        zoom: 1.2,
                        roam: false,
                        itemStyle: {
                            normal: {
                                borderColor: '#3b56b5',
                                borderWidth:2,
                                areaColor:'rgba(0,0,0,0)',
                                shadowColor:'#2485af',
                                shadowBlur:20
                            },
                            emphasis: {
                                areaColor: 'green'
                            }
                        }
                    },
                    series: [
                        {
                            name:'',
                            type: 'lines',
                            zlevel: 2,
                            effect: {
                                show: true,
                                period: 6,
                                trailLength: 0.1,
                                // symbol: planePath,
                                symbol: 'arrow',
                                symbolSize: 5
                            },
                            lineStyle: {
                                normal: {
                                    color: '#01B4F1',
                                    width: 1,
                                    opacity: 0.4,
                                    curveness: 0.2
                                }
                            },
                            data: lineConvertData(nJData)
                        },
                        {
                            name:'jiangsu',
                            type: 'map',
                            map: '江苏',
                            mapType: 'jiangsu',
                            zlevel:0,
                            zoom:1.2,
                            selectedMode:'single',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true
                                    },
                                    borderWidth:.5,
                                    borderColor:'#009fe0',
                                    areaColor:'#C4EDFA'
                                },
                                emphasis:{
                                    borderWidth:1.5,
                                    borderColor:'#009fe0',
                                    shadowColor:'#FC8A4E',
                                    shadowBlur:10,
                                    areaColor:'#1f94fb'
                                }
                            },
                            data:[
                                {name: '南京市', value: 9},
                                {name: '常州市', value: 731449},
                                {name: '徐州市', value: 6553255},
                                {name: '淮安市', value: 2949131},
                                {name: '南通市', value: 38041430},
                                {name: '宿迁市', value: 5187582},
                                {name: '无锡市', value: 3590347},
                                {name: '扬州市', value: 917092},
                                {name: '盐城市', value: 632323},
                                {name: '苏州市', value: 1931751},
                                {name: '泰州市', value: 9919945},
                                {name: '镇江市', value: 1392313},
                                {name: '连云港市', value: 1595728}
                            ]

                        },
                        {
                            name: '',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbol: 'pin',
                            symbolSize: 50,
                            label : {
                                normal : {
                                    show : true,
                                    textStyle : {
                                        color : '#fff',
                                        fontSize : 9
                                    },
                                    formatter:function(value){
                                        var r = '';
                                        if(value.data.value[2]>100000000){//亿
                                            r = (value.data.value[2]/100000000).toFixed(1) + '亿';
                                        }else if(value.data.value[2]>10000000){//万
                                            r = (value.data.value[2]/10000000).toFixed(1) + '千万';
                                        }else if(value.data.value[2]>10000){//万
                                            r = (value.data.value[2]/10000).toFixed(1) + '万';
                                        }else{
                                            r = value.data.value[2]+'万';
                                        }
                                        return r;

                                    }
                                }
                            },
                            itemStyle : {
                                // normal : {
                                // 	color :'' // 鏍囧織棰滆壊
                                // }
                                normal : {
                                    color : function(params) {
                                        console.log(params);
                                        var colorList = [ '#f7c12e','#f7962e', '#f7622e','#f7412e'];
                                        // if(params.data.value[2]>0&&params.data.value[2]<30.99){
                                        //     colorList.push('#f7c12e');
                                        // }else if(params.data.value[2]>30.99&&params.data.value[2]<59.99){
                                        //     colorList.push('#f7962e');
                                        // }else if(params.data.value[2]>59.99&&params.data.value[2]<90.01){
                                        //     colorList.push('#f7622e');
                                        // }else if(params.data.value[2]>90.01){
                                        //     colorList.push('#f7412e');
                                        // }
                                        console.log(colorList);
                                        //return colorList[params.dataIndex%colorList.length];
                                        return colorList[0];

                                    }
                                }
                            },
                            //zlevel: 6,
                            data: convertData(data),
                            // data:[
                            //     {name:'徐州市',value:[117.284124, 34.205768,34]}
                            // ]
                        }
                    ]
                };

                myCharts.setOption(option)

            }
        }
    }
</script>

<style lang="scss" scoped>
    #ChinaLineMap{
        width: 100%;
        height:calc(100% - 7vh);
    }
    .min-body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #010827;
        .header {
            position: relative;
            height: 6vh;
            background-color: #cccccc33;
            background: url("~@/assets/img/top-bg.png") no-repeat;
            background-size: 100% 100%;
            user-select: none;
            .til {
                width: 100%;
                font-size: 2.2vw;
                font-weight: bold;
                text-align: center;
                line-height: 6vh;
                letter-spacing: 0.3vw;
                color: #fff;
                margin: 0;
            }

            .til:before {
                content: '';
                display: inline-block;
                width: 5vh;
                height: 5vh;

                margin-right: 1vw;
                vertical-align: middle;

            }
            .time-box{
                font-size: 1.3vw;
                letter-spacing: 0.2vw;
                color: #00FFFF;
                font-weight: normal;
                position: absolute;
                top: 2.2vh;
                right: 1vw;

                z-index: 100;
            }
        }
    }


</style>

感谢阅读，欢迎订阅！！！更多echarts数据可视化图表请持续关注！！！

 

前端互助会
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue项目中使用echarts _@jie
tattoo_jie的博客
09-14 259
本文包含在vue项目中如何使用echarts，以及项目中经常会遇到的图表样式的写法 https://echarts.baidu.com/echarts2/doc/example.html （echart实例，包含饼状图、柱状图等等图表例子，你可以找到你所需要的图表类型） https://echarts.baidu.com/echarts2/doc/doc.html （echarts 使用文档，里面有很多属性和方法可供参考哦） 1.安装echarts包 npm install echarts --save 或
echarts实现相邻气泡图
10-16
echarts实现的气泡图，跟官方气泡图不同的是，气泡图之间不会叠加在一起。跟d3.js的气泡图效果类似。
echart 大屏实现， 气泡，
09-20
现在js文件中引用comp_echarts_map.js文件 2、在html文件中引用该组件模板 例如： {{comp-echarts-map}} 3、该组件对外参数 /* 接收数据 */ dataSource: null, /* 设置容器高宽 */ width: null, heigit: null, /* 地图距离容器的边距（echarts中配置了自适应不超出画布，并保持地图高宽比，所以以下属性可能会显示中有所差异） */ top:0, left:0, right:0, bottom:0, /* 接收当前显示地图名称默认是'全国' ('全国'，'辽宁'，'北京'，'广东')*/ mapName: null, /* 是否需要地图表格组件 默认为true需要 */
VUE+Highcharts气泡图
qq_42155347的博客
11-02 1616
文章目录前言一、Highcharts二、使用步骤1.安装依赖2.引入3.使用3.1页面创建容器3.2创建实例总结 前言 ECharts 中散点图有坐标的概念，不希望用这种方式显示。所以使用了 Highcharts 图表中的气泡图。 一、Highcharts 和ECharts 类似，是一种图表库。Highcharts官网 二、使用步骤 1.安装依赖 npm install highcharts --save 2.引入 import Highcharts from "highcharts/highstoc
【echarts 4.x+Vue】实现中国地图（气泡图）+自定义点击事件
最新发布
qq_38192105的博客
06-11 492
Vue内使用echarts（4.9.0版本）插件，绘制气泡地图，含默认高亮区域和地图自定义点击事件。
vue 百度地图 气泡图
汤玉鹏
08-14 1210
<template> <div class='amount'> <baidu-map class="map" :center="{lng: 106.464029, lat: 29.547749}" :zoom="12"> <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></...
vue+echarts实现江苏省疫情地图
weixin_42365681的博客
10-15 1314
vue+echarts实现江苏省疫情地图 文章目录vue+echarts实现江苏省疫情地图前言一、使用步骤1.引入库2.代码数据效果 前言 作为刚学习vue结合echarts写的案例，当前时事关注度最高的无疑是各省市疫情数据信息了，因此在学习了echarts的基本实例同时也参考了其他作者制作的疫情地图，嗯，学习真香。搓搓小手也敲了一个江苏省的疫情地图展示。同时也可扩展为其他省市，只要有json地图数据。 提示：以下是本篇文章正文内容，下面案例可供参考 一、使用步骤 1.引入库 首先当然是要下载我们的大
vue+echars封装气泡图；
weixin_45579925的博客
08-30 1200
前端可视化封装气泡图 html <template> <div class="bubble-chart"> <div ref="bubbleChart" class="bubble"></div> </div> </template> js <script> export default { name: "BubbleChart", props: { rowData: {
vue3项目echarts实现气泡图
cweeq的博客
01-05 1701
使用echarts做气泡图、词云
在vue中实现echarts随窗体变化
10-15
总结来说，要在Vue中实现ECharts随窗体变化，主要步骤包括： 1. 初始化ECharts实例。 2. 设置图表容器的宽度和高度，使其与窗口大小相关联。 3. 监听`window`对象的`resize`事件并在事件触发时调用`resize()`方法。 ...
在Vue中使用echarts的方法
08-28
在实际项目中，我们经常需要将ECharts集成到Vue项目中，以实现数据的可视化展示。因此，本文将详细介绍在Vue中使用ECharts的方法。 全局引入ECharts 首先，我们可以使用NPM安装ECharts，执行以下命令： ``` npm ...
echarts 江苏省地图所需的js jiangsu.js
07-27
echarts 江苏省地图所需的js jiangsu.js
echarts地图-江苏省JSON
07-29
echarts地图江苏省JSON
2022年echarts江苏省最新13市json地图
03-22
2022年自己调整过使用过的echarts江苏省最新13市json地图，包括南京、无锡、徐州、常州、苏州、南通、连云港、淮安、盐城、扬州、镇江、泰州、宿迁。
vue中使用echarts制作圆环图的实例代码
10-18
主要介绍了vue中使用echarts制作圆环图的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
在vue中使用echarts(折线图的demo,markline用法)
10-15
通过以上步骤，你已经在Vue中成功实现了ECharts折线图并添加了markline功能。你可以根据项目需求调整配置，以展示不同类型的图表和自定义标记线。记得在实际项目中根据实际情况调整样式和数据源，以满足实际需求。
vue echarts 实现地图大气泡图
weixin_33752045的博客
03-08 2340
1.插件使用vue-echarts 插件地址https://www.npmjs.com/package/vue-echarts 2.安装之后 在main.js 引入 import ECharts from 'vue-echarts'; import chinaMap from "./assets/js/china.json"; ECharts.registerMap("chin...
利用 echarts 绘制江苏省的地图之三
追梦&天空的博客
01-21 3509
这篇文章是采用 ecahrts@5.2.2 通过绘制3层地图，来模拟实现3D的地图效果，在和真实的3D效果相比，还是有些差距的。
不重叠且分布均匀的气泡图解决方案（基于echarts）
热门推荐
qq_34295211的博客
06-17 1万+
气泡图是数据可视化需求中的一种常见图表形式。然而截至目前，像echarts，d3，higncharts都还没有直接提供一个配置来完成不重叠且分布均匀的气泡图这项工作。幸运的是，我们可以通过配置echart的关系图来完成我们的气泡图需求。 下面是完成后的气泡图效果（数据加载后有一个动画效果，而且气泡支持拖动，下方动图不和谐的地方为鼠标拖动）： 最终稳定之后的效果如下： 为了有更好的适用性，这里把绘制气泡图的操作都封装到了一个函数里面。以Vue项目为例，要完...
vue中使用echarts实现一个气泡图
03-25
好的，让我来为您介绍如何在Vue中使用echarts实现一个气泡图。 第一步是安装echarts依赖： ``` npm install echarts --save ``` 第二步是在Vue组件中引入echarts： ```javascript import echarts from 'echarts' ``` 第三步是在组件的mounted钩子中创建echarts实例，并将其绑定到指定的DOM元素上： ```javascript mounted() { const bubbleChart = echarts.init(document.getElementById('bubble-chart')); // 在这里配置气泡图的数据和样式 bubbleChart.setOption({ // 在这里配置气泡图的数据和样式 }); } ``` 第四步是在setOption方法中配置气泡图的数据和样式： ```javascript setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'value', min: 0, max: 100, axisLabel: { formatter: '{value}%' } } ], yAxis: [ { type: 'value', min: 0, max: 100, axisLabel: { formatter: '{value}%' } } ], series: [ { name: '气泡图', data: [ [10, 20, 30], [20, 30, 40], [30, 40, 50], [40, 50, 60], [50, 60, 70], [60, 70, 80], [70, 80, 90], [80, 90, 100] ], type: 'scatter', symbolSize: function (data) { return Math.sqrt(data[2]) * 5; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgba(129, 227, 238, 1)' }, { offset: 1, color: 'rgba(25, 183, 207, 1)' }]) } } } ] }); ``` 在这些配置中，您可以更改图表的样式，例如更改坐标轴的范围、更改气泡的大小、更改标签的显示位置等。最终，您将看到一个漂亮的气泡图。 希望这个回答能够帮助您，如果您还有其他的问题，请继续问我。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端互助会

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值