<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 regions=[{"id": 1,"name": "华北","value": 56},{"id": 2,"name": "东北","value": 50},{"id": 3,"name": "华东","value": 86},{"id": 4,"name": "中南","value": 55},{"id": 5,"name": "西南","value": 52},{"id": 6,"name": "西北","value": 77}
]
// 1.初始化
let myChart = null;
const target = ref(null);
onMounted(() => {myChart = echarts.init(target.value);renderChart();
});// 2.构建 option 配置对象
const renderChart = () => {const options = {// X轴展示数据xAxis: {show: false, //不显示Xtype: "value", //表示X轴作为数据展示max: function (value) {return parseInt(value.max * 1.2);},},// Y轴展示数据yAxis: {type: "category",data: regions.map((item) => item.name),inverse: true,axisLine: { show: false }, //不展示线axisTick: { show: false }, //不展示刻度axisLabel: { color: "#9eb1c8" },},// 图标绘制的位置 对应上下左右grid: {top: 0,right: 0,bottom: 0,left: 0,containLabel: true, //计算时包含标签},// 核心配置series: [{type: "bar",data:regions.map((item) => ({name: item.name,value: item.value,})),showBackground: true,backgroundStyle: {color: "rgba(180, 180, 180, 0.2)",},itemStyle: { //设置柱状图的样式color: "#5D98CE",barBorderRadius: 5, //圆角shadowColor: "rgba(0,0,0,0.3)",shadowBlur: 5,},barWidth: 12,//宽度label: { //柱状的刻度show: true,position: "right", //位置textStyle: { //颜色color: "#fff",},},},],};// 3.通过实例.setOptions(option)myChart.setOption(options);
};
watch(() =>  regions,() => renderChart()
);
</script><style lang="scss" scoped></style>