快捷導(dǎo)航

vue2?利用echarts?單獨(dú)繪制省份的步驟

更新時(shí)間：2022年01月23日 16:43:14 作者：前端小杰

這篇文章主要介紹了vue2?利用echarts?單獨(dú)繪制省份,首先引入所需要的第三方模塊，通過示例代碼給大家介紹的非常詳細(xì)，文章末尾給大家補(bǔ)充介紹了vue2.x結(jié)合echarts2實(shí)現(xiàn)顯示具體省份熱力圖的問題，需要的朋友可以參考下

第一步：先引入所需的第三方模塊

import echarts from "echarts"; // 引入所需要的echarts模塊
import "echarts/map/js/province/shanxi"; // 引入省份的js文件
import "echarts/map/json/province/shanxi.json"; // 引入省份的json文件

第二步：開始繪制

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
      var myChart = echarts.init(document.getElementById("left2"));

      var option = {
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默認(rèn)為數(shù)值文本
          calculable: true,
          inRange: {
            color: ["yellow", "lightskyblue", "orangered"],
          },
        },
        series: [
          {
            layoutCenter: ['30%', '30%'],
            type: "map",
            mapType: "山西",
            roam: true,
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 10,
                  fontFamily: "楷體",
                },
              },
              emphasis: {
                  color: "#fff",
            },
            itemStyle: {
                borderColor: "#389BB7",
                areaColor: "#fff",
                areaColor: "#389BB7",
                borderWidth: 0,
            animation: false,// 數(shù)據(jù)
            data: [
              {
                name: "大同市",
                value: 88,
                name: "朔州市",
                value: 96,
                name: "忻州市",
                value: 98,
                name: "呂梁市",
                value: 80,
                name: "太原市",
                name: "晉中市",
                value: 79,
                name: "陽泉市",
                value: 77,
                name: "臨汾市",
                value: 33,
                name: "長治市",
                value: 69,
                name: "運(yùn)城市",
                value: 66,
                name: "晉城市",
                value: 22,
            ],
        ],
      };
      myChart.setOption(option);

最后結(jié)果：

補(bǔ)充：vue2.x結(jié)合echarts2實(shí)現(xiàn)顯示具體省份熱力圖

最近研究了一下VUE2.X結(jié)合ehcarts實(shí)現(xiàn)熱力圖，先看下最終：

效果話不多說，直接上代碼：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <!-- <script type="text/javascript" src="./china.js"></script> -->
    <script type="text/javascript" src="./xinjiang.js"></script>
    <style type="text/css">
        #myChart{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="myChart"></div>
</body>
<script type="text/javascript">

var geoCoordMap = {
    "烏魯木齊":[87.68,43.77],
    "克拉瑪依":[84.77,45.59],
    "石河子":[85.94,44.27],
    "吐魯番":[89.19,42.91],
    "齊齊哈爾":[123.97,47.33],
    "托克遜":[88.63,42.77],
    "鄯善":[90.25,42.82],
    "哈密":[93.44,42.78],
    "伊吾":[94.65,43.28],
    "巴里坤":[93,43.6],
    "庫爾勒":[86.06,41.68],
    "和靜":[86.35,42.31],
    "和碩":[86.84,42.23],
    "博湖":[86.53,41.95],
    "尉梨":[86.24,41.36],
    "輪臺(tái)":[84.25,41.77],
    "焉耆":[86.55,42.05],
    "和田":[79.94,37.12],
    "民豐":[82.63,37.07],
    "策勒":[80.78,37.04],
    "于田":[81.63,36.86],
    "洛浦":[80.17,37.12],
    "皮山":[78.29,37.06],
    "墨玉":[79.74,37.31],
    "阿克蘇":[80.29,41.15],
    "溫宿":[80.24,41.29],
    "拜城":[81.84,41.82],
    "庫車":[82.97,41.68],
    "新和":[82.63,41.55],
    "沙雅":[82.9,41.25],
    "阿瓦提":[80.34,40.64],
    "柯平":[79.06,40.55],
    "烏什":[79.25,41.22],
    "咯什":[75.94,39.52],
    "巴楚":[78.59,39.78],
    "枷師":[76.78,39.46],
    "樂普湖":[76.67,39.23],
    "麥蓋提":[77.62,38.95],
    "莎車":[77.25,38.45],
    "澤普":[77.26,38.2],
    "葉城":[77.42,37.89],
    "疏勒":[76.05,39.41],
    "英吉沙":[76.17,38.91],
    "疏附":[75.83,39.42],
    "塔什庫爾干":[75.22,75.22],
    "阿圖什":[76.12,39.73],
    "阿合奇":[78.42,41.91],
    "阿克陶":[75.94,39.14],
    "烏恰":[75.18,39.7],
    "昌吉":[87.31,44.05],
    "阜康":[87.94,44.14],
    "奇臺(tái)":[89.52,44.02],
    "吉木薩爾":[89.14,44],
    "米泉":[87.68,43.97],
    "瑪納斯":[86.22,44.28],
    "呼圖壁":[86.92,44.18],
    "木壘":[90.34,43.8],
    "博樂":[82.1,44.93],
    "精河":[82.92,44.67],
    "溫泉":[81.08,44.95],
    "伊寧":[81.33,43.91],
    "尼勒克":[82.53,43.82],
    "新源":[83.27,43.41],
    "鞏留":[82.23,43.35],
    "奎屯":[84.89,44.45],
    "特克斯":[81.81,43.23],
    "昭蘇":[81.08,43.15],
    "霍城":[80.87,44.07],
    "察布察爾":[81.12,43.82],
    "塔城":[82.96,46.74],
    "額敏":[83.62,46.52],
    "烏蘇":[84.62,44.45],
    "托里":[83.59,45.92],
    "裕民":[82.94,46.21],
    "沙灣":[85.56,44.29],
    "和布克賽爾":[85.13,46.78],
    "阿勒泰":[88.14,47.86],
    "青河":[90.37,46.71],
    "富蘊(yùn)":[89.44,47.05],
    "福海":[87.51,47.15],
    "吉木乃":[85.84,47.42],
    "布爾津":[86.92,47.7],
    "哈巴河":[86.41,48.05]
};
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push(geoCoord.concat(data[i].value));
    }
    return res;
