//1. 基于准备好的dom,初始化echarts实例this.myChart =this.$echarts.init(this.$refs.myChart);//2. 引入要显示的地图 json 文件(json文件可以是echart自带的,也可以是自己下载的)this.mapJson = require("echarts/map/json/china.json");//3. 注册可用的地图 registerMap("自定义的名字,要和option中...
第一步:vue中安装echarts和echarts-gl npm install echarts npm install echarts-gl 或是 yarn add echarts yarn addecharts-gl package.json 也可以指定版本命令 加个@后面跟版本号即可 yarn addecharts-gl@2.0.9 成功之后可以在package.json中检查是否安装成功(如上图) 第二步:在vue文件中引入 引入位置:...
2、 main.js中全局引入echarts: //main.jsimport echartsfrom'echarts'Vue.prototype.$echarts= echarts 3、在页面中导入地图的 json 文件(可以使用echarts的文件,也可以使用本地的 json 文件) import chinamapfrom"echarts/map/json/china.json";//两个导入效果一样//import chinamap from '../assets/ma...
配置好option之后,使用echarts实例上的setOption方法即可将我们写的配置传入到echarts容器中 myChart.setOption(option); 那么到目前为止,基本的地图就已经制作完成了,只是它看起来很粗糙丑陋,接下来要做的就是对我们的地图进行样式的优化。需要注意的是,echarts是不支持CSS修改样式的,想要修改样式只能通过添加或者修改配...
这是我从官网的截取的示例,不难看出,在视觉效果上确实很震撼,但是美观程度不高。当然也可以通过书写配置项来达到我们自己想要的效果,但是过程比较繁琐,所以这里我还是用echarts来实现的3D地图。 其实3D相较于2D就是多了立体感,简单来说就是多了一个坐标轴。2D只有两个,那就是X和Y,而3D则是多了一个Z轴。应该...
1、echarts地图模块封装,可复用 2、echarts地图自定义弹窗(显示自定义样式、自定义数据、自定义图片),其它图表的自定义弹窗可参考。 3、echarts地图自定义弹窗动态展示接口数据 4、基于姐姐篇实现的,这个地图模块也是自适应的 5、基于vue2、vue cli3、echarts 5 ...
在使用Vue2和Echarts实现地图效果时，首先的关键步骤是创建一个容器来承载地图。这个容器需要通过Echarts实例化，以便在其中显示图表，这需要引入并安装Echarts库：`npm install echarts --save`。为了构建地图，我们需要一个地图的JSON文件，可以去hxkj.vip/demo/echart... 获取，以荆州的JSON为例。获...
首先，需要安装echarts和echarts-gl插件。接着，在Vue组件中引入echarts和echarts-gl。然后，创建一个div容器来展示地图。在Vue组件的mounted生命周期函数中，初始化echarts并绘制地图。但是，在完成上述步骤后，常常会遇到报错问题。经过排查，发现原因在于版本不兼容。echarts和echarts-gl插件需要满足特定...
在Vue2中，Echarts提供了echarts-gl库以实现3D图表，包括3D柱状图、3D折线图和地球等，其中也包括3D地图功能。然而，官方库在视觉呈现上可能不尽人意，效果较为粗糙。尽管官网示例展示了3D地图的震撼感，但美观度有待提升。调整配置项虽然可以自定义，但过程繁琐。在追求3D效果时，我选择利用Echarts本身...