This commit is contained in:
parent
a06da0ccf7
commit
a520321e70
|
|
@ -10,7 +10,6 @@ import * as echarts from "echarts";
|
||||||
const chart = ref(); // 创建DOM引用
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
const colors = [
|
const colors = [
|
||||||
|
|
||||||
{
|
{
|
||||||
left: "rgba(234, 162, 57, .16)",
|
left: "rgba(234, 162, 57, .16)",
|
||||||
right: "rgba(234, 162, 57, .6)",
|
right: "rgba(234, 162, 57, .6)",
|
||||||
|
|
@ -32,11 +31,13 @@ const colors = [
|
||||||
bottom: "rgba(60, 143, 255, .46)",
|
bottom: "rgba(60, 143, 255, .46)",
|
||||||
front: "rgba(60, 143, 255, .66)",
|
front: "rgba(60, 143, 255, .66)",
|
||||||
},
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
const maxList = [90, 90, 90, 90, 90, 90, 90];
|
const maxList = ref([]);
|
||||||
const valueList = [20, 53, 47, 65, 29, 11, 50];
|
const valueList = [20, 53, 47, 65, 29, 11, 10];
|
||||||
|
const data = reactive({
|
||||||
|
option: {},
|
||||||
|
Max: 100,
|
||||||
|
});
|
||||||
// 注册5个面图形:左侧、前面、右面、上面、下面
|
// 注册5个面图形:左侧、前面、右面、上面、下面
|
||||||
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
||||||
// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
|
// 绘制左侧面-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("CubeRight_1", CubeRight_1);
|
||||||
echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
|
echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
|
||||||
echarts.graphic.registerShape("CubeBottom_1", CubeBottom_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 = {
|
axisTick: {
|
||||||
tooltip: {
|
show: false,
|
||||||
trigger: "axis",
|
},
|
||||||
formatter: "{b0}:{c1}",
|
axisLabel: {
|
||||||
},
|
show: true,
|
||||||
grid: {
|
color: "#fff",
|
||||||
left: 10,
|
fontSize: 16,
|
||||||
right: 0,
|
formatter: function (value) {
|
||||||
bottom: 20,
|
return value.length > 3 ? value.slice(0, 2) + "..." : value;
|
||||||
top: 20,
|
},
|
||||||
containLabel: true,
|
},
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
data: [
|
|
||||||
"小奔通",
|
|
||||||
"两慢病",
|
|
||||||
"水费",
|
|
||||||
"就业招工",
|
|
||||||
"零工市厂匹配",
|
|
||||||
"医保",
|
|
||||||
"交通出行",
|
|
||||||
],
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
},
|
||||||
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: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
color: "#fff",
|
|
||||||
fontSize: 16,
|
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",
|
color: "#fff",
|
||||||
fontSize: 16,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
series: [
|
||||||
yAxis: {
|
//阴影部分
|
||||||
min: 0,
|
{
|
||||||
max: 100,
|
type: "custom",
|
||||||
interval: 20,
|
renderItem: function (params, api) {
|
||||||
type: "value",
|
console.log(api);
|
||||||
axisLine: {
|
const location = api.coord([api.value(0), api.value(1)]);
|
||||||
show: true,
|
return {
|
||||||
lineStyle: {
|
type: "group",
|
||||||
color: "rgba(255, 255, 255, .16)",
|
children: [
|
||||||
},
|
{
|
||||||
},
|
type: "CubeBottom_1",
|
||||||
splitLine: {
|
shape: {
|
||||||
show: true,
|
api,
|
||||||
lineStyle: {
|
x: location[0],
|
||||||
type: "dashed",
|
y: location[1],
|
||||||
color: "rgba(255, 255, 255, .16)",
|
xAxisPoint: api.coord([api.value(0), 0]),
|
||||||
},
|
},
|
||||||
},
|
style: {
|
||||||
axisTick: {
|
fill: "rgba(103, 180, 233, .16)",
|
||||||
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",
|
||||||
type: "CubeLeft_1",
|
shape: {
|
||||||
shape: {
|
api,
|
||||||
api,
|
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: "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: "CubeTop_1",
|
||||||
type: "CubeFront_1",
|
shape: {
|
||||||
shape: {
|
api,
|
||||||
api,
|
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: "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),
|
return {
|
||||||
barWidth: 20,
|
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(() => {
|
onBeforeMount(() => {
|
||||||
var myChart = echarts.init(chart.value);
|
setTimeout(() => {
|
||||||
|
data.Max = getMaxCeilingValue(valueList);
|
||||||
myChart.setOption(option);
|
maxList.value = valueList.map((item) => data.Max * 0.9);
|
||||||
|
getOption();
|
||||||
|
setChart();
|
||||||
|
}, 600);
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue