张三

统计数据

#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样式了啊，熟悉已有的类名就行。不过这应该是针对小型项目，练手项目，没有自己组件库的情况使用吧

我的一天

我的问题