第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

張三

統(tǒng)計(jì)數(shù)據(jù)

#479AD3

HorizontalBar.vue

<template>
<div>
<div>【大區(qū)數(shù)據(jù)信息】</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實(shí)例
let?mChart?=?null;
const?target?=?ref(null);

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

renderChart();
});

//?2.?構(gòu)建option配置對(duì)象
const?renderChart?=?()?=>?{
console.log("renderChart---");
const?options?=?{
//?X軸展示數(shù)據(jù)
xAxis:?{
show:?false,
type:?"value",
max:?function(value)?{
return?parseInt(value.max?*?1.2);
}
},
//?Y軸展示數(shù)據(jù)
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軸內(nèi)容文字顏色
}
}
},
//?圖表繪制的位置，對(duì)應(yīng)?上下左右
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.通過(guò)實(shí)例.setOptions(option)
if?(mChart?!=?null)?{
mChart.setOption(options);
}
};
watch(
()?=>?props.data,
()?=>?{
renderChart();
}
);
</script>

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

學(xué)習(xí)拉，學(xué)習(xí)拉，抓緊學(xué)習(xí)哦

?使用tailwindcss都不用自己寫(xiě)css樣式了啊，熟悉已有的類(lèi)名就行。不過(guò)這應(yīng)該是針對(duì)小型項(xiàng)目，練手項(xiàng)目，沒(méi)有自己組件庫(kù)的情況使用吧

我的一天

我的問(wèn)題