|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="echartDemo">
|
|
|
- <div class="wrap" style="position: relative;">
|
|
|
+ <div class="wrap">
|
|
|
<div id="map" style="width: 100%; height: 800px;">
|
|
|
<div :style="{ height: '400px', width: '100%' }" ref="myEchart"></div>
|
|
|
</div>
|
|
|
@@ -37,6 +37,10 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ wrap: null, //包裹框
|
|
|
+ drawBar: null, // 柱状图
|
|
|
+ barWrap: null,
|
|
|
+ shaDe: null, // 遮挡层
|
|
|
myChart: null,
|
|
|
// 地区坐标
|
|
|
areaItems: {
|
|
|
@@ -77,16 +81,17 @@ export default {
|
|
|
let throttledRenderEachCity = this.throttle(this.renderItems, 0);
|
|
|
this.myChart.on("geoRoam", throttledRenderEachCity);
|
|
|
this.renderItems();
|
|
|
+ this.itemonClick();
|
|
|
},
|
|
|
// 缩放和拖拽
|
|
|
throttle(fn, delay, debounce) {
|
|
|
- var currCall;
|
|
|
- var lastCall = 0;
|
|
|
- var lastExec = 0;
|
|
|
- var timer = null;
|
|
|
- var diff;
|
|
|
- var scope;
|
|
|
- var args;
|
|
|
+ let currCall;
|
|
|
+ let lastCall = 0;
|
|
|
+ let lastExec = 0;
|
|
|
+ let timer = null;
|
|
|
+ let diff;
|
|
|
+ let scope;
|
|
|
+ let args;
|
|
|
delay = delay || 0;
|
|
|
function exec() {
|
|
|
lastExec = new Date().getTime();
|
|
|
@@ -94,7 +99,7 @@ export default {
|
|
|
fn.apply(scope, args || []);
|
|
|
}
|
|
|
|
|
|
- var cb = function() {
|
|
|
+ let cb = function() {
|
|
|
currCall = new Date().getTime();
|
|
|
scope = this;
|
|
|
args = arguments;
|
|
|
@@ -119,7 +124,7 @@ export default {
|
|
|
},
|
|
|
// 填充 地图点位
|
|
|
renderItems() {
|
|
|
- var option = Object.assign(this.option, {
|
|
|
+ let option = Object.assign(this.option, {
|
|
|
xAxis: [],
|
|
|
yAxis: [],
|
|
|
grid: [],
|
|
|
@@ -218,9 +223,133 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
this.myChart.setOption(option);
|
|
|
+ },
|
|
|
+ // 点击显示柱状图
|
|
|
+ itemonClick() {
|
|
|
+ this.myChart.on("click", e => {
|
|
|
+ console.log(e, e.componentSubType, "===============");
|
|
|
+ // console.log(params);
|
|
|
+ if (e.componentSubType == "bar") {
|
|
|
+ this.barWrap = document.createElement("div");
|
|
|
+ this.drawBar = document.createElement("div");
|
|
|
+ this.wrap = document.getElementsByClassName("wrap")[0];
|
|
|
+ // 先清除所有柱状图
|
|
|
+ // $(".tongJiTu").remove();
|
|
|
+ // 创建遮挡层
|
|
|
+ this.creatWrap();
|
|
|
+ // 创建柱状图容器
|
|
|
+ this.barWrap.id = "bar-wrap";
|
|
|
+ this.barWrap.className = "bar-wrap";
|
|
|
+ this.drawBar.className = "zhuzhuang";
|
|
|
+ let divX = this.getMousePos()["x"];
|
|
|
+ let divY = this.getMousePos()["y"];
|
|
|
+ this.barWrap.setAttribute(
|
|
|
+ "style",
|
|
|
+ `width: 250px; height: 180px;border: 1px solid #ccc;position:absolute;top: ${divY}px;left:${divX}px`
|
|
|
+ );
|
|
|
+ this.drawBar.setAttribute("style", `width: 100%; height: 100%`);
|
|
|
+ console.log(this.wrap, this.drawBar, "wrapwrap");
|
|
|
+ // 创建柱状图
|
|
|
+ this.wrap.appendChild(this.barWrap);
|
|
|
+ this.barWrap.appendChild(this.drawBar);
|
|
|
+ this.zhuZhuangTu(e);
|
|
|
+ // // 点击遮挡层消失
|
|
|
+ this.clearWrap();
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取横纵坐标
|
|
|
+ getMousePos(e) {
|
|
|
+ console.log(e, "eeeeeeeee", event);
|
|
|
+ e = event || window.event;
|
|
|
+ let x = e.clientX;
|
|
|
+ let y = e.clientY;
|
|
|
+ console.log(x, y);
|
|
|
+ return { x, y };
|
|
|
+ },
|
|
|
+ // 生成柱状图
|
|
|
+ zhuZhuangTu(e) {
|
|
|
+ let index = e.seriesIndex;
|
|
|
+ let bar = echarts.init(this.drawBar);
|
|
|
+ let xTitle = this.selfAreaData[index].DateItems.map(i => i.title);
|
|
|
+ let yValue = this.selfAreaData[index].DateItems.map(i => i.value);
|
|
|
+ let option = {
|
|
|
+ backgroundColor: "rgba(255,255,255,.3)",
|
|
|
+ legend: {
|
|
|
+ data: xTitle
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: xTitle
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ type: "value"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: function(params) {
|
|
|
+ let colorList = ["#F75D5D", "#59ED4F", "#4C91E7"];
|
|
|
+ return colorList[params.dataIndex];
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ textStyle: {
|
|
|
+ color: "#000"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: yValue
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ bar.setOption(option);
|
|
|
+ },
|
|
|
+ // 生成遮挡层
|
|
|
+ creatWrap() {
|
|
|
+ this.shaDe = document.createElement("div");
|
|
|
+ console.log(this.shaDe);
|
|
|
+ this.shaDe.className = "shaDe";
|
|
|
+ this.wrap.appendChild(this.shaDe);
|
|
|
+ },
|
|
|
+ // 去掉遮挡层
|
|
|
+ clearWrap() {
|
|
|
+ console.log(this.shaDe);
|
|
|
+ this.shaDe.addEventListener(
|
|
|
+ "click",
|
|
|
+ () => {
|
|
|
+ console.log("remove");
|
|
|
+ this.shaDe.remove();
|
|
|
+ this.barWrap.remove();
|
|
|
+ this.drawBar.remove();
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style></style>
|
|
|
+<style lang="less">
|
|
|
+.shaDe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+</style>
|
xiaoyang