亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

張三

統計數據

#479AD3

HorizontalBar.vue

<template>
<div>
<div>【大區數據信息】</div>
<div?ref="target"?class="w-full?h-full"></div>
</div>
</template>
<script?setup>
import?{?ref,?onMounted,?watch?}?from?"vue";
import?*?as?echarts?from?"echarts";
const?props?=?defineProps({
data:?{
type:?Object,
required:?true
}
});
console.log("橫向柱狀圖",?props.data);

//?1.?初始化echarts實例
let?mChart?=?null;
const?target?=?ref(null);

onMounted(()?=>?{
mChart?=?echarts.init(target.value);

renderChart();
});

//?2.?構建option配置對象
const?renderChart?=?()?=>?{
console.log("renderChart---");
const?options?=?{
//?X軸展示數據
xAxis:?{
show:?false,
type:?"value",
max:?function(value)?{
return?parseInt(value.max?*?1.2);
}
},
//?Y軸展示數據
yAxis:?{
type:?"category",
data:?props.data.regions.map(item?=>?item.name),
inverse:?true,
axisLine:?{
show:?false
},
axisTick:?{
show:?false
},
axisLabel:?{
//y軸文字的配置
color:?"#88f1ff",
textStyle:?{
color:?"white"?//Y軸內容文字顏色
}
}
},
//?圖表繪制的位置，對應?上下左右
grid:?{
top:?0,
right:?0,
bottom:?0,
left:?0,
containLabel:?true
},
//核心配置
series:?[
{
type:?"bar",
data:?props.data.regions.map(item?=>?({
name:?item.name,
value:?item.value
})),
showBackground:?true,
backgroundStyle:?{
color:?"rgba(180,180,180,0.2)"
},
itemStyle:?{
color:?"#479AD3",
barBorderRadius:?5,
shadowColor:?"rgba(0,0,0,0.3)",
shadowBlur:?5
},
barWidth:?12,
label:?{
show:?true,
position:?"right",
textStyle:?{
color:?"#fff"
}
}
}
]
};

//?3.通過實例.setOptions(option)
if?(mChart?!=?null)?{
mChart.setOption(options);
}
};
watch(
()?=>?props.data,
()?=>?{
renderChart();
}
);
</script>

<style?lang="scss"?scoped>
</style>

學習拉，學習拉，抓緊學習哦

?使用tailwindcss都不用自己寫css樣式了啊，熟悉已有的類名就行。不過這應該是針對小型項目，練手項目，沒有自己組件庫的情況使用吧

我的一天

我的問題