1. 插入echarts 所需模組

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

2. 正式程式碼部分

                         //初始化echarts例項 通過傳參獲取要放置的id名稱
                          var myChart = echarts.init(document.getElementById("容器的id名稱"));
                          // 指定圖表的配置項和資料
                          var optionMap = {
                              //設定 背景顏色
                              backgroundColor: "#FFFFFF",http://www.cppcns.com
 
                 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 },www.cppcns.com
 
            { start: 1000,end: 10000 },{ start: 10000 },],color: [
                  "#4a1213","#772526","#bb3937","#d56355","#e9a188","#faebd2","#f5f5f5",//配置屬性
                            series: [
                               {
                                    name: title,type: "map",zFTENL // 型別 為map地圖
　　　　　　　　　　　　　　　　　　　　　　　　// 具體地圖型別為china 在這裡需要引入echarts中自帶的China.js檔案
                                     mapType: "china",roam: false,// 設定是否可以縮放 false 為不可以縮放
                                     zoom:1.2,// 預設縮放比例  剛進入頁面時的縮放比例
                                     itemStyle:{
                                       zFTENL
 
 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. 最後的效果

到此這篇關於 使用 echarts 繪製中國地圖的文章就介紹到這了,更多相關vue 使用 echarts 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以zFTENL後多多支援我們！