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

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 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！