This commit is contained in:
parent
a6f16fd8ec
commit
32f7b82882
|
@ -33,13 +33,6 @@ const colors = [
|
||||||
bottom: "rgba(14, 252, 255, .46)",
|
bottom: "rgba(14, 252, 255, .46)",
|
||||||
front: "rgba(14, 252, 255, .66)",
|
front: "rgba(14, 252, 255, .66)",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
left: "rgba(60, 143, 255, .16)",
|
|
||||||
right: "rgba(60, 143, 255, .6)",
|
|
||||||
top: "rgba(60, 143, 255, 1)",
|
|
||||||
bottom: "rgba(60, 143, 255, .46)",
|
|
||||||
front: "rgba(60, 143, 255, .66)",
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
const maxList = ref([
|
const maxList = ref([
|
||||||
190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190,
|
190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190,
|
||||||
|
@ -65,7 +58,7 @@ const data = reactive({
|
||||||
"溪口镇",
|
"溪口镇",
|
||||||
"社阳乡",
|
"社阳乡",
|
||||||
"詹家镇",
|
"詹家镇",
|
||||||
"龙舟街道",
|
"龙洲街道",
|
||||||
"湖镇镇",
|
"湖镇镇",
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
@ -120,7 +113,7 @@ const CubeRight_1 = echarts.graphic.extendShape({
|
||||||
buildPath: function (ctx, shape) {
|
buildPath: function (ctx, shape) {
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
const c0 = [shape.x - 18, shape.y];
|
const c0 = [shape.x - 18, shape.y];
|
||||||
const c1 = [shape.x -5, shape.y - 14];
|
const c1 = [shape.x - 5, shape.y - 14];
|
||||||
const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
|
const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
|
||||||
const c3 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
const c3 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
||||||
ctx
|
ctx
|
||||||
|
@ -187,8 +180,8 @@ const CubeLeft_2 = echarts.graphic.extendShape({
|
||||||
// 会canvas的应该都能看得懂,shape是从custom传入的
|
// 会canvas的应该都能看得懂,shape是从custom传入的
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
const c0 = [shape.x - 0, shape.y];
|
const c0 = [shape.x - 0, shape.y];
|
||||||
const c1 = [shape.x +13, shape.y - 14];
|
const c1 = [shape.x + 13, shape.y - 14];
|
||||||
const c2 = [xAxisPoint[0] +13, xAxisPoint[1] - 14];
|
const c2 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
|
||||||
const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
|
@ -489,20 +482,20 @@ const getOption = () => {
|
||||||
fill: colors[0]["left"],
|
fill: colors[0]["left"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "CubeFront_1",
|
type: "CubeFront_1",
|
||||||
shape: {
|
shape: {
|
||||||
api,
|
api,
|
||||||
xValue: api.value(0),
|
xValue: api.value(0),
|
||||||
yValue: api.value(1),
|
yValue: api.value(1),
|
||||||
x: location[0],
|
x: location[0],
|
||||||
y: location[1],
|
y: location[1],
|
||||||
xAxisPoint: api.coord([api.value(0), 0]),
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
},
|
|
||||||
style: {
|
|
||||||
fill: colors[0]["front"],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[0]["front"],
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: "CubeRight_1",
|
type: "CubeRight_1",
|
||||||
shape: {
|
shape: {
|
||||||
|
@ -517,112 +510,126 @@ const getOption = () => {
|
||||||
fill: colors[0]["right"],
|
fill: colors[0]["right"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "CubeTop_1",
|
type: "CubeTop_1",
|
||||||
shape: {
|
shape: {
|
||||||
api,
|
api,
|
||||||
xValue: api.value(0),
|
xValue: api.value(0),
|
||||||
yValue: api.value(1),
|
yValue: api.value(1),
|
||||||
x: location[0],
|
x: location[0],
|
||||||
y: location[1],
|
y: location[1],
|
||||||
xAxisPoint: api.coord([api.value(0), 0]),
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
},
|
|
||||||
style: {
|
|
||||||
fill: colors[0]["top"],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[0]["top"],
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
//设置图例颜色
|
||||||
|
itemStyle: {
|
||||||
|
show: true,
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
colorStops: [{ offset: 1, color: "rgba(234, 162, 57, 1)" }],
|
||||||
|
},
|
||||||
|
},
|
||||||
data: data.valueList,
|
data: data.valueList,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
xAxisIndex: 0,
|
xAxisIndex: 0,
|
||||||
name: "转出人数(含同乡镇跨村聚集人口)",
|
name: "转出人数(含同乡镇跨村聚集人口)",
|
||||||
type: "custom",
|
type: "custom",
|
||||||
renderItem: (params, api) => {
|
renderItem: (params, api) => {
|
||||||
const location = api.coord([api.value(0), api.value(1)]);
|
const location = api.coord([api.value(0), api.value(1)]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
type: "group",
|
type: "group",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
type: "CubeBottom_2",
|
type: "CubeBottom_2",
|
||||||
shape: {
|
shape: {
|
||||||
api,
|
api,
|
||||||
xValue: api.value(0),
|
xValue: api.value(0),
|
||||||
yValue: api.value(1),
|
yValue: api.value(1),
|
||||||
x: location[0],
|
x: location[0],
|
||||||
y: location[1],
|
y: location[1],
|
||||||
xAxisPoint: api.coord([api.value(0), 0]),
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
},
|
|
||||||
style: {
|
|
||||||
fill: colors[1]["bottom"],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
style: {
|
||||||
type: "CubeLeft_2",
|
fill: colors[1]["bottom"],
|
||||||
shape: {
|
|
||||||
api,
|
|
||||||
xValue: api.value(0),
|
|
||||||
yValue: api.value(1),
|
|
||||||
x: location[0],
|
|
||||||
y: location[1],
|
|
||||||
xAxisPoint: api.coord([api.value(0), 0]),
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
fill: colors[1]["left"],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
},
|
||||||
type: "CubeFront_2",
|
{
|
||||||
shape: {
|
type: "CubeLeft_2",
|
||||||
api,
|
shape: {
|
||||||
xValue: api.value(0),
|
api,
|
||||||
yValue: api.value(1),
|
xValue: api.value(0),
|
||||||
x: location[0],
|
yValue: api.value(1),
|
||||||
y: location[1],
|
x: location[0],
|
||||||
xAxisPoint: api.coord([api.value(0), 0]),
|
y: location[1],
|
||||||
},
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
style: {
|
|
||||||
fill: colors[1]["front"],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
style: {
|
||||||
type: "CubeRight_2",
|
fill: colors[1]["left"],
|
||||||
shape: {
|
|
||||||
api,
|
|
||||||
xValue: api.value(0),
|
|
||||||
yValue: api.value(1),
|
|
||||||
x: location[0],
|
|
||||||
y: location[1],
|
|
||||||
xAxisPoint: api.coord([api.value(0), 0]),
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
fill: colors[1]["right"],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
},
|
||||||
type: "CubeTop_2",
|
{
|
||||||
shape: {
|
type: "CubeFront_2",
|
||||||
api,
|
shape: {
|
||||||
xValue: api.value(0),
|
api,
|
||||||
yValue: api.value(1),
|
xValue: api.value(0),
|
||||||
x: location[0],
|
yValue: api.value(1),
|
||||||
y: location[1],
|
x: location[0],
|
||||||
xAxisPoint: api.coord([api.value(0), 0]),
|
y: location[1],
|
||||||
},
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
style: {
|
|
||||||
fill: colors[1]["top"],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
],
|
style: {
|
||||||
};
|
fill: colors[1]["front"],
|
||||||
},
|
},
|
||||||
|
},
|
||||||
data: data.valueList2,
|
{
|
||||||
|
type: "CubeRight_2",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[1]["right"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeTop_2",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: colors[1]["top"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
//设置图例颜色
|
||||||
|
itemStyle: {
|
||||||
|
show: true,
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
colorStops: [{ offset: 1, color: "rgba(14, 252, 255, 1)" }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data.valueList2,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -268,7 +268,8 @@ const getData =(nm,identNo)=>{
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
// console.log(routers.query);
|
// console.log(routers.query);
|
||||||
getData(routers.query.nm,routers.query.identNo)
|
// getData(routers.query.nm,routers.query.identNo)
|
||||||
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -111,7 +111,7 @@
|
||||||
<div class="right" style="width: 517px">
|
<div class="right" style="width: 517px">
|
||||||
<div class="jbggfwq">
|
<div class="jbggfwq">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="title_name"><span> 基本公共服务圈</span></div>
|
<div class="title_name" ><span> 基本公共服务圈</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="jbggfwq_content">
|
<div class="jbggfwq_content">
|
||||||
<div
|
<div
|
||||||
|
|
Loading…
Reference in New Issue