uni-app使用echarts图表进行数据可视化展示

第一步：先打开终端，安装一个echarts

npm i echarts

第二步：echarts - DCloud 插件市场，点击这个链接，装一下这个插件！

 1 <template>
 2     <view class="content">
 3         <view style="width:100%; height:750rpx;background-color: aqua;">
 4             <l-echart ref="chartRef"></l-echart>
 5         </view>
 6     </view>
 7 </template>
 8  
 9 <script setup>
10 import { ref,onMounted } from 'vue'
11 import * as echarts from 'echarts'
12  
13 // 获取容器的dom元素
14 const chartRef = ref(null)
15 // echart图表的配置信息
16 const Options = ref({})
17  
18 onMounted(()=>{
19     addPie()
20 })
21  
22 // 加载饼图结构
23 const addPie = async () => {
24     const MyPie = await chartRef.value.init(echarts)
25     Options.value = {
26         title:{
27             text:'支出构成',
28             left:"center",
29             top:"10rpx"
30         },
31         tooltip: {
32             trigger: 'item'
33         },
34         legend: {
35             orient: 'vertical',
36             top:"5%",
37             left: 'left',
38         },
39         series: [
40             {
41                 name: 'Access From',
42                 type: 'pie',
43                 radius: ['40%', '70%'],
44                 avoidLabelOverlap: false,
45                 label: {
46                     show: false,
47                     position: 'center'
48                 },
49                 emphasis: {
50                     label: {
51                         show: true,
52                         fontSize: 10,
53                         fontWeight: 'bold'
54                     }
55                 },
56                 labelLine: {
57                     show: false
58                 },
59                 data: [
60                     { value: 1048, name: 'Search Engine' },
61                     { value: 735, name: 'Direct' },
62                     { value: 580, name: 'Email' },
63                     { value: 484, name: 'Union Ads' },
64                     { value: 300, name: 'Video Ads' }
65                 ]
66             }
67         ]
68     }
69     MyPie.setOption(Options.value)
70 }
71  
72 </script>
73  
74 <style scoped>
75     .content {
76         width: 100vw;
77         height: 100vh;
78     }
79 </style>