469 lines
12 KiB
Vue
469 lines
12 KiB
Vue
<template>
|
||
<div ref="chart" style="width: 96%; height: 250px"></div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, onBeforeMount, reactive, ref } from "vue";
|
||
// 局部引入echarts核心模块
|
||
import * as echarts from "echarts";
|
||
|
||
const props = defineProps({
|
||
list: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
});
|
||
|
||
const chart = ref(); // 创建DOM引用
|
||
|
||
const colors = [
|
||
{
|
||
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(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(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 = ref([]);
|
||
// const valueList = [20, 53, 47, 65, 29, 11, 10];
|
||
const data = reactive({
|
||
list: [],
|
||
option: {},
|
||
Max: 200,
|
||
valueList: [20, 53, 47, 65, 29, 11, 10],
|
||
xxname: [
|
||
|
||
],
|
||
});
|
||
// 注册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 - 7, shape.y - 14];
|
||
const c2 = [xAxisPoint[0] - 7, 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 + 2, shape.y];
|
||
const c2 = [xAxisPoint[0] + 2, 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 + 2, shape.y];
|
||
const c1 = [shape.x + 15, shape.y - 14];
|
||
const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
|
||
const c3 = [xAxisPoint[0] + 2, 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 + 2, shape.y];
|
||
const c2 = [shape.x + 15, shape.y - 14];
|
||
const c3 = [shape.x - 7, 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] + 2, xAxisPoint[1]];
|
||
const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
|
||
const c3 = [xAxisPoint[0] - 7, 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 getOption = () => {
|
||
data.option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
formatter: "{b0}:{c1}",
|
||
},
|
||
legend: {
|
||
data: ["两慢病免费用药情况"],
|
||
top: "4%",
|
||
right: "5%",
|
||
textStyle: {
|
||
fontSize: 16,
|
||
color: "#ffffff",
|
||
},
|
||
},
|
||
grid: {
|
||
left: 10,
|
||
right: 0,
|
||
bottom: 20,
|
||
top: 70,
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: data.xxname,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
offset: 10,
|
||
|
||
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: data.xxname,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
offset: 10,
|
||
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
color: "#fff",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
],
|
||
yAxis: {
|
||
min: 0,
|
||
max: data.Max,
|
||
// interval: 100,
|
||
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.value,
|
||
},
|
||
{
|
||
name:'两慢病免费用药情况',
|
||
type: "custom",
|
||
itemStyle: {
|
||
color:'#0efdff',
|
||
},
|
||
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: 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: data.valueList.map((item) => parseInt(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; // 将最大值向上取整到最近的100的倍数
|
||
};
|
||
const setChart1 = () => {
|
||
data.valueList = [];
|
||
data.xxname = [];
|
||
if (data.list.length !== 0) {
|
||
data.list.forEach((item) => {
|
||
data.xxname.push(item.name); //信息名
|
||
data.valueList.push(item.num); //信息数
|
||
});
|
||
}
|
||
};
|
||
|
||
onBeforeMount(() => {
|
||
setTimeout(() => {
|
||
data.list = props.list;
|
||
setChart1();
|
||
data.Max = getMaxCeilingValue(data.valueList);
|
||
maxList.value = data.valueList.map((item) => parseInt(data.Max) * 0.9); // 生成新的数组，将每个值都替换为 data.Max 的90%
|
||
getOption();
|
||
setChart();
|
||
}, 800);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|