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

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

        npm i echarts

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

<template>
    <view class="content">
        <view style="width:100%; height:750rpx;background-color: aqua;">
            <l-echart ref="chartRef"></l-echart>
        </view>
    </view>
</template>
 
<script setup>
import { ref,onMounted } from 'vue'
import * as echarts from 'echarts'
 
// 获取容器的dom元素
const chartRef = ref(null)
// echart图表的配置信息
const Options = ref({})
 
onMounted(()=>{
    addPie()
})
 
// 加载饼图结构
const addPie = async () => {
    const MyPie = await chartRef.value.init(echarts)
    Options.value = {
        title:{
            text:'支出构成',
            left:"center",
            top:"10rpx"
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            top:"5%",
            left: 'left',
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    }
    MyPie.setOption(Options.value)
}
 
</script>
 
<style scoped>
    .content {
        width: 100vw;
        height: 100vh;
    }
</style>