文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue使用echarts绘制中国地图的实现代码

2024-04-02 19:55

关注

1. 插入echarts 所需模块

import echarts from "echarts";
import 'echarts/map/js/china'   // 使用中国地图需把China.js文件引入

2. 正式代码部分

                         //初始化echarts实例 通过传参获取要放置的id名称
                          var myChart = echarts.init(document.getElementById("容器的id名称"));
                          // 指定图表的配置项和数据
                          var optionMap = {
                              //设置 背景颜色
                              backgroundColor: "#FFFFFF",
                              tooltip: {
                                  trigger: "item",
                              },

                            //左侧小导航图标
                             visualMap: {
                                // 水平摆放
                                orient:"horizontal", 
                                // 是否显示指示条
                                 show: true,
                                 // 设置字体
                                textStyle: {
                                  fontSize: 3.5,
                               },
                                 // 显示的位置
                                x: "",
splitList: [
                                    { start: 0, end: 0 },
                                    { start: 1, end: 9 },
                                    { start: 10, end: 99 },
                                    { start: 100, end: 499 },
                                    { start: 500, end: 999 },
                                    { start: 1000, end: 10000 },
                                    { start: 10000 },
                                ],
                                color: [
                                    "#4a1213",
                                    "#772526",
                                    "#bb3937",
                                    "#d56355",
                                    "#e9a188",
                                    "#faebd2",
                                    "#f5f5f5",
                                ],
                              
                            },

                             //配置属性
                            series: [
                               {
                                    name: title,
                                    type: "map",  // 类型 为map地图
                        // 具体地图类型为china 在这里需要引入echarts中自带的China.js文件
                                     mapType: "china",  
                                     roam: false, // 设置是否可以缩放 false 为不可以缩放
                                     zoom:1.2,// 默认缩放比例  刚进入页面时的缩放比例
                                     itemStyle:{
                                        normal: {
                                            areaColor: '#000',
                                            borderColor: 'skyblue',
                                             borderWidth: 1,
                                            shadowColor: '#ccc',
                                             shadowBlur: 30,
                                        opacity:1
                                        },
                                    },
                                    label: {
                                         normal: {
                                            show: true, //是否显示省份名称                              // 设置显示省份名称的的字体大小 ,也可以显示fontFamily:... ...
                                             textStyle: {
                                                 fontSize: 6, 
                                            },
                                         },
                                        emphasis: {
                                             show: true,
                                        },
                                     },
                                     data:[{name:'xxx',value:数字},]
                                },
                             ],
                         };
                        //使用制定的配置项和数据显示图表
                        myChart.setOption(optionMap);

3. 最后的效果

到此这篇关于vue 使用 echarts 绘制中国地图的文章就介绍到这了,更多相关vue 使用 echarts 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