From 0f88bfc6720c204c011746a7c09817cc8ea065ca Mon Sep 17 00:00:00 2001 From: jinna Date: Tue, 31 Jan 2023 10:20:19 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/home.vue | 92 ++++-------------------------------- 1 file changed, 10 insertions(+), 82 deletions(-) diff --git a/src/views/dashboard/home.vue b/src/views/dashboard/home.vue index 9fcacac..619e9fb 100644 --- a/src/views/dashboard/home.vue +++ b/src/views/dashboard/home.vue @@ -166,7 +166,7 @@
- +
@@ -450,6 +450,7 @@ export default { return b.count - a.count; }); }); + content1[0].map((item) => { this.pieData.push({ name: item.快递名称, @@ -460,9 +461,9 @@ export default { this.pieData = this.pieData.sort(function (a, b) { return b.y - a.y; }); - this.pieData[0].h = 15; - this.pieData[1].h = 10; - this.pieData[2].h = 5; + this.pieData[0].h = 10; + this.pieData[1].h = 5; + this.pieData[2].h = 2; this.shouData.map((item, index) => { if (index <= 10) { this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); @@ -691,14 +692,14 @@ export default { fontSize: 15, color: "#fff", }, - top: 12, + top: 0, }, legend: { data: ["到件量", "派件量"], textStyle: { color: "#fff", }, - top: 12, + top: 0, right: 10, itemHeight: 8, }, @@ -844,20 +845,14 @@ export default { legend: { enabled: false, // 关闭图例 }, + tooltip: { + enabled: false, + }, plotOptions: { pie: { allowPointSelect: true, cursor: "pointer", depth: 35, - // dataLabels: { - // enabled: true, - // formatter: function (params) { - // //this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息 - // return `${this.key}: - // ${((this.y / this.total) * 100).toFixed(2)}%
- // ${this.y}` - // }, - // }, dataLabels: { enabled: true, //是否显示饼图的线形tip distance: "11%", @@ -896,73 +891,6 @@ export default { ], }); }, - - //获取3d丙图的最高扇区的高度 - getHeight3D(series, height) { - series.sort((a, b) => { - return b.pieData.value - a.pieData.value; - }); - return (height * 25) / series[0].pieData.value; - }, - - getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) { - // 计算 - let midRatio = (startRatio + endRatio) / 2; - let startRadian = startRatio * Math.PI * 2; - let endRadian = endRatio * Math.PI * 2; - let midRadian = midRatio * Math.PI * 2; - // 如果只有一个扇形，则不实现选中效果。 - if (startRatio === 0 && endRatio === 1) { - isSelected = true; - } - // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） - k = typeof k !== "undefined" ? k : 1 / 3; - // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） - let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; - let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; - // 计算高亮效果的放大比例（未高亮，则比例为 1） - let hoverRate = isHovered ? 1.05 : 1; - // 返回曲面参数方程 - return { - u: { - min: -Math.PI, - max: Math.PI * 3, - step: Math.PI / 32, - }, - v: { - min: 0, - max: Math.PI * 2, - step: Math.PI / 20, - }, - x: (u, v) => { - if (u < startRadian) { - return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate; - } - if (u > endRadian) { - return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate; - } - return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; - }, - y: (u, v) => { - if (u < startRadian) { - return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate; - } - if (u > endRadian) { - return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate; - } - return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; - }, - z: (u, v) => { - if (u < -Math.PI * 0.5) { - return Math.sin(u); - } - if (u > Math.PI * 2.5) { - return Math.sin(u) * h * 0.1; - } - return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; - }, - }; - }, // 按照日月更换数据 changeData(val) { this.active = val; From f7526758cf72751bd8d2ae51f53670e57d1c938b Mon Sep 17 00:00:00 2001 From: jinna Date: Tue, 31 Jan 2023 11:03:24 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BC=98=E5=8C=963d=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/home.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/dashboard/home.vue b/src/views/dashboard/home.vue index 619e9fb..8dc4689 100644 --- a/src/views/dashboard/home.vue +++ b/src/views/dashboard/home.vue @@ -166,7 +166,7 @@
- +
@@ -352,9 +352,9 @@ export default { }, created() { this.getTime(); + this.readExcelFile("http://" + location.host + "/excel/wuliu.xlsx"); }, mounted() { - this.readExcelFile("http://" + location.host + "/excel/wuliu.xlsx"); queryWeath().then((res) => { this.temp = res.result.now.temp; this.weather = res.result.now.text; @@ -836,7 +836,7 @@ export default { beta: 0, }, backgroundColor: null, - marginTop: -45, + marginTop: -10, }, colors: ["#00bdff", "#52f4c1", "#00dbec"], title: { @@ -852,7 +852,7 @@ export default { pie: { allowPointSelect: true, cursor: "pointer", - depth: 35, + depth: 15, dataLabels: { enabled: true, //是否显示饼图的线形tip distance: "11%", From 2e611f00aa8fba6817a28f5d95beb1879b28b445 Mon Sep 17 00:00:00 2001 From: jinna Date: Tue, 31 Jan 2023 11:55:30 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/components/showmap.vue | 236 +++++++++++++++---------------- src/views/dashboard/home.vue | 10 +- 2 files changed, 120 insertions(+), 126 deletions(-) diff --git a/src/views/components/showmap.vue b/src/views/components/showmap.vue index f7ee790..6920429 100644 --- a/src/views/components/showmap.vue +++ b/src/views/components/showmap.vue @@ -11,6 +11,9 @@ export default { props: { mapData:{ type:Array, + }, + datas:{ + type:Array } }, data() { @@ -96,7 +99,7 @@ export default { 小店镇: [118.81007, 35.422484], 夏庄镇: [118.700674, 35.419525], }, - datas: [ + datas1: [ [{ name: "夏庄镇", value: 120057.34 }, { name: "莒县电子商务公共服务中心" }], [{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }], [{ name: "棋山镇", value: 131686.1 }, { name: "莒县电子商务公共服务中心" }], @@ -146,26 +149,15 @@ export default { }; }, mounted() { - // this.createCharts1(); - - this.myChart = this.$echarts.init(document.getElementById("chart_map")); - this.$echarts.registerMap("莒县", prefecture, {}); - this.render3DMap(); + this.createCharts1(); }, created() { - this.$nextTick(() =>{ - console.log(this.$parent.mapData) - console.log(JSON.parse(JSON.stringify(this.$parent.mapData))) - }) + // this.$nextTick(() =>{ + // }) }, watch:{ mapData:{ handler(newValue,oldValue){ - console.log(newValue) - // if(newValue.length !== 0){ - // this.render3DMap(); - - // } } } }, @@ -179,34 +171,33 @@ export default { var toCoord = this.geoCoordMap[dataItem[1].name]; if (fromCoord && toCoord) { res.push([ - // { - // coord: toCoord, - // fromName: dataItem[0].name, - // value: dataItem[0].value, - // // name: dataItem[0].name, - // visualMap: false, - - // }, - // { - // coord: fromCoord, - // toName: dataItem[1].name, - // visualMap: false, + { + coord: toCoord, + fromName: dataItem[0].name, + value: dataItem[0].value, + // name: dataItem[0].name, + visualMap: false, - // }, + }, { - fromName: dataItem[0].name, - toName: dataItem[1].name, - coords: [ - toCoord, - fromCoord, + coord: fromCoord, + toName: dataItem[1].name, + visualMap: false, - ] }, ]); } } return res; }; + this.mapData = this.mapData.sort(function (a, b) { + return b.value - a.value; + }); + this.mapData.map((item,index) =>{ + if(index > 2){ + this.mapData[index].label = {show:false} + } + }) var yMax = 0; for (var j = 0; j < this.mapData.length; j++) { if (yMax < this.mapData[j].value) { @@ -217,8 +208,6 @@ export default { var color = ['#000']; // 迁入地特殊显示//广东 [[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => { - console.log(item[1]) - console.log(convertData(this.datas)); series.push( { type: "lines", @@ -226,76 +215,77 @@ export default { tooltip: { trigger: "item", formatter(params) { - // console.log(params); }, }, effect: { show: true, - period: 6, // 箭头指向速度，值越小速度越快 - trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重 + period: 10, // 箭头指向速度，值越小速度越快 + trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重 symbol: "arrow", // 箭头图标 - symbolSize: 5, // 图标大小 + symbolSize: 6, // 图标大小 + trailColor: '#ffd419', + color: '#ffd419', //流动点颜色 }, lineStyle: { // normal: { - color: color[i], - width: 3, // 尾迹线条宽度 + color: "#ffd419", + width: 1, // 尾迹线条宽度 opacity: 0.6, // 尾迹线条透明度 curveness: 0.2, // 尾迹线条曲直度 // }, }, data: convertData(item[1]), }, - { - type: "effectScatter", - coordinateSystem: "geo", - zlevel: 2, - rippleEffect: { - // 涟漪特效 - period: 4, // 动画时间，值越小速度越快 - brushType: "stroke", // 波纹绘制方式 stroke, fill - scale: 3, // 波纹圆环最大限制，值越大波纹越大 - }, - tooltip: { - trigger: "item", - formatter(params) { - return params.data.name + ':' + params.data.value[2] - }, - }, - label: { - normal: { - show: true, - position: "right", // 显示位置 - offset: [5, 0], // 偏移设置 - formatter(params) { - // 圆环显示文字 - return ''; - }, - fontSize: 13, - }, - emphasis: { - show: true, - }, - }, - symbol: "circle", - symbolSize: 3, - // itemStyle: { - // normal: { - // // show: false, - // color: "#000", - // }, - // }, - itemStyle: { - color: "#000" - }, - data: item[1].map((dataItem) => { - return { - visualMap: false, - name: dataItem[0].name, - value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]), - }; - }), - }, + // { + // type: "effectScatter", + // coordinateSystem: "geo", + // zlevel: 2, + // rippleEffect: { + // // 涟漪特效 + // period: 4, // 动画时间，值越小速度越快 + // brushType: "stroke", // 波纹绘制方式 stroke, fill + // scale: 3, // 波纹圆环最大限制，值越大波纹越大 + // }, + // tooltip: { + // trigger: "item", + // formatter(params) { + // return params.data.name + ':' + params.data.value[2] + // }, + // }, + // label: { + // normal: { + // show: true, + // position: "right", // 显示位置 + // offset: [5, 0], // 偏移设置 + // formatter(params) { + // // 圆环显示文字 + // return ''; + // }, + // fontSize: 13, + // }, + // emphasis: { + // show: true, + // }, + // }, + // symbol: "circle", + // symbolSize: 3, + // // itemStyle: { + // // normal: { + // // // show: false, + // // color: "#000", + // // }, + // // }, + // itemStyle: { + // color: "#000" + // }, + // data: item[1].map((dataItem) => { + // return { + // visualMap: false, + // name: dataItem[0].name, + // value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]), + // }; + // }), + // }, { name: "数据名称", type: "map", @@ -306,32 +296,38 @@ export default { trigger: "item", formatter: "{b}
{c} (件)", }, - itemStyle: { - normal: { - borderWidth: 1, - borderColor: "#0e94eb", - label: { - show: false, - }, - }, - emphasis: { - // 也是选中样式 - borderWidth: 1, - borderColor: "#fff", - backgroundColor: "red", - label: { - show: true, - textStyle: { - color: "#fff", - }, - }, - }, + aspectScale:'1.5', + label: { + show: true, + textStyle:{ + color:'#fff' + } }, + // itemStyle: { + // normal: { + // borderWidth: 1, + // borderColor: "#0e94eb", + // // label: { + // // show: false, + // // }, + // }, + // emphasis: { + // // 也是选中样式 + // borderWidth: 1, + // borderColor: "#fff", + // backgroundColor: "red", + // label: { + // show: false, + // textStyle: { + // color: "#fff", + // }, + // }, + // }, + // }, data: this.mapData, } ); }); - console.log(series); this.myChart1 = this.$echarts.init(document.getElementById("chart_map")); // this.myCharts1 = this.$echarts.init(document.getElementById('gdMaps')); // this.$echarts.registerMap("china1", china1, {}); @@ -359,14 +355,14 @@ export default { text: ["高", "低"], orient: "horizontal", itemWidth: 15, - itemHeight: 200, + itemHeight: 150, right: 0, - bottom: 30, + bottom: 3, inRange: { - color: ["#75ddff", "#0e94eb"], + color: ["#1e73dd", "#04296f"], }, textStyle: { - color: "#000", + color: "#fff", }, }, geo: { @@ -377,6 +373,7 @@ export default { show: false, }, }, + aspectScale:'1.5', roam: true, // 是否允许缩放 itemStyle: { normal: { @@ -442,9 +439,6 @@ export default { } return res; }; - console.log(convertData(this.datas)) - // var color = ['#000']; - var seriesData = []; this.datas.map((item, i) => { seriesData.push( @@ -453,7 +447,6 @@ export default { } ); }) - console.log(seriesData) var yMax = 0; for (var j = 0; j < this.mapData.length; j++) { if (yMax < this.mapData[j].value) { @@ -468,7 +461,6 @@ export default { this.mapData[index].label = {show:false} } }) - console.log(this.mapData) let option = { // backgroundColor: '#000f1e', diff --git a/src/views/dashboard/home.vue b/src/views/dashboard/home.vue index 8dc4689..f5d7d38 100644 --- a/src/views/dashboard/home.vue +++ b/src/views/dashboard/home.vue @@ -166,8 +166,8 @@
- -
+ +
@@ -348,6 +348,7 @@ export default { 小店镇: [118.81007, 35.422484], 夏庄镇: [118.700674, 35.419525], }, + isMap:false }; }, created() { @@ -425,6 +426,7 @@ export default { } content1[2].map((item, index) => { this.mapData.push({ name: item.名称, value: item.收件量 }); + this.isMap = true this.datas.push([ { name: item.名称, value: item.收件量 }, { name: "莒县电子商务公共服务中心" }, @@ -474,13 +476,13 @@ export default { this.$nextTick(() => { this.createChart(); this.createPieChart(this.pieData); - this.render3DMap() + // this.render3DMap() this.run(); this.run1(); }); }, - render3DMap() { + render3DMap() { var convertData = (data) => { var res = []; for (var i = 0; i < data.length; i++) {