vue + echart 百度地图添加本地图片渲染_vue+echarts添加本地图片

import echarts from "echarts/lib/echarts";
//百度地图
import "echarts/extension/bmap/bmap";

<div id="main" class="echartMap"></div>

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        var option = {
            backgroundColor: 'transparent',
            title: {
                // text: '',
                // subtext: '',
                // sublink: '',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params, ticket, callback) {
                    // console.log("params:", params)
                    if (params.value !== undefined){
                        return (
                            "基站名称: " + params.name + "<br />" +
                            "BCCH: " + params.value[3] + "<br />"+
                            "TCH: " + params.value[4] + "<br />"+
                            "TCH1: " + params.value[5] + "<br />"+
                            "BSIC: " + params.value[6] + "<br />"+
                            "公里标: " + params.value[2] + "<br />"+
                            "纬度: " + params.value[1] + "<br />" +
                            "经度: " + params.value[0] + "<br />"
                        )
                    }
                }
            },
            geo: { //地图配置
				map: 'bmap',
                zoom: 12,
                roam: true,
                center: [ 88.36715698242188,  39.135459756570164],
                label:{
                    show: true,
                    offset: [1, 1000],
                    color: "#fff"
                },
                itemStyle: {
                    color: '#1A3F57', //地图背景色
                    borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    itemStyle: {
                        color: '#87CEEB' //悬浮背景
                    },
                },
                backgroundColor: "#013954",
			},
            bmap: {
                center: [ 88.36715698242188,  39.135459756570164],
                zoom: 12,
                roam: true,
                mapStyle: {
                    // 定义bmap的样式
                    //地图不同类型的颜色设置，以及是否展示
                    // styleJson: []
                }
            },
            // 散点图配置
            series: [
               
                {
                    // 基站塔图
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    rippleEffect : { //气泡效
						brushType : 'stroke'
					},
                    hoverAnimation: true, //气泡效果end
                    zlevel: 6,
                    symbol: 'image://' + require('../../assets/images/map/bas.png'),
#### 总结一下



面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。



为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)



![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)



**前端面试题汇总**



![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)

**JavaScript**



![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)



**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)



**linux**



![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)



**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。