From 67e9069adf484f02ff89fefd30ae4b41cc81929f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com> Date: Wed, 10 May 2023 11:51:56 +0800 Subject: [PATCH] =?UTF-8?q?ui=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/BarChart.vue | 60 +++++++++++++------------------ src/views/dashboard/LineChart.vue | 53 ++++++++++++++------------- src/views/index_v1.vue | 13 +++++-- src/views/system/role/index.vue | 9 ++++- 4 files changed, 72 insertions(+), 63 deletions(-) diff --git a/src/views/dashboard/BarChart.vue b/src/views/dashboard/BarChart.vue index 2b8e344..91335e0 100644 --- a/src/views/dashboard/BarChart.vue +++ b/src/views/dashboard/BarChart.vue @@ -10,16 +10,16 @@ const animationDuration = 6000 const props = defineProps({ className: { type: String, - default: 'chart', + default: 'chart' }, width: { type: String, - default: '100%', + default: '100%' }, height: { type: String, - default: '300px', - }, + default: '300px' + } }) function initChart() { chart = echarts.init(proxy.$refs.chartRef, 'macarons') @@ -29,59 +29,49 @@ function initChart() { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 - type: 'shadow', // 默认为直线,可选为:'line' | 'shadow' - }, + type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' + } + }, + title: { + text: 'echats标题' }, grid: { - top: 10, + top: 60, left: '2%', right: '2%', bottom: '3%', - containLabel: true, + containLabel: true }, xAxis: [ { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], axisTick: { - alignWithLabel: true, - }, - }, + alignWithLabel: true + } + } ], yAxis: [ { type: 'value', axisTick: { - show: false, - }, - }, + show: false + } + } ], series: [ { - name: 'pageA', + name: '销量', type: 'bar', stack: 'vistors', - barWidth: '60%', + barWidth: '40%', data: [79, 52, 200, 334, 390, 330, 220], animationDuration, - }, - { - name: 'pageB', - type: 'bar', - stack: 'vistors', - barWidth: '60%', - data: [80, 52, 200, 334, 390, 330, 220], - animationDuration, - }, - { - name: 'pageC', - type: 'bar', - stack: 'vistors', - barWidth: '60%', - data: [30, 52, 200, 334, 390, 330, 220], - animationDuration, - }, - ], + label: { + show: true + } + } + ] }) } onMounted(() => { diff --git a/src/views/dashboard/LineChart.vue b/src/views/dashboard/LineChart.vue index 54ac971..24db883 100644 --- a/src/views/dashboard/LineChart.vue +++ b/src/views/dashboard/LineChart.vue @@ -9,24 +9,24 @@ const chartRef = ref(null) const props = defineProps({ className: { type: String, - default: 'chart', + default: 'chart' }, width: { type: String, - default: '100%', + default: '100%' }, height: { type: String, - default: '350px', + default: '350px' }, autoResize: { type: Boolean, - default: true, + default: true }, chartData: { type: Object, - required: true, - }, + required: true + } }) let chart = null watch( @@ -34,7 +34,7 @@ watch( (val) => { setOptions(val) }, - { deep: true }, + { deep: true } ) function setOptions({ expectedData, actualData } = {}) { @@ -43,30 +43,33 @@ function setOptions({ expectedData, actualData } = {}) { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], boundaryGap: false, axisTick: { - show: false, - }, + show: false + } + }, + title: { + text: '图标测试数据' }, grid: { left: 10, right: 10, bottom: 20, - top: 30, - containLabel: true, + top: 60, + containLabel: true }, tooltip: { trigger: 'axis', axisPointer: { - type: 'cross', + type: 'cross' }, - padding: [5, 10], + padding: [5, 10] }, yAxis: { axisTick: { - show: false, - }, + show: false + } }, legend: { - data: ['expected', 'actual'], + data: ['expected', 'actual'] }, series: [ { @@ -75,14 +78,14 @@ function setOptions({ expectedData, actualData } = {}) { color: '#FF005A', lineStyle: { color: '#FF005A', - width: 2, - }, + width: 2 + } }, smooth: true, type: 'line', data: expectedData, animationDuration: 2800, - animationEasing: 'cubicInOut', + animationEasing: 'cubicInOut' }, { name: 'actual', @@ -91,18 +94,18 @@ function setOptions({ expectedData, actualData } = {}) { itemStyle: { color: '#3888fa', areaStyle: { - color: '#f3f8ff', + color: '#f3f8ff' }, lineStyle: { color: '#3888fa', - width: 2, - }, + width: 2 + } }, data: actualData, animationDuration: 2800, - animationEasing: 'quadraticOut', - }, - ], + animationEasing: 'quadraticOut' + } + ] }) } function initChart() { diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue index 9a4de74..efd7d77 100644 --- a/src/views/index_v1.vue +++ b/src/views/index_v1.vue @@ -27,7 +27,7 @@ - +