diff --git a/src/views/index.vue b/src/views/index.vue index 2ec479f..a783946 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -5,35 +5,59 @@

资源调查进度

- -
-

产品销售统计

-
-
-
-

用户分布比例

-
-
-
-

总用户数

+

总地块数

12,345

↑ 12% 同比

-

本月销售额

+

已调查数

¥ 456,789

↑ 8% 环比

+
+ +
-

活跃用户

+

待调查数

8,642

↓ 3% 环比

+
+

承包总金额

+

¥ 456,789

+

↑ 8% 环比

+
+
+ +
+
+

兑现总额

+

8,642

+

↓ 3% 环比

+
+
+

尚欠总额

+

¥ 456,789

+

↑ 8% 环比

+
+
+ +
+
+

年总收益

+

8,642

+

↓ 3% 环比

+
+
+

经营总面积

+

¥ 456,789

+

↑ 8% 环比

+
@@ -46,8 +70,7 @@ name: 'Dashboard', mounted() { this.initLineChart(); - this.initBarChart(); - this.initPieChart(); + }, methods: { initLineChart() { @@ -107,107 +130,6 @@ chart.resize(); }); }, - initBarChart() { - const chart = echarts.init(this.$refs.barChart); - const option = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - legend: { - data: ['2022', '2023'] - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'value' - }, - yAxis: { - type: 'category', - data: ['产品A', '产品B', '产品C', '产品D', '产品E'] - }, - series: [ - { - name: '2022', - type: 'bar', - data: [320, 302, 341, 374, 390], - itemStyle: { - color: '#91CC75' - } - }, - { - name: '2023', - type: 'bar', - data: [420, 432, 401, 454, 590], - itemStyle: { - color: '#5470C6' - } - } - ] - }; - chart.setOption(option); - window.addEventListener('resize', function() { - chart.resize(); - }); - }, - initPieChart() { - const chart = echarts.init(this.$refs.pieChart); - const option = { - tooltip: { - trigger: 'item' - }, - legend: { - orient: 'vertical', - right: 10, - top: 'center' - }, - series: [ - { - name: '用户分布', - type: 'pie', - radius: ['40%', '70%'], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: 10, - borderColor: '#fff', - borderWidth: 2 - }, - label: { - show: false, - position: 'center' - }, - emphasis: { - label: { - show: true, - fontSize: '18', - fontWeight: 'bold' - } - }, - labelLine: { - show: false - }, - data: [ - { value: 1048, name: '华北地区' }, - { value: 735, name: '华东地区' }, - { value: 580, name: '华南地区' }, - { value: 484, name: '西部地区' }, - { value: 300, name: '东北地区' } - ], - color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'] - } - ] - }; - chart.setOption(option); - window.addEventListener('resize', function() { - chart.resize(); - }); - } } };