76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<template>
|
||
<div class="dealer-distribution-charts">
|
||
<custom-echart-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
const chartsData = reactive({
|
||
option: {
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '2%',
|
||
top: '18%',
|
||
containLabel: true,
|
||
},
|
||
title: {
|
||
text: ' ',
|
||
textStyle: {
|
||
color: '#333',
|
||
},
|
||
},
|
||
label: {
|
||
color: '#333',
|
||
},
|
||
tooltip: {
|
||
backgroundColor: 'rgba(12, 36, 56, 0.9)', // 背景颜色(支持RGBA格式)
|
||
borderColor: '#2cf4fd', // 边框颜色
|
||
borderWidth: 1, // 边框宽度
|
||
textStyle: {
|
||
color: '#fff', // 文字颜色
|
||
fontSize: 12,
|
||
},
|
||
formatter: '{b}：{c}',
|
||
},
|
||
barStyle: {
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
|
||
},
|
||
color: {
|
||
type: 'linear', // 线性渐变
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: '#45bfe9' },
|
||
{ offset: 1, color: '#01589c' },
|
||
],
|
||
global: false, // 默认为 false
|
||
},
|
||
},
|
||
legend: {
|
||
show: false,
|
||
},
|
||
},
|
||
valData: [
|
||
{ value: 80, type: '经销商', name: '耿马镇' },
|
||
{ value: 105, type: '经销商', name: '勐撒镇' },
|
||
{ value: 100, type: '经销商', name: '勐永镇' },
|
||
{ value: 125, type: '经销商', name: '孟定镇' },
|
||
{ value: 217, type: '经销商', name: '勐简乡' },
|
||
{ value: 200, type: '经销商', name: '贺派乡' },
|
||
{ value: 155, type: '经销商', name: '四排山乡' },
|
||
{ value: 80, type: '经销商', name: '芒洪乡' },
|
||
{ value: 105, type: '经销商', name: '大兴乡' },
|
||
],
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.dealer-distribution-charts {
|
||
height: 100%;
|
||
}
|
||
</style>
|