This commit is contained in:
parent
a6f16fd8ec
commit
32f7b82882
|
|
@ -33,13 +33,6 @@ const colors = [
|
|||
bottom: "rgba(14, 252, 255, .46)",
|
||||
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([
|
||||
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) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
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 c3 = [xAxisPoint[0] - 18, xAxisPoint[1]];
|
||||
ctx
|
||||
|
|
@ -187,8 +180,8 @@ const CubeLeft_2 = echarts.graphic.extendShape({
|
|||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x - 0, shape.y];
|
||||
const c1 = [shape.x +13, shape.y - 14];
|
||||
const c2 = [xAxisPoint[0] +13, xAxisPoint[1] - 14];
|
||||
const c1 = [shape.x + 13, shape.y - 14];
|
||||
const c2 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
|
||||
const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
|
|
@ -489,20 +482,20 @@ const getOption = () => {
|
|||
fill: colors[0]["left"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeFront_1",
|
||||
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[0]["front"],
|
||||
},
|
||||
{
|
||||
type: "CubeFront_1",
|
||||
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[0]["front"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeRight_1",
|
||||
shape: {
|
||||
|
|
@ -517,112 +510,126 @@ const getOption = () => {
|
|||
fill: colors[0]["right"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeTop_1",
|
||||
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[0]["top"],
|
||||
},
|
||||
{
|
||||
type: "CubeTop_1",
|
||||
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[0]["top"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
//设置图例颜色
|
||||
itemStyle: {
|
||||
show: true,
|
||||
color: {
|
||||
type: "linear",
|
||||
colorStops: [{ offset: 1, color: "rgba(234, 162, 57, 1)" }],
|
||||
},
|
||||
},
|
||||
data: data.valueList,
|
||||
},
|
||||
{
|
||||
xAxisIndex: 0,
|
||||
name: "转出人数(含同乡镇跨村聚集人口)",
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
{
|
||||
xAxisIndex: 0,
|
||||
name: "转出人数(含同乡镇跨村聚集人口)",
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "CubeBottom_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]["bottom"],
|
||||
},
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "CubeBottom_2",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
{
|
||||
type: "CubeLeft_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]["left"],
|
||||
},
|
||||
style: {
|
||||
fill: colors[1]["bottom"],
|
||||
},
|
||||
{
|
||||
type: "CubeFront_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]["front"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeLeft_2",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
{
|
||||
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"],
|
||||
},
|
||||
style: {
|
||||
fill: colors[1]["left"],
|
||||
},
|
||||
{
|
||||
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"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "CubeFront_2",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
data: data.valueList2,
|
||||
style: {
|
||||
fill: colors[1]["front"],
|
||||
},
|
||||
},
|
||||
{
|
||||
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(()=>{
|
||||
// console.log(routers.query);
|
||||
getData(routers.query.nm,routers.query.identNo)
|
||||
// getData(routers.query.nm,routers.query.identNo)
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -509,7 +510,7 @@ onMounted(()=>{
|
|||
// box-shadow: inset 0px 0px 11px 0px rgba(255, 255, 255, 0.5);
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
.my-tag-item_active {
|
||||
background: rgba(0, 158, 255, 0.38);
|
||||
box-shadow: inset 0px 0px 11px 0px rgba(255, 255, 255, 0.5);
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
<div class="right" style="width: 517px">
|
||||
<div class="jbggfwq">
|
||||
<div class="title">
|
||||
<div class="title_name"><span> 基本公共服务圈</span></div>
|
||||
<div class="title_name" ><span> 基本公共服务圈</span></div>
|
||||
</div>
|
||||
<div class="jbggfwq_content">
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in New Issue