vue脚手架开发+Echarts基础图表 实现模拟数据的动态展示
学习目标：
更加熟练地使用vue模板语法渲染数据、熟练地运用Echarts来展示动态数据
原型图展示：
核心问题：
- 点击某个数据块，对应的CSS样式如何加上，而其他的样式不变，即：排他算法实现？
- 绿色框框部分如何实现参数指标的动态变化
- 遇到需要用索引判断的情况，如何变相地用双索引的方式来简化功能
上代码，不废话：
【tabs就不多说了，用的饿了么的el-tabs】
互联网专线结构
<div class="net_list">
每一个数据块div通过v-for 循环遍历 hulianwang 数组 渲染出来的
<div
这里就是变相地双索引的使用 boxactive 是放在data里面的一个假索引，初始为-1 ，
和真索引 index 初始化 0 自然不等，所以 active这个类自然不会渲染
:class="{ active: boxactive == index }"
这里通过定义实现Echarts的函数drawChart，来传参，把遍历的item的zhibiao_name属性传进去，然后再传一个index进去，
函数体用两个形参接收这两个实参，从而假索引就可以变成真索引
@click="drawChart(item.zhibiao_name, index)"
v-for="(item, index) in hulianwang"
:key="item.id" 用数据本身的id ，用index也可以，但是 有的文章说用自己的id稳当一点
>
<div style="margin-bottom: 15px">{
{ item.zhibiao_name }}div>
<i style="font-size: 22px; color: #409eff">{
{
item.zhibiao_num
}}i>
<div style="text-align: center; margin-top: 15px">
<span>阀值span><i class="el-icon-star-on">i>
<span>{
{ item.fazhi }}span>
div>
<div class="rTop" @click="handleMeaning">
<i class="el-icon-question">i>
div>
div>
div>
Echarts 绑定的两个dom
<div class="box">
<div style="padding: 10px 0 0 10px">
<div id="main1" style="width: 100%; height: 100%">div>
div>
<div style="padding: 10px 0 0 10px">
<div id="main2" style="width: 100%; height: 100%">div>
div>
div>
<div class="downLoad">
<span style="color: #409eff; font-size: 14px"
><i class="el-icon-download">i> 下载span
>
div>
JS部分：
data() {
return {
boxactive: -1,假索引 默认为-1
//互联网tab数据数组
hulianwang: [
{
id: 1,
zhibiao_name: "省网核心测试时延",
zhibiao_num: "0.86ms",
fazhi: ">3",
},
{
id: 2,
zhibiao_name: "省网测试核心丢包率",
zhibiao_num: "0.85ms",
fazhi: ">2",
},
{
id: 3,
zhibiao_name: "外省IDC测试时延",
zhibiao_num: "0.78ms",
fazhi: ">5",
},
{
id: 4,
zhibiao_name: "外省IDC测试丢包率",
zhibiao_num: "0.88ms",
fazhi: ">3",
},
{
id: 5,
zhibiao_name: "DNS解析时延",
zhibiao_num: "0.68ms",
fazhi: ">4",
},
{
id: 6,
zhibiao_name: "DNS解析成功率",
zhibiao_num: "0.85ms",
fazhi: ">3",
},
{
id: 7,
zhibiao_name: "城域网链路时延",
zhibiao_num: "0.88ms",
fazhi: ">4",
},
{
id: 8,
zhibiao_name: "城域网链路丢包率",
zhibiao_num: "0.88ms",
fazhi: ">3",
},
{
id: 9,
zhibiao_name: "CMNET省网链路利",
zhibiao_num: "0.83ms",
fazhi: ">3",
},
{
id: 10,
zhibiao_name: "IP城域网链路利用率",
zhibiao_num: "0.68ms",
fazhi: ">3",
},
{
id: 11,
zhibiao_name: "PON口利用率",
zhibiao_num: "0.88ms",
fazhi: ">5",
},
{
id: 12,
zhibiao_name: "OLT链路利用率",
zhibiao_num: "0.88ms",
fazhi: ">3",
},
]
}
}
methods里面的函数：
点击数据块，绑定的点击事件函数，两个形参来接收传过来的实参
drawChart(val, ii) {
this.boxactive = ii; 这里就是点睛之处， 让假索引变成真的 实现 排他思想
一个实参变成这里的 val 形参，下面就可以来使用它
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById("main1"));
let myChart2 = this.$echarts.init(document.getElementById("main2"));
// 指定图表的配置项和数据
let option1 = {
title: {
text: "XXXX集团-子公司1月专线" + val + "统计",
textStyle: {
color: "#409eff",
},
},
legend: {
bottom: 10,
data: [val],
},
xAxis: {
data: ["分公司1", "分公司2", "分公司3"],
},
yAxis: {
name: "时长：ms",
axisLine: {
show: false, 坐标轴刻度线隐藏
},
},
series: [
{
name: val,
type: "bar",
data: [
Math.random() * 1000, 用随机数实现数据的动态变化，有点自欺欺人，哈哈哈
Math.random() * 1000,
Math.random() * 1000,
],
},
],
};
let option2 = {
title: {
text: "XXXX集团1月" + val + "趋势",
textStyle: {
color: "#409eff",
},
},
legend: {
bottom: 10,
data: [val],
},
xAxis: {
type: "category",
data: [
"01-01",
"01-03",
"01-05",
"01-09",
"01-11",
"01-15",
"01-20",
"01-25",
"01-27",
"01-30",
],
},
yAxis: {
name: "时长：ms",
type: "value",
},
series: [
{
name: val,
data: [
400,
240,
410,
415,
Math.random() * 1000,
490,
510,
Math.random() * 1000,
753,
600,
],
type: "line",
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
myChart2.setOption(option2);
百度的方法，让图表渲染出来实现自适应屏幕，不过还是有点小bug
window.onresize = function () {
myChart1.resize();
myChart2.resize();
};
},
mounted 钩子：
**一定不要忘了，Echarts图表都要用这个钩子来渲染，跟vue生命周期、dom初始化完成有关。
mounted(val) {
this.drawChart("省网核心测试时延"); //默认显示它
},
好了，基本就是这样了，看完欢迎一键三连。