Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
duanxiaohai
commit
1853dc9e12
|
|
@ -10,7 +10,6 @@ import * as echarts from "echarts";
|
|||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const colors = [
|
||||
|
||||
{
|
||||
left: "rgba(234, 162, 57, .16)",
|
||||
right: "rgba(234, 162, 57, .6)",
|
||||
|
|
@ -32,11 +31,13 @@ const colors = [
|
|||
bottom: "rgba(60, 143, 255, .46)",
|
||||
front: "rgba(60, 143, 255, .66)",
|
||||
},
|
||||
|
||||
];
|
||||
const maxList = [90, 90, 90, 90, 90, 90, 90];
|
||||
const valueList = [20, 53, 47, 65, 29, 11, 50];
|
||||
|
||||
const maxList = ref([]);
|
||||
const valueList = [20, 53, 47, 65, 29, 11, 10];
|
||||
const data = reactive({
|
||||
option: {},
|
||||
Max: 100,
|
||||
});
|
||||
// 注册5个面图形:左侧、前面、右面、上面、下面
|
||||
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
||||
// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
|
||||
|
|
@ -145,290 +146,304 @@ 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 getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}:{c1}",
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 0,
|
||||
bottom: 20,
|
||||
top: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"小奔通",
|
||||
"两慢病",
|
||||
"水费",
|
||||
"就业招工",
|
||||
"零工市厂匹配",
|
||||
"医保",
|
||||
"交通出行",
|
||||
],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
offset: 10,
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}:{c1}",
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 0,
|
||||
bottom: 20,
|
||||
top: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"小奔通",
|
||||
"两慢病",
|
||||
"水费",
|
||||
"就业招工",
|
||||
"零工市厂匹配",
|
||||
"医保",
|
||||
"交通出行",
|
||||
],
|
||||
axisLine: {
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
formatter: function (value) {
|
||||
return value.length > 3 ? value.slice(0, 2) + "..." : value;
|
||||
},
|
||||
},
|
||||
},
|
||||
offset: 10,
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"小奔通",
|
||||
"两慢病",
|
||||
"水费",
|
||||
"就业招工",
|
||||
"零工市厂匹配",
|
||||
"医保",
|
||||
"交通出行",
|
||||
],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
offset: 10,
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
min: 0,
|
||||
// max: 200,
|
||||
max: data.Max,
|
||||
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,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
formatter: function (value) {
|
||||
|
||||
return value.length > 3 ? value.slice(0, 2) + "..." : value;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"小奔通",
|
||||
"两慢病",
|
||||
"水费",
|
||||
"就业招工",
|
||||
"零工市厂匹配",
|
||||
"医保",
|
||||
"交通出行",
|
||||
],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
offset: 10,
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
],
|
||||
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]),
|
||||
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)",
|
||||
},
|
||||
},
|
||||
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: "CubeLeft_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
{
|
||||
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)",
|
||||
},
|
||||
},
|
||||
style: {
|
||||
fill: "rgba(103, 180, 233, .04)",
|
||||
{
|
||||
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: "CubeFront_1",
|
||||
shape: {
|
||||
api,
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
{
|
||||
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)",
|
||||
},
|
||||
},
|
||||
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)]);
|
||||
|
||||
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 % 3}`]["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 % 3}`]["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 % 3}`]["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 % 3}`]["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 % 3}`]["top"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
data: valueList,
|
||||
},
|
||||
//顶部字体
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 18,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value -5;
|
||||
],
|
||||
};
|
||||
},
|
||||
data: maxList.value,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0)",
|
||||
},
|
||||
{
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
|
||||
data: valueList.map((item) => item + 5),
|
||||
barWidth: 20,
|
||||
},
|
||||
],
|
||||
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 % 3}`]["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 % 3}`]["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 % 3}`]["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 % 3}`]["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 % 3}`]["top"],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
data: valueList,
|
||||
},
|
||||
//顶部字体
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 18,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value - 5;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0)",
|
||||
},
|
||||
|
||||
data: valueList.map((item) => item + 5),
|
||||
barWidth: 20,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
const getMaxCeilingValue = (arr) => {
|
||||
let max = Math.max(...arr);
|
||||
return Math.ceil(max / 100) * 100;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
myChart.setOption(option);
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.Max = getMaxCeilingValue(valueList);
|
||||
maxList.value = valueList.map((item) => data.Max * 0.9);
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue