vue2 利用echarts 單獨繪制省份的步驟
第一步：先引入所需的第三方模塊
import echarts from "echarts"; // 引入所需要的echarts模塊 import "echarts/map/js/province/shanxi"; // 引入省份的js文件 import "echarts/map/json/province/shanxi.json"; // 引入省份的json文件
第二步：開始繪制
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById("left2"));
var option = {
visualMap: {
show: false,
min: 0,
max: 100,
left: "left",
top: "bottom",
text: ["高", "低"], // 文本，默認為數值文本
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,// 數據
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: "運城市",
value: 66,
name: "晉城市",
value: 22,
],
],
};
myChart.setOption(option);
最後結果：
補充：vue2.x結合echarts2實現顯示具體省份熱力圖
最近研究瞭一下VUE2.X結合ehcarts實現熱力圖，先看下最終：
效果話不多說，直接上代碼：
<!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],
"輪臺":[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],
"奇臺":[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],
"富蘊":[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: "輪臺", 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: "富蘊", 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, //是否反轉 visualMap 組件
textStyle: {
color: '#fff'
geo: { // 這個是重點配置區
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或各個省份對應的js文件在node包裡面就有，是比較全面的。有的說這裡沒有用到VUE啊，對的，在這裡沒引入（那是我的項目額！），不過不用擔心，因為vue裡面直接引入是完全兼容的啦！
代碼看似很簡單，但是裡面的坑很多。因為我是在項目中直接使用的，本來想著有node包，就沒有引入china.js或者具體省份對應的js文件，造成一些問題。第二個就是關於坐標軸、網格的設置，有些設置是相關聯的，要註意。第三個就是在網上自行找到新疆省份下各個區鎖對應的經緯度（這個渠道很多，就不多囉嗦瞭）。第四個就是在visualMap中的設置，這個我也是費瞭很大力氣才實現的，有興趣的朋友可以自己先試試，看看怎麼玩，希望大傢相互學習，共同進步。最後就是該項目地址我已經放到git瞭，歡迎大傢mark並且star!
註意是：start!!!多謝多謝git倉庫地址:https://github.com/WangHao1221/vueWithEcharts.git
到此這篇關於vue2 利用echarts 單獨繪制省份的文章就介紹到這瞭,更多相關vue繪制省份內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- JavaScript之ECharts用法講解
- vue+echarts實現進度條式柱狀圖
- Javascript Echarts空氣質量地圖效果詳解
- echarts安裝與配置
- vue+echarts5實現中國地圖的示例代碼