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

Zahara ·

更新时间:2024-11-10

· 1791 次阅读

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. 最后的效果