66 lines
1.6 KiB
Vue
66 lines
1.6 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',
|
||
|
|
},
|
||
|
|
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>
|