vue中使用ECharts引入中国地图

坑我来踩代码你们看

china.js 提取码：iwn9

百度网盘请输入提取码

<template><div class="echarsMap"><div id="china_map" style="width: 100%; height: 100%;></div></div>
</template><script>
import "../assets/js/china.js";
export default {data() {return {dataList: [{name: "南海诸岛",value: 0,},{name: "北京",value: 54,},{name: "天津",value: 13,},{name: "上海",value: 40,},{name: "重庆",value: 75,},{name: "河北",value: 13,},{name: "河南",value: 83,},{name: "云南",value: 11,},{name: "辽宁",value: 19,},{name: "黑龙江",value: 15,},{name: "湖南",value: 69,},{name: "安徽",value: 60,},{name: "山东",value: 39,},{name: "新疆",value: 4,},{name: "江苏",value: 31,},{name: "浙江",value: 104,},{name: "江西",value: 36,},{name: "湖北",value: 1052,},{name: "广西",value: 33,},{name: "甘肃",value: 7,},{name: "山西",value: 9,},{name: "内蒙古",value: 7,},{name: "陕西",value: 22,},{name: "吉林",value: 4,},{name: "福建",value: 18,},{name: "贵州",value: 5,},{name: "广东",value: 98,},{name: "青海",value: 1,},{name: "西藏",value: 0,},{name: "四川",value: 44,},{name: "宁夏",value: 4,},{name: "海南",value: 22,},{name: "台湾",value: 3,},{name: "香港",value: 5,},{name: "澳门",value: 5,},],};},mounted() {this.initMap();},methods: {initMap() {// 初始化echarts实例this.chinachart = this.$echarts.init(document.getElementById("china_map"));// 进行相关配置this.chartOption = {tooltip: {backgroundColor: "rgba(0, 0, 0, 0.7)",borderColor: "rgba(0, 0, 0, 0.7)",textStyle:{color:"#fff"},triggerOn: "mousemove",formatter: function (e, t, n) {return e.name + "：" + e.value;},},visualMap: {min: 0,max: 1000,left: 400,bottom: 40,showLabel: !0,pieces: [{gt: 10000,label: "> 10000 ",color: "#F57567",},{gte: 1000,lte: 9999,label: "1000 - 9999 ",color: "#FF9985",},{gte: 1,lt: 999,label: "1 - 999 ",color: "#FFE0D9",},{value: 0,color: "#ffffff",},],show: !0,},geo: {map: "china",roam: !1,scaleLimit: {min: 1,max: 2,},layoutCenter: ["55%", "50%"],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域layoutSize: 600,zoom: 1.23,top: 120,label: {normal: {show: !0,fontSize: "14",color: "rgba(0,0,0,0.7)",},},itemStyle: {normal: {borderColor: "rgba(0, 0, 0, 0.2)",},emphasis: {areaColor: "#3FD8E3 ",shadowOffsetX: 0,shadowOffsetY: 0,borderWidth: 0,},},},series: [{name: "",type: "map",geoIndex: 0,data: this.dataList,},],};// 使用刚指定的配置项和数据显示地图数据this.chinachart.setOption(this.chartOption);},},
};
</script><style scoped>
.echarsMap {height: 788px;width: 100%;margin-top: 60px;
}
</style>

vue中使用ECharts引入中国地图相关推荐

vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...
vue中使用echarts绘制中国地图
首先需要一个绘制中国地图的json文件(资源还在审核,审核过后会重新贴上来) 1.首先引入echarts和json文件,在需要的地方引即可 import echarts from 'echarts'; ...
vue项目使用ECharts的中国地图，设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置. 效果图如下: 实现上图效果步骤如下: 确保项目中下载了echarts,然后在main.js中引用echarts imp ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
基于VUE+TS中引用ECharts的中国地图和世界地图密度表
(第一次写掘金,嗯也不知道写啥好.想了想,先来一份简单可口的老菜谱.虽然以前在其他平台也上过,换个地方说不准口味刚好呢哈哈哈哈-) 首先先附上官网 http://echarts.baidu.com/o ...
vue中使用echarts和百度地图实现飞机迁徙图
在vue-cli生成的项目中使用echarts和百度地图api实现飞机迁徙图,当然也可以实现其他效果. 1. 准备项目安装echarts 在已经生成的vue项目根目录npm install echa ...
vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
1.初始化echarts以及例子可以看管网的地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...
微信小程序用echarts引入中国地图
下载下载GitHub 上的 ecomfe/echarts-for-weixin 项目链接: ecomfe/echarts-for-weixin. 导入下载好后解压,打开微信开发者工具,新建一个项 ...

vue中使用ECharts引入中国地图

vue中使用ECharts引入中国地图相关推荐

最新文章

热门文章