第一次用Echarts 被这个地图迷糊了好久，光有代码，就是不显示，为了给第一次使用的小白一个简单入门，
好了，废话不多说，直接上代码
首先第一步，你想用Echarts，那就必须安装
npm install --save echarts安装完成之后，你就可以在main.js中全局引入这个echarts了
import echarts from 'echarts'
Vue.prototype.$echarts = echarts这样进行引入，就可以在项目中直接使用了，使用的方法就是
先新建一个div ，在div上标注一个唯一性的id，
// // 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("IUR"));
// 绘制图表
myChart.setOption({})这样就可以在这个div块里面渲染一个图表了，一定要记住，设置宽高，不然就不显示了。
下面我们就用地图作为演示，先上地图的效果图
这是我做的中国地图，这只是大屏的一部分，主要说的就是这个地图
这有一个坑点，就是，如果你使用这个地图，必须要在全局还要引入一个东西
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)//显示地图就是这个，有了这个就可以渲染地图了。
接下来什么都准备好了，就可以开始写代码渲染页面了。
drawLine() {
let that = this;
// // 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("ALLimg"));
// 绘制图表
myChart.setOption({
tooltip: {
trigger: "item",
formatter: function(params) {
console.log(params);
}
},
visualMap: [
{
min: 0,
max: 300,
seriesIndex: 0,
align: "left",
pieces: [
{ min: 0, max: 100, label: "非严重区" },
{ min: 100, max: 200, label: "较严重区" },
{ min: 200, max: 300, label: "严重区" }
],
orient: "vertical",
padding: [0, 25, 15, 0],
itemGap: 18, //间隔
// itemWidth:20,
// itemSymbol: "arrow", //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
show: true,
x: "right",
y: "bottom",
icon: "circle",
inRange: {
color: ["#008cff", "#ecd220", "#f86705"]
},
textStyle: {
color: "#fff"
}
},
{
min: 0,
max: 300,
show: false,
splitNumber: 5,
seriesIndex: 1,
inRange: {
color: ["#F5B16D", "#F09C42", "#EC870E", "#D0770B"]
},
textStyle: {
color: "#fff"
}
}
],
geo: {
left: "10", //地图距离上下左右空白距离
right: "10",
zoom: 1, // 改变这个值的大小就可以了，越大地图越大，默认1
map: "china",
label: {
emphasis: {
show: false //不显示中间文字
}
},
roam: true,
itemStyle: {
normal: {
areaColor: "#246c89",
borderColor: "#174456"
},
emphasis: {
areaColor: "#234958"
}
}
},
series: [
{
name: "AQI",
type: "scatter",
// showAllSymbol: true,
coordinateSystem: "geo",
itemStyle: {
normal: {
show: false,
color: "#fff"
}
},
label: {
normal: {
formatter: "{b}",
position: "bottom",
show: true, //显示圆点文字
color: "#fff" //文字颜色
},
emphasis: {
show: true
}
},
data: this.convertData(this.baseDataList1)
}
// {
// name: "AQI",
// type: "heatmap",
// pointSize: 6, // 设置 热力图 点 的大小
// blurSize: 6, // 设置点的 阴影半径
// coordinateSystem: "geo",
// itemStyle: {
// normal: {
// color: "orange"
// }
// },
// data: this.convertData(this.baseDataList2)
// }
]
});
myChart.on("mouseover", function(params) {
console.log(params); //鼠标移动省显示的
});
myChart.on("click", function(param) {
that.routpush(param);
console.log(param); //鼠标点击省显示的
});
}这是设置地图的主要方法具体缺少的那几个值，你们可以参考
carname: "北京",
num: 6, //同比上年异动数
province: ["1", "4", "5"],
enprestype: ["5", "6"],
geoCoordMap: {
北京: [116.4551, 40.2539],
天津: [117.4219, 39.4189],
河北: [114.5368, 38.0431],
山东: [117.0263, 36.6773],
山西: [112.569, 37.8798],
黑龙江: [126.668, 45.7479],
吉林: [125.3322, 43.9027],
辽宁: [123.4379, 41.8418],
内蒙古: [111.7728, 40.8231],
新疆: [87.6341, 43.799],
甘肃: [103.8329, 36.0656],
青海: [97.7867, 36.627],
宁夏: [106.2657, 38.4783],
四川: [104.0823, 30.6571],
西藏: [91.12406, 29.65343],
陕西: [108.9607, 34.27181],
河南: [113.7597, 34.77218],
安徽: [117.3364, 31.7398],
江苏: [118.7693, 32.06674],
重庆: [106.558, 29.56914],
湖北: [114.3481, 30.55275],
上海: [121.4801, 31.2363],
浙江: [120.1591, 30.272553],
云南: [102.7164, 25.052068],
贵州: [106.7119, 26.60612],
湖南: [112.9902, 28.11841],
江西: [115.8227, 28.64288],
福建: [119.3015, 26.107029],
广东: [113.2728, 23.138577],
广西: [108.334, 22.821439],
海南: [110.0057, 19.1190805],
澳门: [113.5494, 23.20295],
香港: [114.17774, 22.28315],
台湾: [121.51561, 25.050003]}，
baseDataList1: [
{ name: "北京", value: 100 },
{ name: "天津", value: 112 },
{ name: "河北", value: 112 },
{ name: "山东", value: 112 },
{ name: "山西", value: 114 },
{ name: "黑龙江", value: 100 },
{ name: "吉林", value: 16 },
{ name: "辽宁", value: 50 },
{ name: "内蒙古", value: 118 },
{ name: "新疆", value: 119 },
{ name: "甘肃", value: 21 },
{ name: "青海", value: 300 },
{ name: "宁夏", value: 121 },
{ name: "四川", value: 125 },
{ name: "西藏", value: 23 },
{ name: "陕西", value: 255 },
{ name: "河南", value: 298 },
{ name: "安徽", value: 25 },
{ name: "江苏", value: 245 },
{ name: "重庆", value: 125 },
{ name: "湖北", value: 125 },
{ name: "上海", value: 25 },
{ name: "浙江", value: 25 },
{ name: "云南", value: 126 },
{ name: "贵州", value: 26 },
{ name: "湖南", value: 247 },
{ name: "江西", value: 227 },
{ name: "福建", value: 232 },
{ name: "广东", value: 327 },
{ name: "广西", value: 28 },
{ name: "海南", value: 29 },
{ name: "澳门", value: 30 },
{ name: "香港", value: 30 },
{ name: "台湾", value: 31 },
{ name: "玉溪", value: 31 },
{ name: "张家口", value: 31 },
{ name: "阳泉", value: 31 },
{ name: "莱州", value: 32 },
{ name: "湖州", value: 32 },
{ name: "汕头", value: 32 },
{ name: "昆山", value: 33 },
{ name: "宁波", value: 33 },
{ name: "湛江", value: 33 },
{ name: "揭阳", value: 34 },
{ name: "荣成", value: 34 },
{ name: "连云港", value: 35 },
{ name: "葫芦岛", value: 35 },
{ name: "常熟", value: 236 },
{ name: "东莞", value: 336 },
{ name: "河源", value: 36 },
{ name: "淮安", value: 436 },
{ name: "泰州", value: 236 },
{ name: "南宁", value: 437 },
{ name: "营口", value: 37 },
{ name: "惠州", value: 337 },
{ name: "江阴", value: 37 },
{ name: "蓬莱", value: 37 },
{ name: "韶关", value: 38 },
{ name: "嘉峪关", value: 38 },
{ name: "广州", value: 138 },
{ name: "延安", value: 138 },
{ name: "太原", value: 139 },
{ name: "清远", value: 139 },
{ name: "中山", value: 139 },
{ name: "昆明", value: 139 },
{ name: "寿光", value: 440 },
{ name: "盘锦", value: 40 },
{ name: "长治", value: 41 },
{ name: "深圳", value: 41 },
{ name: "珠海", value: 42 },
{ name: "宿迁", value: 43 },
{ name: "咸阳", value: 43 },
{ name: "铜川", value: 44 },
{ name: "平度", value: 44 },
{ name: "佛山", value: 44 },
{ name: "海口", value: 44 },
{ name: "江门", value: 45 },
{ name: "章丘", value: 45 },
{ name: "肇庆", value: 46 },
{ name: "大连", value: 47 },
{ name: "临汾", value: 47 },
{ name: "吴江", value: 47 },
{ name: "石嘴山", value: 49 },
{ name: "沈阳", value: 50 },
{ name: "苏州", value: 50 },
{ name: "茂名", value: 50 },
{ name: "嘉兴", value: 51 },
{ name: "长春", value: 51 },
{ name: "胶州", value: 52 },
{ name: "银川", value: 52 },
{ name: "张家港", value: 52 },
{ name: "三门峡", value: 53 },
{ name: "锦州", value: 154 },
{ name: "南昌", value: 154 },
{ name: "柳州", value: 154 },
{ name: "三亚", value: 154 },
{ name: "自贡", value: 156 },
{ name: "吉林", value: 156 },
{ name: "阳江", value: 257 },
{ name: "泸州", value: 157 },
{ name: "西宁", value: 157 },
{ name: "宜宾", value: 258 },
{ name: "呼和浩特", value: 58 },
{ name: "成都", value: 58 },
{ name: "大同", value: 58 },
{ name: "镇江", value: 59 },
{ name: "桂林", value: 59 },
{ name: "张家界", value: 59 },
{ name: "宜兴", value: 59 },
{ name: "北海", value: 60 },
{ name: "西安", value: 61 },
{ name: "金坛", value: 62 },
{ name: "东营", value: 62 },
{ name: "牡丹江", value: 63 },
{ name: "遵义", value: 63 },
{ name: "绍兴", value: 63 },
{ name: "扬州", value: 64 },
{ name: "常州", value: 64 },
{ name: "潍坊", value: 65 },
{ name: "重庆", value: 66 },
{ name: "台州", value: 67 },
{ name: "南京", value: 67 },
{ name: "滨州", value: 70 },
{ name: "贵阳", value: 71 }
],