<template> <div id="mapDiv"> </div> </template> <script> import 'echarts/map/js/china' var dataList = [{ name: '安徽',value: 5498 }, { name: '澳门',value: 0 }, { name: '北京',value: 0 }, { name: '福建',value: 4111 }, { name: '甘肃',value: 59 }, { name: '广东',value: 1928 }, { name: '广西',value: 4 }, { name: '贵州',value: 52 }, { name: '海南',value: 1284 }, { name: '河北',value: 3151 }, { name: '河南',value: 3814 }, { name: '黑龙江',value: 316 }, { name: '湖北',value: 1724 }, { name: '湖南',value: 33378 }, { name: '吉林',value: 520 }, { name: '江苏',value: 113 }, { name: '江西',value: 961 }, { name: '辽宁',value: 139 }, { name: '内蒙古',value: 0 }, { name: '宁夏',value: 60 }, { name: '青海',value: 0 }, { name: '山东',value: 106 }, { name: '山西',value: 0 }, { name: '陕西',value: 114 }, { name: '上海',value: 1321 }, { name: '四川',value: 7867 }, { name: '台湾',value: 0 }, { name: '天津',value: 1157 }, { name: '西藏',value: 14 }, { name: '香港',value: 0 }, { name: '新疆',value: 115 }, { name: '云南',value: 3811 }, { name: '浙江',value: 0 }, { name: '重庆',value: 886 } ]; export default { name: 'maps', data() { return { } }, mounted() { setTimeout(()=>{ this.init() },100) }, methods: { init(){ let option = { tooltip: { triggerOn: "click", formatter: function(e, t, n) { return .5 == e.value ? e.name + ":播放量" : e.seriesName + "<br />" + e.name + ":" + e.value } }, visualMap: [{ dimension: 0, right: 20, bottom: 20, itemWidth: 16, itemHeight: '200px', orient:'horizontal', text: ['由高到低','播放量'], backgroundColor:'rgba(0,28,66,0.6)', padding:[15,10], textStyle: { color: 'rgba(255,255,255,1)' }, inRange: { color: ['#9B1E23', '#E72128', '#FB8D1F', '#FFCF4E'] } }], geo: { map: "china", roam: !1, scaleLimit: { min: 1, max: 2 }, roam: true, //是否开启平游或缩放 scaleLimit: { //滚轮缩放的极限控制 min: 1, max: 2 }, zoom: 1, top: 100, left:'10%', label: { normal: { show: !0, fontSize: "12", color: "#fff" } }, itemStyle: { normal: { borderColor: "rgba(0, 0, 0, 0.2)" }, emphasis: { areaColor: "#f2d5ad", shadowOffsetX: 0, shadowOffsetY: 0, borderWidth: 0 } }, regions: [ { name: "南海诸岛", itemStyle: { // 隐藏地图 normal: { opacity: 0, // 为 0 时不绘制该图形 } }, label: { show: false // 隐藏文字 } } ] }, series: [{ name: "播放量", type: "map", geoIndex: 0, data: dataList }] }; let echartsDiv = this.$echarts.init(document.getElementById('mapDiv')) echartsDiv.setOption(option) } } } </script> <style lang="less"> #mapDiv{ width: 100%; height: 100%; } </style>