diff --git a/src/views/dashboard/components/Chart/BarChart.vue b/src/views/dashboard/components/Chart/BarChart.vue index 82233c7f..05be0c4f 100644 --- a/src/views/dashboard/components/Chart/BarChart.vue +++ b/src/views/dashboard/components/Chart/BarChart.vue @@ -9,7 +9,7 @@ import { onActivated, onBeforeUnmount, onDeactivated, - onMounted + onMounted, } from 'vue'; import { init, EChartsOption } from 'echarts'; import * as echarts from 'echarts'; @@ -18,22 +18,22 @@ import resize from '@/utils/resize'; const props = defineProps({ id: { type: String, - default: 'barChart' + default: 'barChart', }, className: { type: String, - default: '' + default: '', }, width: { type: String, default: '200px', - required: true + required: true, }, height: { type: String, default: '200px', - required: true - } + required: true, + }, }); const { mounted, chart, beforeDestroy, activated, deactivated } = resize(); @@ -51,100 +51,104 @@ function initChart() { fontSize: 18, fontStyle: 'normal', fontWeight: 'bold', - color: '#337ecc' - } + color: '#337ecc', + }, }, grid: { left: '2%', right: '2%', bottom: '10%', - containLabel: true + containLabel: true, }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { - color: '#999' - } - } + color: '#999', + }, + }, }, legend: { x: 'center', y: 'bottom', - data: ['收入', '毛利润', '收入增长率', '利润增长率'] + data: ['收入', '毛利润', '收入增长率', '利润增长率'], }, xAxis: [ { type: 'category', - data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽'], + data: [ '浙江', '北京', '上海', '广东','深圳'], axisPointer: { - type: 'shadow' - } - } + type: 'shadow', + }, + }, ], yAxis: [ { type: 'value', + min: 0, + max: 10000, interval: 2000, axisLabel: { - formatter: '{value} ' - } + formatter: '{value} ', + }, }, { type: 'value', + min: 0, + max: 100, interval: 20, axisLabel: { - formatter: '{value}%' - } - } + formatter: '{value}%', + }, + }, ], series: [ { name: '收入', type: 'bar', - data: [8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800], + data: [7000, 7100, 7200, 7300,7400], barWidth: 20, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, - { offset: 1, color: '#188df0' } - ]) - } + { offset: 1, color: '#188df0' }, + ]), + }, }, { name: '毛利润', type: 'bar', - data: [6700, 6800, 6300, 5213, 4500, 4200, 4200, 3800], + data: [ 8000,8200, 8400, 8600, 8800], barWidth: 20, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#25d73c' }, { offset: 0.5, color: '#1bc23d' }, - { offset: 1, color: '#179e61' } - ]) - } + { offset: 1, color: '#179e61' }, + ]), + }, }, { name: '收入增长率', type: 'line', yAxisIndex: 1, - data: [65, 67, 65, 53, 47, 45, 43, 42, 41], + data: [ 60,65, 70, 75, 80], itemStyle: { - color: '#67C23A' - } + color: '#67C23A', + }, }, { name: '利润增长率', type: 'line', yAxisIndex: 1, - data: [80, 81, 78, 67, 65, 60, 56, 51, 45], + data: [ 70,75, 80, 85, 90], itemStyle: { - color: '#409EFF' - } - } - ] + color: '#409EFF', + }, + }, + ], } as EChartsOption); chart.value = barChart; } diff --git a/src/views/dashboard/components/Chart/PieChart.vue b/src/views/dashboard/components/Chart/PieChart.vue index 8011b164..2ad159f5 100644 --- a/src/views/dashboard/components/Chart/PieChart.vue +++ b/src/views/dashboard/components/Chart/PieChart.vue @@ -70,7 +70,7 @@ function initChart() { center: ['50%', '50%'], roseType: 'area', itemStyle: { - borderRadius: 6, + borderRadius: 1, color: function (params: any) { //自定义颜色 const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];