1、父组件页面:
<template>
<div class="heightChart">
<height-chart :myEchart="equipmentReal.echartsData[0]" />
<div>高度(m)</div>
</div>
</template>
<script setup>
import heightChart from "./echarts/heightChart.vue"
const props = defineProps({
equipmentReal: {
type: Object,
default: function () {
return {};
},
},
echartsData: {
type: Array,
default: function () {
return [];
},
}
});
console.log("echartsData-1",props.equipmentReal.echartsData);
</script>
2、echarts的子组件:
<template>
<!-- {{myEchart}} -->
<div id="main" ref="chartBox"></div>
</template>
<script setup>
import { parseInt } from "lodash-es";
//接受父级传来的值
const props = defineProps({
myEchart: {
type: Object,
default: function () {
return {};
},
}
});
//监听父级传来的值并赋值
let echartVal = ref(0)
watch(
() => props.myEchart,
(newVal) => {
if (newVal) {
console.log("echartsData-2",newVal.value);
if(newVal.value != undefined){
let echartValue = parseInt(newVal.value)
// console.log("echartsData-3",typeof(echartValue));
echartVal.value = echartValue
}
onMounted(() => {
console.log("echartsData-3",echartVal.value);
const category = [
{
name: "高度",
// value: 612.5,
// TODO 改为动态获取数据
value:echartVal.value
},
]; // 类别
init();
});
}
},
{ immediate: true, deep: true }
);
let echarts = inject("echarts"); // 主要
onBeforeUnmount(() => {
chartBox.value = null;
machart.value = null;
clearInterval(timer.value);
timer.value = null;
});
// 基本柱形图
const chartBox = ref(null);
const machart = ref(null);
const timer = ref(null);
const category = [
{
name: "高度",
// value: 612.5,
// TODO 改为动态获取数据
value:echartVal.value
},
]; // 类别
const total = 2500; // 数据总数
function init() {
machart.value = echarts.init(document.getElementById("main")); // 主要
const option = {
// backgroundColor: "#071347",
grid: {
top: 10,
bottom: 5,
},
xAxis: [
{
type: "category",
inverse: false,
data: category,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
],
yAxis: [
{
max: total,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
],
series: [
{
// 内
type: "bar",
barWidth: 127.5,
silent: true,
itemStyle: {
normal: {
color: "rgba(17, 202, 165, 0.6)",
},
},
label: {
normal: {
formatter: function (params) {},
textStyle: {
color: "#fff",
fontSize: 14,
},
position: "top",
// distance: 20, // 向右偏移位置
show: true,
},
},
data: category,
z: 3,
// animationEasing: "elasticOut",
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "rgba(19, 67, 106, 0.8)",
// 00BF99
opacity: 0.5,
},
},
symbolRepeat: "fixed",
// symbolMargin: 2,
symbol: "rect",
symbolClip: true,
symbolSize: [130, 8],
symbolPosition: "start",
symbolOffset: [-5, -4],
symbolBoundingData: total,
data: [total - 30],
z: 2,
animationEasing: "elasticOut",
},
{
name: "外框",
type: "bar",
barGap: "-101.5%",
data: [total],
barWidth: 130, // 设置外框粗细
itemStyle: {
normal: {
barBorderRadius: [5, 5, 5, 5],
color: "rgba(19, 67, 106, 0.5)", // 填充色
barBorderColor: "#11CAA5", // 边框色
barBorderWidth: 1, // 边框宽度
shadowColor: "#00BF99",
shadowBlur: 15,
shadowOffsetX: 1,
shadowOffsetY: 1,
},
},
z: 0,
},
],
};
// 定时改变echarts的值
timer.value = setInterval(function () {
let num = Math.ceil(Math.random() * (1700 - 600) + 600);
// option.xAxis[0].data = [num]
option.series[0].data = [
{
name: "高度",
// value: num,
// TODO 改为动态获取数据
value:echartVal.value
},
];
machart.value.setOption(option, true);
}, 3000);
machart.value.setOption(option, true);
window.addEventListener("resize", function () {
machart.value.resize();
});
}
</script>
<style lang="scss" scoped>
#main {
width: 100%;
height: 100%;
// transform:skew(-5deg,0deg) rotate(-2deg)
}
</style>