通过echart百度地图实现:
1、地图打点,点样式包括自带的sybmol,图片方式显示;
2、地图点的点击事件
3、街道区域色块功能;
4、判断当前点击的点位是否在坐标数组范围内的功能。
// 通过VUE组件方式封装初始化echarts实例
//点位整体监控地图
Vue.component("map-pointmonitor", {
template: '#map-pointmonitor',
props: {
id: {
type: String,
default: 'pointmonitormap'
},
data: {
type: Object,
default: {}
},
streetdata: {
type: Object,
default: {}
}
},
data() {
return {
chart: null,
currentIndex: 0
}
},
mounted() {
setTimeout(this.initChart(), 100);
},
watch: {
data: {
handler(val, oldval) {
this.initChart();
},
deep: true
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
var chartData = {
geoCoordMap: this.data.geoCoordMap,
data: this.data.data,
}
// 基于准备好的dom,初始化echarts实例
var startPoint = {
x: 117.975388,
y: 24.53291
};
var styleJson = {
styleJson: [
{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#133F58'
}
},
{
'featureType': 'scenicspotslabel',
'elementType': 'all',
'stylers': {
'color': '#000'
}
},
{
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'color': '#043448'
}
},
{
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#005D62'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#00303E',
'lightness': -70
}
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
"visibility": "off"
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
'featureType': 'subway',
'elementType': 'all',
'stylers': {
"visibility": "off"
}
},
{
'featureType': 'building',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'all',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#857f7f'
}
},
{
'featureType': 'all',
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#0000'
}
},
{
'featureType': 'building',
'elementType': 'geometry',
'stylers': {
'color': '#022338'
}
},
{
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
"visibility": "off"
}
},
{
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#465b6c'
}
},
{
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
//'color': '#022338'
"visibility": "off"
}
},
{
"featureType": "poilabel",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "district",
"elementType": "labels.text.stroke",
"stylers": {
"visibility": "on"
}
}]
};
var data = chartData.data;
var color = [
{ name: 'gr', color: '#00E400' },
{ name: 'yel', color: '#FFFF00' },
{ name: 'or', color: '#FF7E00' },
{ name: 'red', color: '#FF0000' },
{ name: 'pu', color: '#99004C' },
{ name: 'hh', color: '#7E0023' },
{ name: 'mo', color: '#5CC0D4' }//监控点位颜色
];
var series = [];
for (var i = 0; i < data.length; i++) {
var colorcss = "";
switch (true) {
case data[i].IsOnline == "0":
colorcss = "red";
break;
default:
colorcss = "mo";
break;
}
var self = this;
series.push({
type: 'effectScatter',
coordinateSystem: 'bmap',
data: [{
name: data[i].PsAlias,
value: data[i].Geocoordmap.concat([data[i].Value]),
}],
symbol: ["circle"],
symbolSize: function (val) {
return 15;
},
showEffectOn: 'render',
rippleEffect: {
period: 5,
brushType: 'stroke',
scale: 4
},
tooltip: {
//show: true,
alwaysShowContent: true,
enterable: true, //鼠标可以进入
backgroundColor: 'rgba(255,255,255,0.0)',//通过设置rgba调节背景颜色与透明度
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
formatter: function (params) {
var infos = data.filter((item, index) => {
if (item.PsAlias === params.name) {
self.currentIndex = index;
return true;
}
})[0];
if (infos != undefined) {
self.$parent.setQualityData && self.$parent.setQualityData(infos.Qualitys, infos.PsAlias);
var bgClass = "";
if (infos.IsOnline == "0") {
bgClass = "mapbox-re";
}
else
bgClass = "mapbox-bl";
var color1 = [
{ name: 'gr', color: '#00E400' },
{ name: 'yel', color: '#FFFF00' },
{ name: 'or', color: '#FF7E00' },
{ name: 'red', color: '#FF0000' },
{ name: 'pu', color: '#99004C' },
{ name: 'hh', color: '#7E0023' }
];
var colorcss1 = "";
switch (true) {
case infos.IsOnline == "0":
colorcss1 = color.filter(item => item.name === "red")[0].color;
break;
default:
colorcss1 = color.filter(item => item.name === "gr")[0].color;
break;
}
var tipHtml = '<div class="mapbox-pop ' + bgClass + '" onclick="window.location.href=\'./PointMonitor/SingleEnterpriseMonitor?PSCode=' + infos.PSCode + '\'">'
+ '<h6 style="color:' + colorcss1 + ';"> ' + (infos.PsAlias.length > 10 ? (infos.PsAlias.substring(0, 10) + '...') : infos.PsAlias) + '</h6>'
+ '<div class="gis-data">'
+ '<p>关注程度:' + infos.AttentionDegreeName + '</p>'
+ '<p>点位数:' + infos.PointCount + '</p>'
+ '<br />'
+ '<p>监测设备:' + (infos.EquipmentCount || 0) + '</p>'
+ '<p>是否在线:' + (infos.IsOnline == "1" ? "是" : "否") + '</p>'
+ '</div>'
+ '<div class="gis-data" style="border-bottom: 0; padding-top:0;">'
+ '<p>更新时间:' + (infos.ProductionDateStr || "") + '</p>'
+ '</div>'
+ '</div >';
//tipHtml += params.name + '<br>' + params.value + "单位";
return tipHtml;
}
return "";
},
//triggerOn: 'click',
},
itemStyle: {
normal: {
color: color.filter(item => item.name === colorcss)[0].color,
//shadowBlur: 0,
//shadowColor: '#333'
}
},
zlevel: 2
})
}
//添加街道图标
window.currenturl = window.location.href.split(':')[0] + '://' + document.domain + ":" + window.location.port;
var level_hc = 1;//海沧响应级别,0为正常
var level_sy = 1;//嵩屿响应级别,0为正常
var level_xy = 1;//新阳响应级别,0为正常
var level_df = 1;//东孚响应级别,0为正常
for (var i = 0; i < this.streetdata.length; i++) {
var imgColorIndex = 1;
var imgColor = ['#5fd9ff', '#5fb3ff', '#009eff', '#0064ff'];
switch (true) {
case this.streetdata[i].ResponseLevel === 0:
imgColorIndex = 1;
break;
case this.streetdata[i].ResponseLevel === 1:
imgColorIndex = 4;
break;
case this.streetdata[i].ResponseLevel === 2:
imgColorIndex = 3;
break;
case this.streetdata[i].ResponseLevel === 3:
imgColorIndex = 2;
break;
}
var bgimg = "";
var Geocoordmap = [];
switch (true) {
case this.streetdata[i].STREET === "海沧街道":
bgimg = "hc-";
Geocoordmap = [117.97599792480469, 24.458634970231167];
level_hc = imgColorIndex;
break;
case this.streetdata[i].STREET === "嵩屿街道":
bgimg = "sy-";
Geocoordmap = [118.06406021118164, 24.492538078008447];
level_sy = imgColorIndex;
break;
case this.streetdata[i].STREET === "东孚街道":
bgimg = "df-";
Geocoordmap = [117.899294, 24.603363];
level_df = imgColorIndex;
break;
default:
bgimg = "xy-";
Geocoordmap = [117.98818588256836, 24.540096385782515];
level_xy = imgColorIndex;
break;
}
if (this.streetdata)
series.push({
name: this.streetdata[i].STREET,
type: 'effectScatter',
coordinateSystem: 'bmap',
zlevel: 4,
rippleEffect: {
brushType: 'fill',
scale: 0.7
},
showEffectOn: false,
symbolOffset: [0, 0],
symbol: 'image://' + window.currenturl + '/images/' + bgimg + imgColorIndex + ".png",
symbolSize: function (val) {
return [110, 40];
},
label: {
normal: {
show: true,
enterable: true, //鼠标可以进入
clickable: true,
formatter: function (params) {
//var infos = data.filter(item => item.PointName === params.name)[0];
//触发右侧数据质量面板刷新
var info = " \n\n";//'{color1|' + params.name + '}';
return info;
},
//position: [-23, -80],
//show: true,
textStyle: {
color: imgColor[imgColorIndex - 1],
size: '16'
},
backgroundColor: {//内容背景图
//image: '/images/' + bgimg + imgColorIndex + ".png"
},
//自定义控件(由于label无法解析html)
rich: {
//设置控件引用名
color1: {
backgroundColor: "rgba(0, 23, 11, 0.1)"
}
},
height: 50,
width: 140,
//lineHeight: 12,
padding: [0, 0]
}
},
tooltip: {
show: false,
},
itemStyle: {
normal: {
color: color[0].color
}
},
data: [{
name: this.streetdata[i].STREET,
value: Geocoordmap.concat([this.streetdata[i].ResponseLevel])
}]
});
}
var self = this;
var option = {
tooltip: {
enterable: true, //鼠标可以进入
alwaysShowContent: false,
trigger: 'item'
},
bmap: {
center: [startPoint.x, startPoint.y],
zoom: 13,
roam: true,
mapStyle: styleJson,
series: [{
type: 'map',
mapType: 'china',
coordinateSystem: 'bmap'
}]
},
series: series
};
this.chart.setOption(option, true);
//轮播tooltip开始
var func = function () {
self.chart.dispatchAction({
type: 'showTip',
seriesIndex: self.currentIndex,
dataIndex: 0
});
self.currentIndex++;
if (self.currentIndex >= data.length) {
self.currentIndex = 0;
}
};
func();
var mTime = setInterval(func, 10000);
鼠标移入停止轮播
//var selfTime = this.mTime;
this.chart.on("mousemove", function (e) {
clearInterval(mTime);
self.chart.dispatchAction({
type: 'showTip',
seriesIndex: self.currentIndex,
dataIndex: 0
});
})
鼠标移出恢复轮播
this.chart.on("mouseout", function () {
clearInterval(mTime);
func();
mTime = setInterval(func, 10000);
})
var map = this.chart.getModel().getComponent('bmap').getBMap();
//map.enableScrollWheelZoom();
var colors = ["#0da192", "#ff8294", "#e82c48", "#94051a"];
var point_hc = "117.97101974487306,24.489413749714622;117.96200752258301,24.48222750013779;117.96209335327148,24.480274644002066;117.96063423156738,24.475978253828025;117.95780181884764,24.473400349324063;117.96046257019042,24.46871311496997;117.95840263366698,24.464494454850758;117.96183586120607,24.46371320598545;117.95951843261719,24.45707239496206;117.95951843261719,24.45707239496206;117.98440933227539,24.451915759061432;117.98432350158691,24.452618949111944;117.98243522644043,24.453009608555394;117.98260688781738,24.454494103393856;117.99007415771483,24.452931476763613;117.99015998840332,24.45480662639424;117.99290657043457,24.454728495716825;117.99118995666502,24.450274967015854;118.02011489868163,24.44464923209822;118.0206298828125,24.452853344923373;118.01084518432617,24.453478398288706;118.00595283508301,24.456291100059076;118.01161766052245,24.46230694581464;118.01299095153807,24.466916295532087;118.02595138549805,24.467463156336283;118.02243232727051,24.488866984284154;118.01831245422362,24.494490743779757;118.01359176635741,24.492147541216028;118.00466537475586,24.49097592356269;117.98904418945312,24.492459970746975;117.9862117767334,24.492538078008447;117.97719955444336,24.490116730347225;117.97170639038087,24.489569967972496";
var point_sy = "118.02002906799316,24.444805505903414;118.02114486694336,24.444258546737565;118.02183151245117,24.443945997577167;118.02234649658205,24.44300834544613;118.02406311035155,24.442305101770724;118.02474975585936,24.44152371530793;118.02595138549805,24.44136743743417;118.04208755493165,24.44097674190221;118.04603576660158,24.440507905665605;118.049898147583,24.439882787971314;118.05187225341795,24.439882787971314;118.0521297454834,24.444258546737565;118.05238723754881,24.44574314466583;118.05307388305663,24.44761840126476;118.05367469787596,24.449415495989253;118.05564880371092,24.453244003640076;118.05719375610353,24.455666060647953;118.05891036987303,24.457150524185852;118.06028366088866,24.45941625059706;118.06285858154295,24.46254132360022;118.0645751953125,24.46402570611317;118.06637763977052,24.470275545811756;118.06843757629395,24.480274644002066;118.06989669799805,24.484648999654024;118.07238578796387,24.494334531633775;118.07453155517578,24.500504763845026;118.07856559753418,24.51417192132151;118.08096885681152,24.521122076915518;118.08320045471191,24.527525250675097;118.08431625366211,24.530180129404926;118.08568954467773,24.53205412764961;118.0891227722168,24.535723959844557;118.08955192565918,24.536348601447635;118.08543205261229,24.537207478576015;118.08217048645021,24.53806634982697;118.07744979858397,24.538690979772323;118.07573318481445,24.5387690582969;118.0744457244873,24.539315606608813;118.07272911071776,24.539549840870986;118.07169914245605,24.540096385782515;118.04775238037108,24.542516770349096;118.02886962890624,24.54407828400275;118.02844047546387,24.54407828400275;118.02852630615234,24.538300586420796;118.02878379821776,24.535958200810004;118.02861213684082,24.534786991611373;118.02861213684082,24.53377193479942;118.02861213684082,24.532678787514772;118.0290412902832,24.531741796551437;118.02947044372557,24.53142946467622;118.03024291992189,24.530804798594634;118.03067207336424,24.5304729434746;118.03142309188843,24.530511985298958;118.03221702575685,24.53045342255786;118.03324699401855,24.530394859789457;118.03449153900146,24.53023869227349;118.03517818450928,24.53023869227349;118.03597211837769,24.530199650364157;118.0382466316223,24.53002396162187;118.03957700729369,24.52990683565709;118.04017782211302,24.52990683565709;118.04090738296507,24.529809230602982;118.04176568984987,24.529750667534095;118.04232358932494,24.529731146505057;118.04341793060303,24.529106471973414;118.0442762374878,24.52859892162796;118.04582118988036,24.52773998560015;118.04584264755249,24.527486207922003;118.0459713935852,24.527290993974404;118.04629325866699,24.52688104369657;118.04674386978148,24.526178268677906;118.04725885391235,24.52561214149698;118.04738759994507,24.52526075092854;118.0479884147644,24.522605768187677;118.04743051528929,24.520048342037143;118.04534912109376,24.516885651426502;118.04118633270262,24.511790037964914;118.03597211837769,24.50554226053975;118.0351996421814,24.504995565237653;118.0181622505188,24.494490743779757;118.02243232727051,24.48876934735005;118.02410602569579,24.478517047568037;118.02590847015381,24.46750221773141;118.01303386688231,24.466955357096865;118.01153182983398,24.46195537831843;118.00590991973878,24.456291100059076;118.01101684570311,24.453478398288706;118.02054405212402,24.452814278985077;118.02015781402586,24.445118052932575";
var point_xy = "118.02841901779173,24.543941652333874;118.02871942520142,24.532795910893455;118.02893400192261,24.53160515145164;118.0306077003479,24.530570548012715;118.0422592163086,24.529750667534095;118.04564952850342,24.52781807093638;118.04734468460083,24.525416924635913;118.0479884147644,24.522722900962684;118.04740905761719,24.520067864571413;118.04528474807739,24.516846605365824;118.03590774536131,24.505405586937158;118.01833391189575,24.494588376272457;118.01350593566895,24.492147541216028;118.00464391708374,24.490956396509336;117.99496650695801,24.491893691650642;117.98904418945312,24.492499024383772;117.98625469207764,24.492557604816238;117.97717809677123,24.490155784711607;117.9716420173645,24.489550440700867;117.9709768295288,24.48943327700746;117.96192169189453,24.48222750013779;117.96147108078004,24.484492775285144;117.96215772628786,24.48597689895725;117.95855283737183,24.501246733399086;117.95542001724242,24.501324835202677;117.95434713363647,24.503980267653933;117.9521369934082,24.505717983524733;117.94917583465575,24.506928512967804;117.94711589813231,24.508334274463643;117.94561386108398,24.510247646788454;117.94447660446167,24.51233670371112;117.94295310974121,24.51303955617586;117.93990612030028,24.51253194090125;117.93741703033446,24.513430028068537;117.93567895889281,24.515636171465214;117.93376922607422,24.5229181220116;117.93136596679686,24.52651013514909;117.92329788208008,24.53166371365548;117.91883468627928,24.53166371365548;117.9217529296875,24.53525547660224;117.92484283447264,24.537597875327783;117.92673110961913,24.540096385782515;117.93102264404297,24.53525547660224;117.93394088745117,24.530102045537678;117.94166564941406,24.526041617523095;117.95557022094727,24.53463082955918;117.96346664428711,24.53666092108343;117.97170639038087,24.5374417167728;117.98131942749022,24.539784074695962;117.98698425292969,24.552588191822093;117.99591064453124,24.550089930124585;117.99985885620116,24.547435472550017;118.02749633789061,24.544156359175304";
var point_df = "117.98698425292969,24.552588191822093;117.98114776611328,24.539315606608813;117.97162055969237,24.537363637422438;117.96338081359863,24.536426681429443;117.9557418823242,24.53486507256461;117.94149398803711,24.526041617523095;117.93394088745117,24.530102045537678;117.93119430541992,24.535177395891846;117.92673110961913,24.540018308083738;117.92492866516112,24.53751979607458;117.9214096069336,24.53533355726405;117.91866302490234,24.53166371365548;117.91342735290527,24.53236645797072;117.91205406188965,24.533303444271642;117.9111957550049,24.536973239942053;117.91128158569336,24.540018308083738;117.91274070739746,24.543844058193574;117.91325569152832,24.54665473904422;117.90982246398924,24.550089930124585;117.90879249572754,24.55313467993515;117.90827751159668,24.555242540350456;117.91068077087402,24.562034294001684;117.91351318359375,24.56570324922706;117.91368484497069,24.568201199845927;117.9107666015625,24.57272860844354;117.90784835815428,24.57483613940755;117.90209770202637,24.577880288213787;117.89806365966798,24.58076825844618;117.89437294006348,24.58467081513412;117.88750648498537,24.588104964425213;117.8858757019043,24.59029028311878;117.8912830352783,24.59380232253615;117.8931713104248,24.597626431177872;117.89265632629393,24.60386962275355;117.89360046386719,24.60597662960702;117.89265632629393,24.609176090679338;117.89239883422852,24.6115951410667;117.89368629455566,24.61292169722315;117.89548873901367,24.613545954075356;117.90166854858398,24.61214137177622;117.90947914123535,24.613311858120912;117.91849136352539,24.61276563252323;117.9206371307373,24.614248239309614;117.92587280273438,24.624782044540563;117.93016433715819,24.633052410290944;117.93196678161621,24.633988643624463;117.938232421875,24.637655489967766;117.94183731079102,24.63890375352977;117.94355392456055,24.641400243234045;117.95110702514647,24.63671928411111;117.95325279235841,24.63367656662607;117.95445442199706,24.629463450862463;117.95333862304688,24.625484266666636;117.9503345489502,24.62205114321693;117.94836044311523,24.61541870593642;117.94569969177246,24.610736773703568;117.94449806213377,24.60355747057237;117.94544219970703,24.594582762359718;117.95042037963866,24.586231803759645;117.960205078125,24.579207201723747;117.9737663269043,24.57959746772822;117.98011779785155,24.574758083337347;117.98827171325684,24.565547125660405;117.98715591430664,24.552978540717266";
getBoundary("海沧区"); //行政区划覆盖遮罩
function getBoundary(city) {
var bdary = new BMap.Boundary();
bdary.get(city, function (rs) {//获取行政区域
//map.clearOverlays();//清除地图覆盖物
//思路:利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
//1.获取选中行政区划边框点的集合rs.boundaries[0]
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return;
}
var ply_hc = new BMap.Polygon(point_hc, { strokeWeight: 2, strokeColor: colors[level_hc - 1], strokeOpacity: 0, fillColor: colors[level_hc - 1], fillOpacity: "0.4" }) //建立多边形覆盖物
var ply_sy = new BMap.Polygon(point_sy, { strokeWeight: 2, strokeColor: colors[level_sy - 1], strokeOpacity: 0, fillColor: colors[level_sy - 1], fillOpacity: "0.4" }) //建立多边形覆盖物
var ply_xy = new BMap.Polygon(point_xy, { strokeWeight: 2, strokeColor: colors[level_xy - 1], strokeOpacity: 0, fillColor: colors[level_xy - 1], fillOpacity: "0.4" }) //建立多边形覆盖物
var ply_df = new BMap.Polygon(point_df, { strokeWeight: 2, strokeColor: colors[level_df - 1], strokeOpacity: 0, fillColor: colors[level_df - 1], fillOpacity: "0.4" }) //建立多边形覆盖物
self.streetdata && self.streetdata.length > 0 && self.streetdata.forEach(function (item) {
if (item.STREET == "海沧街道") {
map.addOverlay(ply_hc);
}
else if (item.STREET == "嵩屿街道") {
map.addOverlay(ply_sy);
}
else if (item.STREET == "新阳街道") {
map.addOverlay(ply_xy);
}
else if (item.STREET == "东孚街道") {
map.addOverlay(ply_df);
}
})
map.addEventListener("click", function (e) {
var point = e.point;
if (BMapLib.GeoUtils.isPointInPolygon(point, ply_hc)) {
window.open("/Enterprise/PonitMonitor?Street=海沧街道");
console.log("海沧街道");
} else if (BMapLib.GeoUtils.isPointInPolygon(point, ply_sy)) {
window.open("/Enterprise/PonitMonitor?Street=嵩屿街道");
console.log("嵩屿街道");
}
else if (BMapLib.GeoUtils.isPointInPolygon(point, ply_xy)) {
window.open("/Enterprise/PonitMonitor?Street=新阳街道");
console.log("新阳街道");
}
else if (BMapLib.GeoUtils.isPointInPolygon(point, ply_df)) {
window.open("/Enterprise/PonitMonitor?Street=东孚街道");
console.log("东孚街道");
} else {
console.log("区域外");
}
})
//map.setViewport(ply.getPath());//调整视野
//map.centerAndZoom(new BMap.Point(117.975388, 24.53291), 13);
});
}
//点击echart地图触发事件
function eConsole(param) {
//var mes = '【' + param.type + '】';
console.log(param);
var Streets = ["海沧街道", "东孚街道", "嵩屿街道", "新阳街道"];
//debugger;
if (Streets.indexOf(param.seriesName) >= 0) {
var Street = self.streetdata.filter(function (item) {
return item.STREET == param.seriesName
});
if (Street.length > 0) {
//self.$parent.setStreet && self.$parent.setStreet(Street);
//window.location.href = "./PointMonitor/SingleEnterpriseMonitor?PSCode=" + data[param.seriesIndex].PSCode;
window.location.href = "/Enterprise/PonitMonitor?Street=" + Street[0].STREET;
}
} else {
if (param && param.seriesIndex >= 0)
window.location.href = "./PointMonitor/SingleEnterpriseMonitor?PSCode=" + data[param.seriesIndex].PSCode;
}
}
this.chart.on("click", eConsole);
}
}
})
组件使用,放在需要显示的地方。
订单模板和引用js
定义vue