vue动态统计图的绘画

最新推荐文章于 2024-09-11 22:09:42 发布

似璟如你

最新推荐文章于 2024-09-11 22:09:42 发布

阅读量376

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cfjbcg/article/details/142033626

版权

效果图：

实现：

一、导入依赖

import echarts from 'echarts'

二、vue的代码实现

1.在main.js导入文件

// 引入 echarts 插件
import echarts from 'echarts'
// 配置成全局组件
Vue.prototype.$echarts = echarts

2.代码实现

<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 50%;height: 100%">运营统计</div>
</template>
<script>
    export default {
        name: 'zhexiantu',
        data() {
            return {
                charts: '',
                //数据1
                opinionData1: [],
                //x轴
                age:[0,10,24,40,60,80,100],
                
            }
        },
        created() {
            //页面加载进行获取数据
            this.getUserData();
            
        },
        methods: {
            getUserData(){
                this.$axios.post(
                    //请求路径
                    "/patient/selectAgeCount",
                    {
                        ages:this.age 
                    }
                ).then((res) => {
                    //赋值给y轴
                    this.opinionData1 = res.data;
                    //调用函数
                    this.$nextTick(function() {
                        //画div为main的数据
                        this.drawLine('main')
                    })
                }).catch(function(error) {
                    console.log(error);
                });

            },
            drawLine(id) {
                //初始化数据
                this.charts = this.$echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title: {
                        text: '用户注册年龄统计图'
                    },
                    //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据
                    tooltip: {
                        trigger: 'axis'
                    },
                    //所选项
                    legend: {
                        data: ['用户']
                    },
                    //布局样式
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    //下载图片按钮
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    //x轴
                    xAxis: {
                        name: '(年龄)',
                        type: 'category',
                        boundaryGap: false,
                        data: this.age

                    },
                    //y轴
                    yAxis: {
                        name: '人数',
                        type: 'value',
                    },
                    series: [
                        {
                            name: '用户',
                            type: 'line',
                            stack: '总人数',
                            data: this.opinionData1
                        }
                    ]
                })
            }
        },

    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>