ElementUI中使用ECharts

最新推荐文章于 2024-08-03 17:41:13 发布

永不满足的求知者

最新推荐文章于 2024-08-03 17:41:13 发布

阅读量1.3w

点赞数 6

分类专栏： Vue 前端 Element

本文链接：https://blog.csdn.net/qq_41154522/article/details/104615251

版权

前端同时被 3 个专栏收录

82 篇文章 2 订阅

订阅专栏

Vue

64 篇文章 3 订阅

订阅专栏

Element

29 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    直接引入echarts (安装echarts项目依赖)npm install echarts --save
//或者
npm install echarts -S
 
全局引入(我们安装完成之后，可以在 main.js 中全局引入 echarts)import echarts from "echarts";
Vue.prototype.$echarts = echarts;
 
举例饼图
 <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函数即可向后端索取数据实现饼图显示

                