vue中插入echarts表格和普通的html页面非常不一样,因为vue自身是携带echarts插件的。再加上vue具有生命周期的概念,页面加载之前、页面加载中都有不一样的函数来实现,因此加载一个echarts图需要在多个地方联合实现!

1、<template>中添加echarts容器

首先,需要在<template>中注明将echarts图片插入到哪个div容器中:

<div class="box-body chart-responsive  box-style ">
    <center>
         <div class="validFile" id="validFile"></div>
       </center>
</div>

将这个表示有效文件分析的echarts图片放到了id为validFile的容器中,但是并不去实现这个echarts图。

2、<script>中添加echarts的option参数,以及加载函数

  • 首先需要引入echarts
var echarts=require('echarts');
  • 在data中声明相应的option变量、以及代表图片的变量名
//检测项目有效文件成分的eharts图片的两个变量
   validFileOption: {},
   validFilePie:'',

其中,validFileOption表示这个echarts图的data, series, legend等变量的实现;
validFilePie代表这个echarts图变量,方便后面在函数中加载option变量。

  • 在created中实现option
    如下就是在created中添加有效文件分析的option部分:
//有效文件,pie
            vm.validFileOption = {
                title: {
                    x: 'center',
                    text: '检测项目有效文件分析',
                    subtext: 'Effective document analysis',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                calculable: false,
                series: [{
                        name: '文件类型',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, 55],

                        // for funnel
                        x: '20%',
                        width: '40%',
                        funnelAlign: 'right',
                        max: '',

                        itemStyle: {
                            normal: {
                                label: {
                                    position: 'inner'
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        data: [

                            {
                                value: '',
                                name: '有效文件',
                                selected: true
                            },
                            {
                                value: '',
                                name: '非有效文件'
                            },
                        ]
                    },
                    {
                        name: '文件类型',
                        type: 'pie',
                        radius: [80, 120],

                        // for funnel
                        x: '60%',
                        width: '35%',
                        funnelAlign: 'left',
                        max: '',

                        data: [{
                            value: '',
                            name: ''
                        }, ]
                    }
                ]
            };

从上面这些代码中,发现每一个echarts图片都有一些属性:title, legend, series,…其中legend表示图例信息,title表示图名,series表示图中具体数据信息,series中的data属性就表示数据项和内容,常常需要动态传入某个值。

  • 在ready中加载初始化echarts图片的函数,以及获取具体数据的函数
    ready是vue生命周期中的一个准备阶段,很多函数都需要在这里加载,才能够在页面跳转时展现出来。
ready: function() {

            var vm = this;
            vm.graphs();
            vm.initdata();

            vm.getProjectInfo();
            vm.getLanguageInfo();

        },

其中,graphs()函数就是初始化echarts的函数,而getProjectInfo()和getLanguageInfo()这两个函数是获取动态数据的,这样就可以将echarts中的数据填充。

  • 在methods中实现ready中加载的函数
    methods里面主要是函数的具体实现:
    (1) graphs函数实现
           graphs() {
                var vm = this;
                vm.languageBar = echarts.init(document.getElementById("taskLanguage"));
                vm.validFilePie = echarts.init(document.getElementById("validFile"));

            },

上述代码中,主要实现了graphs()函数,即通过init初始化函数,将doc中的元素和表示echarts图片的变量validFilePie进行绑定。

(2) getProjectInfo函数实现

getProjectInfo() {
                var vm = this;
                var param = {
                    "id": 1
                };

                $.ajax({
                    type: 'GET',
                    dataType: "json",
                    url: '/api/mock/1/info',
                    cache: false,
                    data: '',
                    success: function(data) {
                        console.log(data);
                        var json = data;

                        //根据API文档,只有status是0,才表示返回值正常
                        if (json.status == 0) {

                            var info = json.info;
                            vm.name = info.name;
                            vm.create_time = info.create_time;
                            vm.finish_time = info.finish_time;
                            vm.language = info.language;
                            vm.license = info.license;
                            vm.line_num = info.line_num;
                            vm.all_size = info.all_size;
                            vm.valid_size = info.valid_size;
                            vm.all_files = info.all_files;
                            vm.valid_files = info.valid_files;

                        }
                    }
                })


            },

在getProjectInfo函数中,通过ajax向后台请求项目有关信息,并返回json数据,返回前台。

(3) getLanguageInfo函数实现

            var vm = this;
            var param = {
                "id": 1
            };

            $.ajax({
                type: 'GET',
                dataType: "json",
                url: '/api/mock/1/language',
                cache: false,
                data: '',
                success: function(data) {
                    console.log(data);
                    var json = data;

                    //根据API文档,只有status是0,才表示返回值正常
                    if (json.status == 0) {

                        var info = json.info;

                        //自己造数据:
                        info = [

                            {
                                language: "java",
                                language_ext: [".java", ".class", ".jar"],
                                language_files: 288,
                                language_percent: 87.53,
                                flag: 0,
                            },

                            {
                                language: "c++",
                                language_ext: [".cpp", ".h", ".c"],
                                language_files: 20,
                                language_percent: 6.08,
                                flag: 0,
                            },

                            {
                                language: "javascript",
                                language_ext: [".js"],
                                language_files: 15,
                                language_percent: 4.56,
                                flag: 0,
                            },

                            {
                                language: "其他",
                                language_ext: ["未知"],
                                language_files: 6,
                                language_percent: 1.82,
                                flag: 0,
                            }

                        ];

                        //针对有效文件分析
                        var validFilesGraph_index = new Array(info.length);
                        var validFilesGraph_data = new Array(info.length);

                        for (var i = 0; i < info.length; i++) {

                            validFilesGraph_data[i] = {
                                value: parseInt(info[i].language_files),
                                name: info[i].language
                            };
                            validFilesGraph_index[i] = info[i].language;
                        }


                        //图形相关--检测项目有效文件分析pie--有效文件和其它文件  
                        var valid_files_num = vm.valid_files;
                        var other_files_num = (vm.all_files - vm.valid_files);
                        var validFile_inner_data = [{
                                value: valid_files_num,
                                name: '有效文件',
                                selected: true
                            },
                            {
                                value: other_files_num,
                                name: '非有效文件'
                            },
                        ];


                        vm.validFileOption.series[1].data = validFilesGraph_data;
                        vm.validFileOption.series[0].data = validFile_inner_data;
                        vm.validFileOption.legend.data = validFilesGraph_index;
                        vm.validFilePie.setOption(vm.validFileOption);

                    }
                }
            })

在上述代码中,也是通过ajax请求后台返回json数据,并将其进行解析。
其中,validFilesGraph_index,validFilesGraph_data是两个数组,它们分别表示了echarts的option中的legend图例信息,以及series中的data信息。
由于这个有效文件成分分析图由内部的饼图,以及外部的环图构成,所以series有两组元素。而validFile_inner_data就表示内层饼状图的数据,validFilesGraph_data就表示外层环状图的数据。通过option进行赋值,然后将option设置给validFilePie,这样就实现了echarts图片的动态生成。

3、最后生成的echarts图片,以及总结
  • 总结
    1 在data中声明echarts图片变量,以及option变量
    2 在created中实现echarts的option变量
    3 在ready中加载初始化图的函数:将echarts变量和doc元素绑定,以及加载获取图中数据的函数
    4 在method中实现这些函数:option和动态数据绑定,并将option和echarts变量绑定。

  • vue中加载echarts过程图
    vue中加载echarts图表

Logo

前往低代码交流专区

更多推荐