如何在Vue中插入echarts图表
vue中插入echarts表格和普通的html页面非常不一样，因为vue自身是携带echarts插件的。再加上vue具有生命周期的概念，页面加载之前、页面加载中都有不一样的函数来实现，因此加载一个echarts图需要在多个地方联合实现！1、<template>中添加echarts容器首先，需要在<template>中注明将echarts图片插入到哪个div容器中：<div class="box-b
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过程图
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)