Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
lnn19986213
commit
c741b95682
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
|
|
@ -75,6 +75,7 @@
|
||||||
<i></i>
|
<i></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<right1></right1>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title right_2">
|
<div class="yd_title right_2">
|
||||||
|
|
@ -83,6 +84,8 @@
|
||||||
<i></i>
|
<i></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" />
|
||||||
|
<!-- <right2></right2> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="yd_title right_3">
|
<div class="yd_title right_3">
|
||||||
|
|
@ -91,6 +94,7 @@
|
||||||
<i></i>
|
<i></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<img src="@/assets/images/sjfx/map.png" alt="" class="map" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -99,6 +103,8 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
|
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
|
||||||
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
|
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
|
||||||
|
import right2 from "./echart_analyze/right2.vue";
|
||||||
|
import right1 from "./echart_analyze/right1.vue";
|
||||||
import http from "@/utils/request.js";
|
import http from "@/utils/request.js";
|
||||||
import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
|
import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
|
||||||
import edxs from "./echart_analyze/edXS.vue";
|
import edxs from "./echart_analyze/edXS.vue";
|
||||||
|
|
@ -353,6 +359,8 @@ onBeforeMount(() => {});
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.mechanism {
|
.mechanism {
|
||||||
background-image: url(@/assets/YLTitle/titleImg10.png);
|
background-image: url(@/assets/YLTitle/titleImg10.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
@ -363,6 +371,15 @@ onBeforeMount(() => {});
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 560px;
|
||||||
|
height: 268px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.right3d{
|
||||||
|
width: 560px;
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
/* 滚动条整体部分 */
|
/* 滚动条整体部分 */
|
||||||
.rolling::-webkit-scrollbar {
|
.rolling::-webkit-scrollbar {
|
||||||
width: 5px;
|
width: 5px;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 300px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const chart = ref(null); // 创建DOM引用
|
||||||
|
const data1 = [
|
||||||
|
"大街乡",
|
||||||
|
"社阳乡",
|
||||||
|
"牧尘畲族乡",
|
||||||
|
"庙下乡",
|
||||||
|
"溪口镇",
|
||||||
|
"罗家乡",
|
||||||
|
"模环乡",
|
||||||
|
"横山镇",
|
||||||
|
"石佛乡",
|
||||||
|
"詹家镇",
|
||||||
|
"塔石镇",
|
||||||
|
"小男孩镇",
|
||||||
|
"湖镇镇",
|
||||||
|
"东华街道",
|
||||||
|
"龙洲街道",
|
||||||
|
];
|
||||||
|
const data2 = [
|
||||||
|
"862772",
|
||||||
|
"672917",
|
||||||
|
"302810",
|
||||||
|
"294100",
|
||||||
|
"109310",
|
||||||
|
"91023",
|
||||||
|
"81232",
|
||||||
|
"71273",
|
||||||
|
"69173",
|
||||||
|
"51861",
|
||||||
|
"49184",
|
||||||
|
"31740",
|
||||||
|
"21307",
|
||||||
|
"21307",
|
||||||
|
"20000",
|
||||||
|
];
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
left: "2%",
|
||||||
|
right: "10%",
|
||||||
|
bottom: "2%",
|
||||||
|
top: "4%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis", //axis , item
|
||||||
|
},
|
||||||
|
// backgroundColor: '#002D54',
|
||||||
|
xAxis: {
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(77, 128, 254, 0.2)",
|
||||||
|
type: "line",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// 改变x轴字体颜色和大小
|
||||||
|
show: false,
|
||||||
|
textStyle: {
|
||||||
|
color: "#00c0fa",
|
||||||
|
fontSize: 19,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
inverse: true,
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: "14",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: data1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "未交医保人员",
|
||||||
|
type: "bar",
|
||||||
|
zlevel: 1,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "right", // 位置
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 12,
|
||||||
|
distance: 10, // 距离
|
||||||
|
// formatter: '{c}%' // 这里是数据展示的时候显示的数据
|
||||||
|
}, // 柱子上方的数值
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderWidth: 1,
|
||||||
|
// borderColor: "rgba(0, 183, 255, 1)",
|
||||||
|
borderRadius: [0, 0, 50, 0], //圆角边框
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: "rgba(0, 183, 255, 0)" },
|
||||||
|
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
barWidth: 10,
|
||||||
|
data: data2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,418 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 96%; height: 240px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, onBeforeMount, reactive, ref } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
|
const colors = [
|
||||||
|
{
|
||||||
|
left: "rgba(234, 162, 57, .16)",
|
||||||
|
right: "rgba(234, 162, 57, .6)",
|
||||||
|
top: "rgba(234, 162, 57, 1)",
|
||||||
|
bottom: "rgba(234, 162, 57, .46)",
|
||||||
|
front: "rgba(234, 162, 57, .66)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: "rgba(14, 252, 255, .16)",
|
||||||
|
right: "rgba(14, 252, 255, .6)",
|
||||||
|
top: "rgba(14, 252, 255, 1)",
|
||||||
|
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)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: "rgba(234, 162, 57, .16)",
|
||||||
|
right: "rgba(234, 162, 57, .6)",
|
||||||
|
top: "rgba(234, 162, 57, 1)",
|
||||||
|
bottom: "rgba(234, 162, 57, .46)",
|
||||||
|
front: "rgba(234, 162, 57, .66)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: "rgba(14, 252, 255, .16)",
|
||||||
|
right: "rgba(14, 252, 255, .6)",
|
||||||
|
top: "rgba(14, 252, 255, 1)",
|
||||||
|
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)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: "rgba(234, 162, 57, .16)",
|
||||||
|
right: "rgba(234, 162, 57, .6)",
|
||||||
|
top: "rgba(234, 162, 57, 1)",
|
||||||
|
bottom: "rgba(234, 162, 57, .46)",
|
||||||
|
front: "rgba(234, 162, 57, .66)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: "rgba(14, 252, 255, .16)",
|
||||||
|
right: "rgba(14, 252, 255, .6)",
|
||||||
|
top: "rgba(14, 252, 255, 1)",
|
||||||
|
bottom: "rgba(14, 252, 255, .46)",
|
||||||
|
front: "rgba(14, 252, 255, .66)",
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
|
const maxList = [90, 90, 90, 90, 90,90,90];
|
||||||
|
const valueList = [20, 53, 47, 65, 29,11,50];
|
||||||
|
|
||||||
|
// 注册5个面图形:左侧、前面、右面、上面、下面
|
||||||
|
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
||||||
|
// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
|
||||||
|
const CubeLeft_1 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x - 20, shape.y];
|
||||||
|
const c1 = [shape.x - 2, shape.y - 14];
|
||||||
|
const c2 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];
|
||||||
|
const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeFront_1 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x - 20, shape.y];
|
||||||
|
const c1 = [shape.x + 18, shape.y];
|
||||||
|
const c2 = [xAxisPoint[0] + 18, xAxisPoint[1]];
|
||||||
|
const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeRight_1 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x + 18, shape.y];
|
||||||
|
const c1 = [shape.x + 36, shape.y - 14];
|
||||||
|
const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
|
||||||
|
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeTop_1 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const c0 = [shape.x - 20, shape.y];
|
||||||
|
const c1 = [shape.x + 18, shape.y];
|
||||||
|
const c2 = [shape.x + 36, shape.y - 14];
|
||||||
|
const c3 = [shape.x - 2, shape.y - 14];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const CubeBottom_1 = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
|
||||||
|
const c0 = [xAxisPoint[0] - 20, xAxisPoint[1]];
|
||||||
|
const c1 = [xAxisPoint[0] + 18, xAxisPoint[1]];
|
||||||
|
const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
|
||||||
|
const c3 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];
|
||||||
|
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
echarts.graphic.registerShape("CubeLeft_1", CubeLeft_1);
|
||||||
|
echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
|
||||||
|
echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
|
||||||
|
echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
|
||||||
|
echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
left: 10,
|
||||||
|
right: 40,
|
||||||
|
bottom: 20,
|
||||||
|
top: 20,
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["小奔通", "两慢病", "水费", "就业招工", "零工市场匹配",'医保','交通出行'],
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
offset: 10,
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 16,
|
||||||
|
align: "left",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
interval: 20,
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(255, 255, 255, .16)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed",
|
||||||
|
color: "rgba(255, 255, 255, .16)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
//阴影部分
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
renderItem: function (params, api) {
|
||||||
|
console.log(api);
|
||||||
|
const location = api.coord([api.value(0), api.value(1)]);
|
||||||
|
return {
|
||||||
|
type: "group",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: "CubeBottom_1",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "rgba(103, 180, 233, .16)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeLeft_1",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "rgba(103, 180, 233, .04)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeFront_1",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "rgba(103, 180, 233, .16)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeRight_1",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "rgba(103, 180, 233, .08)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeTop_1",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
x: location[0],
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "rgba(103, 180, 233, .26)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: maxList,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
const location = api.coord([api.value(0), api.value(1)]);
|
||||||
|
var color =
|
||||||
|
api.value(1) > 10000
|
||||||
|
? "red"
|
||||||
|
: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#5cc4eb",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.8,
|
||||||
|
color: "#21658c",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
return {
|
||||||
|
type: "group",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: "CubeBottom_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[params.dataIndexInside]["bottom"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeLeft_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[params.dataIndexInside]["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[params.dataIndexInside]["front"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeRight_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[params.dataIndexInside]["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[params.dataIndexInside]["top"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
data: valueList,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue