1. 直接引入echarts (安装echarts项目依赖)
    npm install echarts --save
    //或者
    npm install echarts -S
    
  2. 全局引入(我们安装完成之后,可以在 main.js全局引入 echarts)
    import echarts from "echarts";
    Vue.prototype.$echarts = echarts;
    
  3. 举例饼图
    在这里插入图片描述
    <el-row :gutter="20">
        <el-col :span="12">
           <el-card header="车辆类型统计" style="font-weight: bold;">
                <div ref="myEchart1" style="height: 350px;">
                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card header="车辆出租状态统计" style="font-weight: bold;">
                <div ref="myEchart2" style="height: 350px;">
                </div>
            </el-card>
        </el-col>
    </el-row>
    
     //车辆类型统计
    initChart1(typeTitle, typeData) {
        let app = this;
        let myChart = app.$echarts.init(this.$refs.myEchart1);
    
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: typeTitle
            },
            series: [
                {
                    name: '车辆类型统计',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: typeData
                }
            ]
        };
        myChart.setOption(option);
    },
    //车辆出租状态统计
    initChart2(num1, num2, num3) {
        let app = this;
        let myChart = app.$echarts.init(this.$refs.myEchart2);
    
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                bottom: 10,
                left: 'center',
                data: ['已出租', '未出租', '已预约']
            },
            series: [
                {
                    name: '车辆出租状态',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '40%'],
                    data: [
                        {value: num1, name: '已出租'},
                        {value: num2, name: '未出租'},
                        {value: num3, name: '已预约'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    },
    
    获取数据函数
      //获取统计图数据
    queryStatisticData(formData) {
        let app = this;
        app.$Api.queryStatisticData(formData, function (result) {
            var carStatus1 = result.car1;
            var carStatus2 = result.car2;
            var carStatus3 = result.car3;
            app.initChart2(carStatus1, carStatus2, carStatus3);
            app.carTypes = result.carTypes;
            app.carTypeNum = result.carTypeNum;
    
            var typeTitle = [];
            var typeData = [];
            for (var i = 0; i < app.carTypes.length; i++) {
                var itemArr = {
                    value: app.carTypeNum[i],
                    name: app.carTypes[i]
                };
                typeData.push(itemArr);
    
                typeTitle.push(app.carTypes[i]);
            }
            app.initChart1(typeTitle, typeData);
        })
    },
    
    在mounted中加载queryStatisticData函数即可向后端索取数据实现饼图显示
Logo

前往低代码交流专区

更多推荐