快捷導(dǎo)航

vue 使用 echarts 繪制中國地圖的實現(xiàn)代碼

更新時間：2022年01月23日 10:37:01 作者：前端小杰

這篇文章主要介紹了vue 使用 echarts 繪制中國地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1. 插入echarts 所需模塊

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

2. 正式代碼部分

                         //初始化echarts實例 通過傳參獲取要放置的id名稱
                          var myChart = echarts.init(document.getElementById("容器的id名稱"));
                          // 指定圖表的配置項和數(shù)據(jù)
                          var optionMap = {
                              //設(shè)置 背景顏色
                              backgroundColor: "#FFFFFF",
                              tooltip: {
                                  trigger: "item",
                              },

                            //左側(cè)小導(dǎo)航圖標(biāo)
                             visualMap: {
                                // 水平擺放
                                orient:"horizontal", 
                                // 是否顯示指示條
                                 show: true,
                                 // 設(shè)置字體
                                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, // 設(shè)置是否可以縮放 false 為不可以縮放
                                     zoom:1.2,// 默認(rèn)縮放比例  剛進入頁面時的縮放比例
                                     itemStyle:{
                                        normal: {
                                            areaColor: '#000',
                                            borderColor: 'skyblue',
                                             borderWidth: 1,
                                            shadowColor: '#ccc',
                                             shadowBlur: 30,
                                        opacity:1
                                        },
                                    },
                                    label: {
                                         normal: {
                                            show: true, //是否顯示省份名稱　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 設(shè)置顯示省份名稱的的字體大小 ，也可以顯示fontFamily:... ...
                                             textStyle: {
                                                 fontSize: 6, 
                                            },
                                         },
                                        emphasis: {
                                             show: true,
                                        },
                                     },
                                     data:[{name:'xxx',value:數(shù)字},]
                                },
                             ],
                         };
                        //使用制定的配置項和數(shù)據(jù)顯示圖表
                        myChart.setOption(optionMap);

3. 最后的效果