var loadData = convertData([
    {name: "烏魯木齊", value: 32112},
    {name: "克拉瑪依", value: 44412},
    {name: "石河子", value: 25123},
    {name: "吐魯番", value: 45612},
    {name: "齊齊哈爾", value: 12512},
    {name: "托克遜", value: 12512},
    {name: "鄯善", value: 25121},
    {name: "哈密", value: 54425},
    {name: "伊吾", value: 54126},
    {name: "巴里坤", value: 5226},
    {name: "庫爾勒", value: 56247},
    {name: "和靜", value: 67227},
    {name: "和碩", value: 35427},
    {name: "博湖", value: 78327},
    {name: "尉梨", value: 87628},
    {name: "輪臺(tái)", value: 87629},
    {name: "焉耆", value: 67830},
    {name: "和田", value: 98730},
    {name: "民豐", value: 112331},
    {name: "策勒", value: 113331},
    {name: "于田", value: 132331},
    {name: "洛浦", value: 123231},
    {name: "皮山", value: 154132},
    {name: "墨玉", value: 56632},
    {name: "阿克蘇", value: 23232},
    {name: "溫宿", value: 12333},
    {name: "拜城", value: 22333},
    {name: "庫車", value: 32333},
    {name: "新和", value: 43434},
    {name: "沙雅", value: 54534},
    {name: "阿瓦提", value: 64535},
    {name: "柯平", value: 65435},
    {name: "烏什", value: 567236},
    {name: "咯什", value: 567336},
    {name: "巴楚", value: 67836},
    {name: "枷師", value: 789436},
    {name: "樂普湖", value: 898236},
    {name: "麥蓋提", value: 678437},
    {name: "莎車", value: 56737},
    {name: "澤普", value: 123337},
    {name: "葉城", value: 12337},
    {name: "英吉沙", value: 23437},
    {name: "疏附", value: 34538},
    {name: "阿圖什", value: 34568},
    {name: "阿合奇", value: 12138},
    {name: "阿克陶", value: 32138},
    {name: "瑪納斯", value: 54139},
    {name: "哈巴河", value: 56139},
    {name: "布爾津", value: 67139},
    {name: "吉木乃", value: 78139},
    {name: "福海", value: 65440},
    {name: "富蘊(yùn)", value: 32340},
    {name: "青河", value: 44341},
    {name: "阿勒泰", value: 54341},
    {name: "和布克賽爾", value: 23442},
    {name: "裕民", value: 12343},
    {name: "沙灣", value: 22343}
]);
option = {
    backgroundColor: '#404a59',
    xAxis: {
        show: false
    },
    yAxis: {
    visualMap: {
        type: 'piecewise',
        min: 20000,
        max: 100000,
        calculable: true,
        realtime: false,
        splitNumber: 5,
        inRange: {
            color: ['#005a88', '#04a4f6', '#00943e', '#fdf40f', '#cf2d14']
        },
        right: '10%',
        bottom: '5%',
        orient:"vertical1",
        inverse:true,  //是否反轉(zhuǎn) visualMap 組件
        textStyle: {
            color: '#fff'
    geo: { // 這個(gè)是重點(diǎn)配置區(qū)
      map: '新疆', // 表示中國地圖
      roam: true,
      itemStyle: {
        normal: {
          areaColor: '#081832',
          borderColor: '#425F91'
        emphasis: {
          areaColor: "#2a333d",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      silent: true
    series: [{
        name: '',
        type: 'heatmap',
        data: loadData,
        coordinateSystem: 'geo',
        progressive: 1000,
        animation: false
    }]
var lineChart = echarts.init(document.getElementById('myChart'));
lineChart.setOption(option);
</script>
</html>

　　　說一下：china.js或各個(gè)省份對應(yīng)的js文件在node包里面就有，是比較全面的。有的說這里沒有用到VUE啊，對的，在這里沒引入（那是我的項(xiàng)目額?。?，不過不用擔(dān)心，因?yàn)関ue里面直接引入是完全兼容的啦！　

　　代碼看似很簡單，但是里面的坑很多。因?yàn)槲沂窃陧?xiàng)目中直接使用的，本來想著有node包，就沒有引入china.js或者具體省份對應(yīng)的js文件，造成一些問題。第二個(gè)就是關(guān)于坐標(biāo)軸、網(wǎng)格的設(shè)置，有些設(shè)置是相關(guān)聯(lián)的，要注意。第三個(gè)就是在網(wǎng)上自行找到新疆省份下各個(gè)區(qū)鎖對應(yīng)的經(jīng)緯度（這個(gè)渠道很多，就不多啰嗦了）。第四個(gè)就是在visualMap中的設(shè)置，這個(gè)我也是費(fèi)了很大力氣才實(shí)現(xiàn)的，有興趣的朋友可以自己先試試，看看怎么玩，希望大家相互學(xué)習(xí)，共同進(jìn)步。最后就是該項(xiàng)目地址我已經(jīng)放到git了，歡迎大家mark并且star!

注意是：start!!!多謝多謝git倉庫地址:https://github.com/WangHao1221/vueWithEcharts.git

到此這篇關(guān)于vue2 利用echarts 單獨(dú)繪制省份的文章就介紹到這了,更多相關(guān)vue繪制省份內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: