0. 环境 & 效果图

vue 2.6.11 + echarts 5.0.1

1. 绘图文件：BmapTest.vue

是一个用来绘制地图的组件（component），可被页面（view）调用

<template><div id="maintest" v-loading="loading"></div>
</template><script>
var echarts = require('echarts')
require('echarts/extension/bmap/bmap')
import router from '../../router/index'function graph(json) {
var myChart = echarts.init(document.getElementById('maintest'));
var option;// 示例数据
// var data2 = [
//     {name: '海门', value: [113,28.21,100]},
//      {name: '鄂尔多斯', value: [115.480656,35.23375,120]},
//      {name: '招远', value: [125.03,46.58,780], stock_code: '600433'}
// ];option = {// title: {//     text: '企业地图',//     textStyle: {//         color: '#fff'//     }// },tooltip : {trigger: 'item',formatter: function (params) {return params.marker + params.seriesName+ '<br/>' + params.name+ '<br/>' + '股票代码：' + params.data.stock_code;}},bmap: {// center: [104.114129, 37.550339],center: [112.114129, 37.550339],zoom: 5,roam: true,silent: true, // 不响应和触发鼠标事件，否则点击节点跳转至新页面时地图会聚焦到那个点mapStyle: {styleJson: [{'featureType': 'railway','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'highway','elementType': 'all','stylers': {'color': '#fdfdfd'}}, {'featureType': 'highway','elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'arterial','elementType': 'geometry','stylers': {'color': '#fefefe'}}, {'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#fefefe'}}, {'featureType': 'poi','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'green','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'subway','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'manmade','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'local','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'arterial','elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'building','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'label','elementType': 'labels.text.fill','stylers': {'color': '#999999'}}]}},series : [{name: '相关企业',type: 'scatter',// type: 'effectScatter',coordinateSystem: 'bmap',// data: convertData(data),data: json,// symbolSize: 20,symbolSize: function (val) {// return val[2].slice(0,2) / 4;// return val[2] / 150000000 + 10;return val[2] * 20 + 20;},encode: {value: 2},label: {formatter: '{b}',position: 'top',show: false},itemStyle: {// color: '#ddb926'},emphasis: {label: {show: true},scale: true,}},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'bmap',// data: data2,data: json.sort(function (a, b) {return b.value[2] - a.value[2];}).slice(0, 5),// symbolSize: 30,symbolSize: function (val) {// return val[2].slice(0,2) / 2;// return val[2] / 150000000 + 15;return val[2] * 15 + 40;},encode: {value: 2},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {formatter: '{b}',position: 'right',show: true},itemStyle: {// color: '#18D070',shadowBlur: 10,shadowColor: '#333'// shadowColor: '#18D070'},emphasis: {scale: true,},zlevel: 1}]
};myChart.setOption(option);// 为 echarts 图表添加点击事件myChart.on('click', function(param) {// console.log(param);// console.log(param.data.name); //获取热词名称// window.open(href + 'whole?query='+ param.data.name);// if(param.dataType == 'node') {router.push({path: "/detail",query: {stockCode: param.data.stock_code}})// }});}export default {data () {return {query: decodeURI(this.$route.query.query),list: [],loading: true}},methods: {graph,async getData () {let {data} = await this.$get("http://ip地址:port端口号/ForeSee/industryInfo/" + this.query)// 本地测试// let  {data}  = await this.$get("/data/multi.json");// console.log(data)// 数据处理let arr = [];for(var i=0; i<data.geo.length; i++) {let oneValue = [];oneValue.push(data.geo[i].lng);oneValue.push(data.geo[i].lat);oneValue.push(data.geo[i].value);arr.push({name: data.geo[i].company_name,value: oneValue,stock_code: data.geo[i].stock_code,});}this.list = arr;console.log('行业地图>')// console.log(arr)setTimeout(() => {this.graph(this.list);this.loading = false;}, 1000);},},// created () {//     setTimeout(this.graph(),3000);// },mounted () {// this.graph();this.getData();},watch: {// list () {//     this.graph(this.list);// }}}
</script><style scoped>#maintest {width: 100%; height: 600px; border: 1px solid #EBEEF5;margin: 0 auto;margin-bottom: 30px;margin-top: 60px;/* 阴影 */box-shadow: 10px 10px 10px rgba(0,0,0,.5)}
</style><style type="text/css">.anchorBL{display:none}
</style>

2. 页面文件：Multi.vue

调用（import）了许多组件，其中包括 BmapTest.vue，这样就能在 Multi 页面中看见我们绘制的地图啦

核心代码：

import BmapTest from "@/components/multi/BmapTest"

<template><div data-spy="scroll" data-target="#navbar-example"><!-- LOAD PAGE --><div class="animationload"><div class="loader"></div></div><!-- BACK TO TOP SECTION --><BackTop></BackTop><!-- <Header></Header> --><div><!-- Header --><div class="header header-1 sticky-header"><!-- MIDDLE BAR --><div class="middlebar d-none d-sm-block"><div class="container"><div class="row align-items-center"><div class="col-3 col-md-3"><div class="logo"><a href="index.html"><img src="../assets/images/logo-black.png" alt="" width="100%" /></a></div></div><div class="col-9 col-md-9"><div class="contact-info"><div class="rs-icon-1"><div class="icon"><a href="index.html"><div class="fas fa-home"></div></a></div><div class="body-content"><a href="index.html"><div class="heading">HOME</div></a></div></div><!-- INFO 1 --><div class="rs-icon-1"><div class="icon"><div class="fas fa-envelope"></div></div><div class="body-content"><div class="heading">Email Support :</div>info@foresee.com</div></div></div></div></div></div></div></div><!-- BANNER --><!-- <div class="section banner-page" data-background="../assets/images/banner-bg.png"> --><div class="section banner-page backgroundImage"><div class="content-wrap pos-relative"><div class="container"><div class="col-12 col-md-12"><div class="d-flex bd-highlight mb-2"><div class="title-page" :data="industryInfo">{{ industryInfo.industry }}</div></div><nav aria-label="breadcrumb"><ol class="breadcrumb "><!-- <li class="breadcrumb-item">该行业下共有  <span> 20 </span>  家上市企业   ...</li> --><li class="breadcrumb-item">该行业下共有  <span :data="totalCompanies"> {{ totalCompanies }} </span>  家上市企业</li></ol></nav></div></div></div></div></div><!-- CONTENT --><div id="class" class=""><div class="content-wrap"><div class="container"><!-- <div class="single-page"> --><div class="widget-title">行业简介 <span>Introduction</span></div><!-- </div> --><!-- 简介的词数大于120 --><div v-if="over120"><p class="introduction" v-show="flag" :data="describe_arr">{{ describe_arr }}<a href="javascript:void(0)" @click="toggle" class="toggle">展开</a></p><p class="introduction" v-show="!flag" :data="industryInfo">{{ industryInfo.describe }}<a href="javascript:void(0)" @click="toggle" class="toggle">收起</a></p></div><!-- 简介的词数小于120 --><div v-if="!over120"><p class="introduction" :data="industryInfo"> {{ industryInfo.describe }} </p></div><!-- <Geo></Geo> --><BmapTest></BmapTest><LoadList :industry_code="industryInfo.industry_code"></LoadList><Report :industry_code="industryInfo.industry_code"></Report><div class="widget-title widget-title-3">行业排名 <span>Top 5</span></div><PieIndustry></PieIndustry></div></div></div><CTA></CTA><!-- FOOTER SECTION --><Footer></Footer></div></template><script src="../../public/js/vendor/modernizr.min.js"></script>
<!-- JS VENDOR -->
<!--script src="../../public/js/vendor/jquery.min.js"></script-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="../../public/js/vendor/bootstrap.min.js"></script>
<script>$('.collapse').collapse()</script>
<script src="../../public/js/vendor/owl.carousel.js"></script>
<script src="../../public/js/vendor/jquery.magnific-popup.min.js"></script>
<!-- SENDMAIL -->
<script src="../../public/js/vendor/validator.min.js"></script>
<script src="../../public/js/vendor/form-scripts.js"></script>
<script src="../../public/js/script.js"></script><script>
// @ is an alias to /src
import Header from "@/components/Header";
import BackTop from "@/components/BackTop"
import Footer from "@/components/Footer";
import CTA from "@/components/CTA";
// import Geo from "@/components/multi/Geo";
import LoadList from "@/components/multi/LoadList";
import Report from "@/components/multi/Report";
import PieIndustry from "@/components/multi/Pie_industry"
import BmapTest from "@/components/multi/BmapTest"export default {name: 'Detail',components: {Header,BackTop,Footer,CTA,// Geo,LoadList,Report,PieIndustry,BmapTest},data() {return {query: decodeURI(this.$route.query.query),// query: "BK0420",industryInfo: {},    //公司基本详情，包括名称、股票代码、简介等describe_arr: "",    //缩略版的企业简介flag: true,          //配合 toggle() 方法，用于控制企业简介的展开与折叠totalCompanies: 105, //该行业下的公司数目over120: false       //行业简介};},created() {//console.log(this.query);this.getData();},methods: {async getData () {let {data} = await this.$get("http://ip地址:port端口号/ForeSee/industryInfo/" + this.query)// console.log('行业详情页')// console.log(data)// 本地测试// let  {data}  = await this.$get("/data/multi.json");// console.log(data)this.industryInfo = data.IndustryInfoif(data.IndustryInfo.describe.length >= 122) {this.over120 = true;this.describe_arr = data.IndustryInfo.describe.slice(0,120) + "..."}this.totalCompanies = data.totalCompanies},toggle () {//变换 flag, 用于控制企业简介的展开与折叠this.flag = !this.flag}}
}
</script><style scoped>
/* 头部 */
.header {/* position: fixed; */height: 100px;width: 100%;background-color: rgba(255, 255, 255) !important;z-index: 999;/* 阴影 */box-shadow: 0px 7px 7px rgba(0,0,0,.3);transition: all .2s;
}
.sticky-header {position: sticky;top: 0;
}
.backgroundImage{background-image: url('../assets/images/banner-bg.png');background-attachment:fixed; background-repeat:no-repeat;width:calc(100%);height: calc(100%);
}
.introduction {font-size: 16px;text-indent: 0em;
}
.introduction::first-letter {font-size: 30px;color: #FFD808; float: left;
}
.toggle {color: #FFD808;
}
.widget-title-3 {padding-top: 80px;
}
</style>

3. 修改 Index.html，设置 AK

echarts 地图本质上还是散点图，用经纬度值取代x，y坐标，在此基础上以地图为图像背景。这个图像背景，就需要调用百度地图的API啦，需要自己去百度地图的官网申请密钥~

把申请到的AK密钥写进 public 目录下的 index.html 中：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><script src="http://api.map.baidu.com/api?v=3.0&ak=自己去百度地图官网申请密钥噢"></script></body>
</html>

4. 注意事项

散点的坐标不能重复，如果出现重复值，地图也会无法显示。

Vue + Echarts + Bmap相关推荐

vue + echarts + ( bmap) 百度地图实现公交、骑行、车辆轨迹图
vue + echarts + ( bmap) 百度地图实现公交.骑行.车辆轨迹图最终目标最终目标:个性化的实现公交路线图先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看码起 ...
Vue Echarts Bmap
目录结构运行结果代码链接 https://github.com/15657318057/Vue-Echarts-Bmap 代码实现创建vue项目 https://www.jianshu.com/ ...
vue+echarts+bmap绘制散点图
基于echarts的中国地图散点图在上篇博客中已经写过了,这篇博客主要写一下基于扩展的百度地图为地图绘制的方法 1.在main.js注册echarts 2.在页面引入bmap.js import 'e ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
【Vue】疫情实时数据及地图 Vue + Echarts + vxeTable
本期内容使用 Vue + Echarts + vxeTable 搭建前端展示界面,接口请求示例是腾讯肺炎疫情实时动态页面中的开放接口知识基础如何在 Vue 中引入 Echarts,点这里如何在 ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
Vue+ECharts的小示例
Vue+ECharts做数据可视化 1. Vue Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...
vue+echarts实现多个仪表盘图表
vue+echarts实现多个仪表盘图表根据echarts官网单个仪表盘修改成多个仪表盘,代码如下: <template><div class="app-containe ...
三维交互可视化平台（智慧海上牧场平台）学习开发Flask+Vue+Echarts+Mysql+websocket 实战（四）
前言三维交互可视化平台(智慧海上牧场平台)学习开发之Vue(一) 三维交互可视化平台(智慧海上牧场平台)学习开发之Flask+Vue+Mysql(二) 三维交互可视化平台(智慧海上牧场平台)学习开发 ...

Vue + Echarts + Bmap