目錄

?

?

基本概念

代碼與實例

---

?

基本概念

這里使用echarts，框架用vue cli，下面這個鏈接是vue cli導入echarts

https://blog.csdn.net/qq78442761/article/details/97756198

這里只有一點要注意！！導入后，已經集成了很多地圖的json文件，或者js，只要調用就可以了！

程序運行截圖如下：

?

代碼與實例

vue代碼如下：

<template><div><div><div id="main" style="width: 500px; height:500px"></div></div></div> </template><script>import echarts from 'echarts';import 'echarts/map/js/province/jiangsu'export default {mounted(){this.drawLine();},methods: {//開始畫圖了drawLine() {let myChart = echarts.init(document.getElementById('main'));let option = {title: {// text: 'XXXXXXXX',subtext: '江蘇省分布圖',left: 'right'},tooltip: {trigger: 'item',showDelay: 0,transitionDuration: 0.2,formatter: function (params) {let value = (params.value + '').split('.');value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');return params.seriesName + '<br/>' + params.name + ': ' + value;}},visualMap: {left: 'left',min: 500000,max: 3800000,inRange: {color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']},text:['High','Low'],calculable: true,show: false},series: [{name: '可調資源分布',type: 'map',roam: true,map: '江蘇',label: {normal: {show: true,textStyle: {color: 'rgba(0, 255, 0, 1)'}}},itemStyle:{emphasis:{label:{show:true}}},// 文本位置修正textFixed: {Alaska: [20, -20]},data:[{name: '南京市', value: 4822023},{name: '常州市', value: 731449},{name: '徐州市', value: 6553255},{name: '淮安市', value: 2949131},{name: '南通市', value: 38041430},{name: '宿遷市', value: 5187582},{name: '無錫市', value: 3590347},{name: '揚州市', value: 917092},{name: '鹽城市', value: 632323},{name: '蘇州市', value: 1931751},{name: '泰州市', value: 9919945},{name: '鎮江市', value: 1392313},{name: '連云港市', value: 1595728}]}]};myChart.setOption(option)}}} </script> <style scoped></style>

?

總結

以上是生活随笔為你收集整理的前端笔记-vue cli中使用echarts画江苏省地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。