|
|
|
|
@ -165,7 +165,9 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="center_bottom"> |
|
|
|
|
<div class="charts_box"></div> |
|
|
|
|
<div class="charts_box map_box"> |
|
|
|
|
<ShowMap :mapData="mapData"></ShowMap> |
|
|
|
|
</div> |
|
|
|
|
<div class="charts_box"> |
|
|
|
|
<div id="trendChart" class="trend_box"></div> |
|
|
|
|
</div> |
|
|
|
|
@ -195,7 +197,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="pie_box" id="pieChart"></div> |
|
|
|
|
<!-- <div class="pie_bg"></div> --> |
|
|
|
|
<div class="pie_bg"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_cen"> |
|
|
|
|
<div class="top_title"> |
|
|
|
|
@ -220,6 +222,16 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import Highcharts from "highcharts/highstock"; |
|
|
|
|
import HighchartsMore from "highcharts/highcharts-more"; |
|
|
|
|
import HighchartsDrilldown from "highcharts/modules/drilldown"; |
|
|
|
|
import Highcharts3D from "highcharts/highcharts-3d"; |
|
|
|
|
import Highmaps from "highcharts/modules/map"; |
|
|
|
|
|
|
|
|
|
HighchartsMore(Highcharts); |
|
|
|
|
HighchartsDrilldown(Highcharts); |
|
|
|
|
Highcharts3D(Highcharts); |
|
|
|
|
Highmaps(Highcharts); |
|
|
|
|
import 'echarts-gl' |
|
|
|
|
import axios from "axios"; |
|
|
|
|
import * as XLSX from "xlsx/xlsx.mjs"; |
|
|
|
|
@ -227,6 +239,7 @@ import Swiper from "swiper"; |
|
|
|
|
import "swiper/css/swiper.min.css"; |
|
|
|
|
import { queryWeath } from "@/api/base"; |
|
|
|
|
import PathMap from "../components/pathMap"; |
|
|
|
|
import ShowMap from "../components/showmap"; |
|
|
|
|
import CarMile from "../components/carMile"; |
|
|
|
|
import CarWarn from "../components/carWarn"; |
|
|
|
|
export default { |
|
|
|
|
@ -234,6 +247,7 @@ export default { |
|
|
|
|
PathMap, |
|
|
|
|
CarMile, |
|
|
|
|
CarWarn, |
|
|
|
|
ShowMap |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
@ -542,177 +556,137 @@ export default { |
|
|
|
|
}; |
|
|
|
|
this.trendCharts.setOption(option); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
createPieChart() { |
|
|
|
|
this.pieChart = this.$echarts.init(document.getElementById("pieChart")); |
|
|
|
|
window.addEventListener("resize", () => { |
|
|
|
|
this.pieChart.resize(); |
|
|
|
|
var each = Highcharts.each, |
|
|
|
|
round = Math.round, |
|
|
|
|
cos = Math.cos, |
|
|
|
|
sin = Math.sin, |
|
|
|
|
deg2rad = Math.deg2rad; |
|
|
|
|
Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, "translate", function (proceed) { |
|
|
|
|
proceed.apply(this, [].slice.call(arguments, 1)); |
|
|
|
|
// Do not do this if the chart is not 3D |
|
|
|
|
if (!this.chart.is3d()) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
var series = this, |
|
|
|
|
chart = series.chart, |
|
|
|
|
options = chart.options, |
|
|
|
|
seriesOptions = series.options, |
|
|
|
|
depth = seriesOptions.depth || 0, |
|
|
|
|
options3d = options.chart.options3d, |
|
|
|
|
alpha = options3d.alpha, |
|
|
|
|
beta = options3d.beta, |
|
|
|
|
z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth; |
|
|
|
|
z += depth / 2; |
|
|
|
|
if (seriesOptions.grouping !== false) { |
|
|
|
|
z = 0; |
|
|
|
|
} |
|
|
|
|
each(series.data, function (point) { |
|
|
|
|
var shapeArgs = point.shapeArgs, |
|
|
|
|
angle; |
|
|
|
|
point.shapeType = "arc3d"; |
|
|
|
|
var ran = point.options.h; |
|
|
|
|
shapeArgs.z = z; |
|
|
|
|
shapeArgs.depth = depth * 0.75 + ran; |
|
|
|
|
shapeArgs.alpha = alpha; |
|
|
|
|
shapeArgs.beta = beta; |
|
|
|
|
shapeArgs.center = series.center; |
|
|
|
|
shapeArgs.ran = ran; |
|
|
|
|
angle = (shapeArgs.end + shapeArgs.start) / 2; |
|
|
|
|
point.slicedTranslation = { |
|
|
|
|
translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)), |
|
|
|
|
translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)), |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
(function (H) { |
|
|
|
|
H.wrap(Highcharts.SVGRenderer.prototype, "arc3dPath", function (proceed) { |
|
|
|
|
// Run original proceed method |
|
|
|
|
var ret = proceed.apply(this, [].slice.call(arguments, 1)); |
|
|
|
|
ret.zTop = (ret.zOut + 0.5) / 100; |
|
|
|
|
return ret; |
|
|
|
|
}); |
|
|
|
|
})(Highcharts); |
|
|
|
|
Highcharts.chart('pieChart', { |
|
|
|
|
chart: { |
|
|
|
|
type: "pie", |
|
|
|
|
animation: false, |
|
|
|
|
events: { |
|
|
|
|
load: function () { |
|
|
|
|
var each = Highcharts.each, |
|
|
|
|
points = this.series[0].points; |
|
|
|
|
each(points, function (p, i) { |
|
|
|
|
p.graphic.attr({ |
|
|
|
|
translateY: -p.shapeArgs.ran, |
|
|
|
|
}); |
|
|
|
|
p.graphic.side1.attr({ |
|
|
|
|
translateY: -p.shapeArgs.ran, |
|
|
|
|
}); |
|
|
|
|
p.graphic.side2.attr({ |
|
|
|
|
translateY: -p.shapeArgs.ran, |
|
|
|
|
}); |
|
|
|
|
var data = [ |
|
|
|
|
{ |
|
|
|
|
name: "不满意", |
|
|
|
|
value: 30, |
|
|
|
|
itemStyle: { color: "#00bfff" }, |
|
|
|
|
startRatio: 0, |
|
|
|
|
endRatio: 0.7, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "非常满意", |
|
|
|
|
value: 45, |
|
|
|
|
itemStyle: { color: "#48f5c0" }, |
|
|
|
|
startRatio: 0.7, |
|
|
|
|
endRatio: 1, |
|
|
|
|
}, |
|
|
|
|
{ name: "满意", value: 6, itemStyle: { color: "#00dced" }, startRatio: 0.7, endRatio: 1 }, |
|
|
|
|
]; |
|
|
|
|
var optionConfig = {}; |
|
|
|
|
|
|
|
|
|
const getPie3D = (pieData, internalDiameterRatio) => { |
|
|
|
|
//internalDiameterRatio:透明的空心占比 |
|
|
|
|
let series = []; |
|
|
|
|
let sumValue = 0; |
|
|
|
|
let startValue = 0; |
|
|
|
|
let endValue = 0; |
|
|
|
|
let k = 1; |
|
|
|
|
pieData.sort((a, b) => { |
|
|
|
|
return b.value - a.value; |
|
|
|
|
}); |
|
|
|
|
// 为每一个饼图数据，生成一个 series-surface 配置 |
|
|
|
|
for (let i = 0; i < pieData.length; i++) { |
|
|
|
|
sumValue += pieData[i].value; |
|
|
|
|
let seriesItem = { |
|
|
|
|
name: typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name, |
|
|
|
|
type: "surface", |
|
|
|
|
parametric: true, |
|
|
|
|
wireframe: { |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
pieData: pieData[i], |
|
|
|
|
pieStatus: { |
|
|
|
|
selected: false, |
|
|
|
|
hovered: false, |
|
|
|
|
k: k, |
|
|
|
|
}, |
|
|
|
|
radius: "50%", |
|
|
|
|
center: ["10%", "10%"], |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
if (typeof pieData[i].itemStyle != "undefined") { |
|
|
|
|
let itemStyle = {}; |
|
|
|
|
typeof pieData[i].itemStyle.color != "undefined" |
|
|
|
|
? (itemStyle.color = pieData[i].itemStyle.color) |
|
|
|
|
: null; |
|
|
|
|
typeof pieData[i].itemStyle.opacity != "undefined" |
|
|
|
|
? (itemStyle.opacity = pieData[i].itemStyle.opacity) |
|
|
|
|
: null; |
|
|
|
|
seriesItem.itemStyle = itemStyle; |
|
|
|
|
} |
|
|
|
|
series.push(seriesItem); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， |
|
|
|
|
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < series.length; i++) { |
|
|
|
|
endValue = startValue + series[i].pieData.value; |
|
|
|
|
series[i].pieData.startRatio = startValue / sumValue; |
|
|
|
|
series[i].pieData.endRatio = endValue / sumValue; |
|
|
|
|
series[i].parametricEquation = this.getParametricEquation( |
|
|
|
|
series[i].pieData.startRatio, |
|
|
|
|
series[i].pieData.endRatio, |
|
|
|
|
false, |
|
|
|
|
false, |
|
|
|
|
k, |
|
|
|
|
series[i].pieData.value |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
startValue = endValue; |
|
|
|
|
} |
|
|
|
|
// console.log(getParametricEquation) |
|
|
|
|
let boxHeight = this.getHeight3D(series, 25); //通过传参设定3d饼/环的高度，26代表26px |
|
|
|
|
// 准备待返回的配置项，把准备好的 legendData、series 传入。 |
|
|
|
|
let option = { |
|
|
|
|
// backgroundColor: "#203598", |
|
|
|
|
labelLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#404772", |
|
|
|
|
options3d: { |
|
|
|
|
enabled: true, |
|
|
|
|
alpha: 70, |
|
|
|
|
beta: 0, |
|
|
|
|
}, |
|
|
|
|
backgroundColor: null, |
|
|
|
|
marginTop: -45 |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
position: "outside", |
|
|
|
|
rich: { |
|
|
|
|
b: { |
|
|
|
|
fontSize: 24, |
|
|
|
|
lineHeight: 30, |
|
|
|
|
fontWeight: "bold", |
|
|
|
|
color: "#fff", |
|
|
|
|
colors: ["#00bdff", "#52f4c1", "#00dbec"], |
|
|
|
|
title: { |
|
|
|
|
text: "", |
|
|
|
|
}, |
|
|
|
|
c: { |
|
|
|
|
fontSize: 18, |
|
|
|
|
color: "#fff", |
|
|
|
|
legend: { |
|
|
|
|
enabled: false, // 关闭图例 |
|
|
|
|
}, |
|
|
|
|
plotOptions: { |
|
|
|
|
pie: { |
|
|
|
|
allowPointSelect: true, |
|
|
|
|
cursor: "pointer", |
|
|
|
|
depth: 35, |
|
|
|
|
dataLabels: { |
|
|
|
|
enabled: true, |
|
|
|
|
formatter: function (params) { |
|
|
|
|
// console.log(this); |
|
|
|
|
//this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息 |
|
|
|
|
let str = '<span style="background-image: linear-gradient(to bottom,#fceece,#e39054);-webkit-background-clip: text; -webkit-text-fill-color: transparent;">' + this.key + '</span>' + "<br />" + ((this.y / this.total) * 100).toFixed(2) + "%"; |
|
|
|
|
return str; |
|
|
|
|
}, |
|
|
|
|
formatter: "{b|{b}}\n{c|{c}%}", |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
backgroundColor: "#053A8D", |
|
|
|
|
formatter: (params) => { |
|
|
|
|
if (params.seriesName !== "mouseoutSeries" && params.seriesName !== "pie2d") { |
|
|
|
|
let bfb = ( |
|
|
|
|
(option.series[params.seriesIndex].pieData.endRatio - |
|
|
|
|
option.series[params.seriesIndex].pieData.startRatio) * |
|
|
|
|
100 |
|
|
|
|
).toFixed(2); |
|
|
|
|
return ( |
|
|
|
|
`${params.seriesName}<br/>` + |
|
|
|
|
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` + |
|
|
|
|
`${bfb}%` |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
xAxis3D: { |
|
|
|
|
min: -1, |
|
|
|
|
max: 1, |
|
|
|
|
// 去掉右底部的文字 |
|
|
|
|
credits: { |
|
|
|
|
enabled: false, |
|
|
|
|
}, |
|
|
|
|
yAxis3D: { |
|
|
|
|
min: -1, |
|
|
|
|
max: 1, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: "pie", |
|
|
|
|
name: "派件入库量占比", |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
name: "应急物资1", |
|
|
|
|
y: 10, |
|
|
|
|
h: 5, |
|
|
|
|
}, |
|
|
|
|
zAxis3D: { |
|
|
|
|
min: -1, |
|
|
|
|
max: 1, |
|
|
|
|
{ |
|
|
|
|
name: "应急物资2", |
|
|
|
|
y: 20, |
|
|
|
|
h: 10, |
|
|
|
|
}, |
|
|
|
|
grid3D: { |
|
|
|
|
show: false, |
|
|
|
|
boxHeight: boxHeight, //圆环的高度 |
|
|
|
|
left: 0, |
|
|
|
|
top: 0, //3d饼图的位置 |
|
|
|
|
viewControl: { |
|
|
|
|
//3d效果可以放大、旋转等，请自己去查看官方配置 |
|
|
|
|
alpha: 20, //角度 |
|
|
|
|
distance: 250, //调整视角到主体的距离，类似调整zoom |
|
|
|
|
rotateSensitivity: 0, //设置为0无法旋转 |
|
|
|
|
zoomSensitivity: 0, //设置为0无法缩放 |
|
|
|
|
panSensitivity: 0, //设置为0无法平移 |
|
|
|
|
autoRotate: false, //自动旋转 |
|
|
|
|
{ |
|
|
|
|
name: "应急物资3", |
|
|
|
|
y: 30, |
|
|
|
|
h: 15, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
series: series, |
|
|
|
|
}; |
|
|
|
|
return option; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var option = getPie3D(data, 0.8); |
|
|
|
|
console.log(option); |
|
|
|
|
//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption |
|
|
|
|
this.pieChart.setOption(option); |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
//获取3d丙图的最高扇区的高度 |
|
|
|
|
@ -1466,7 +1440,7 @@ export default { |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
font-family: "FZSK"; |
|
|
|
|
font-size: 0.22erm; |
|
|
|
|
font-size: 0.22rem; |
|
|
|
|
color: #ffffff; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
@ -1500,6 +1474,10 @@ export default { |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.map_box{ |
|
|
|
|
border: solid 0.01rem rgba(93, 165, 255, 0.15); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right_box { |
|
|
|
|
width: 24%; |
|
|
|
|
@ -1572,13 +1550,27 @@ export default { |
|
|
|
|
.right_top { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 34%; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.pie_box { |
|
|
|
|
height: 83%; |
|
|
|
|
width: 50%; |
|
|
|
|
background: url(~@/assets/img/pie_bg.png); |
|
|
|
|
width: 100%; |
|
|
|
|
// background: url(~@/assets/img/pie_bg.png); |
|
|
|
|
// background-size: 100% 100%; |
|
|
|
|
// background-position: 0% 10%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.pie_bg{ |
|
|
|
|
width: 65%; |
|
|
|
|
height: 65%; |
|
|
|
|
background: url(http://192.168.1.35:8080/img/pie_bg.587a605d.png) no-repeat; |
|
|
|
|
position: absolute; |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
background-position: 0% 10%; |
|
|
|
|
background-position-y: 0.7rem; |
|
|
|
|
background-position-x: -3px; |
|
|
|
|
top: 56%; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
jinna
3 years ago