Echarts+Vue实现国省市级地图

13 篇文章 4 订阅
4 篇文章 1 订阅

聊聊Echarts如何引入国家、省市级地图,之说引入具体的数据展示和效果看echarts文档

一、中国地图

<template>
    <div class="about">
     <div ref="map" style="width:1200px;height:800px;"></div>
    </div>
</template>

<script>
import echarts from 'echarts' //4.9.0
import 'echarts/map/js/china'
export default {
    data() {
        return{
            
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        init(){
            //初始化echarts实例
            var myChart = echarts.init(this.$refs.map)
            //指定图表配置项及数据
            var option ={
                title:{
                    text:'中国地图'
                },  
                series:[{
                    type:'map',
                    map:'china'
                }]
            }
            //使用刚指定的配置项及数据
            myChart.setOption(option);
        }
    },
    
}
</script>

china的json文件是echarts自带的,直接引入即可

只需要在series -> map 里面定义'china'

这是页面中的中国地图:

二、省市级地图

省市级echarts无自带的json文件,需要去这里引入。http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=22.65267050733856&lng=114.18983459472656&zoom=10

如果直接调用json api的话看文档,如果没记错有个geo可以引入json api。

本地演示的话我就直接将完整的json文件复制到本地文档了,再引入项目。

<template>
    <div class="about">
     <div ref="map" style="width:1200px;height:800px;"></div>
    </div>
</template>

<script>
import echarts from 'echarts' //4.9.0
import gzMap from '@/assets/gz'
export default {
    data() {
        return{
            
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        init(){
            //初始化echarts实例
            var myChart = echarts.init(this.$refs.map)
            //注入这个表
            echarts.registerMap('guangzhou', gzMap);
            //指定图表配置项及数据
            var option ={
                title:{
                    text:'广州地图'
                },  
                series:[{
                    type:'map',
                    map:'guangzhou'
                }]
            }
            //使用刚指定的配置项及数据
            myChart.setOption(option);
        }
    },
    
}
</script>

这是广州市的市级地图,其实省级同理,可以去尝试一下

关于具体的样式调整,地区显示什么的可以去看官方文档,创作不易,感谢支持

  • 13
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
ECharts是一款基于JavaScript的开源可视化图表库,而Vue是一套用于构建用户界面的渐进式JavaScript框架。结合使用EChartsVue可以创建各种交互式的数据可视化图表。 一个常见的ECharts Vue案例是在Vue项目中使用ECharts来展示特定数据集的柱状图。以下是该案例的简要实现步骤: 1. 安装ECharts使用npm或yarn命令在Vue项目中安装ECharts。例如,可以执行以下命令来安装ECharts: ``` npm install echarts --save ``` 2. 导入ECharts库:在需要使用EChartsVue组件中导入ECharts库。例如,可以在script标签中添加以下代码: ```javascript import echarts from 'echarts' ``` 3. 创建图表容器:在Vue组件中创建一个div元素作为图表的容器。例如,可以在template标签中添加以下代码: ```html <template> <div id="chartContainer"></div> </template> ``` 4. 初始化图表实例:在Vue组件的mounted生命周期钩子函数中通过ECharts初始化图表的实例。例如,可以在script标签中添加以下代码: ```javascript mounted() { const chartContainer = document.getElementById('chartContainer') const chart = echarts.init(chartContainer) } ``` 5. 配置图表选项:通过设置ECharts实例的option属性来配置图表的选项。例如,可以在mounted函数中添加以下代码: ```javascript mounted() { const chartContainer = document.getElementById('chartContainer') const chart = echarts.init(chartContainer) chart.setOption({ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }) } ``` 6. 渲染图表:通过调用ECharts实例的render方法将图表渲染到页面中。例如,可以在mounted函数中最后添加以下代码: ```javascript mounted() { const chartContainer = document.getElementById('chartContainer') const chart = echarts.init(chartContainer) chart.setOption({ // 配置图表选项 }) chart.render() } ``` 以上就是一个简单的ECharts Vue案例的实现步骤。通过按照以上步骤,可以在Vue项目中使用ECharts来展示各种类型的可视化图表,包括折线图、饼图、雷达图等。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Beannnnnnn

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

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

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

打赏作者

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

抵扣说明:

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

余额充值