如何在Vue中插入echarts图表

    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过程图