VUE 中实现echarts江苏气泡图

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实现一个气泡图。 第一步是安装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、付费专栏及课程。

余额充值