首页 > 资讯 > 前端开发 > JavaScript >Vueecharts封装组件需求分析与实现

116

分享到

Vueecharts封装组件需求分析与实现

Vue echarts Vue echarts封装组件 2022-11-13 18:11:24 116人浏览八月长安

摘要

目录1.需求分析2.结构3.代码4.结果原生echarts1.代码2.区别3.结果1.需求分析本次需求是绘制多个折线图描述服务器状态信息。因此都是折线图，样式类似，因此考虑Vue-

1.需求分析

本次需求是绘制多个折线图描述服务器状态信息。因此都是折线图，样式类似，因此考虑Vue-echarts 进行一个配置option多个图表。

2.结构

前端向后端请求数据(key,val)数组(分别对应x轴、y轴)，具体到代码里就是结构体obj的两个属性keys，vals
前端使用vue-echarts进行option配置相关参数，具体见代码。

3.代码

<template>
  <v-chart class="chart" :option="option" />
  <el-button class="myBtn" type="primary" @click="randomData"
    >随机数据</el-button
  >
</template>
<script>
// 导入相关组件
import { use } from "echarts/core";
import { canvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";
import { Reactive } from "vue";
import { ElButton } from "element-plus";
use([
  GridComponent,
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
//从后端取出数据
// import { getData } from "../utils/getChart";
// var obj = await getData();
// //console.log(obj);
// let n = obj.keys.length;
// var ans = Array(n); //作于 series.data
// for (var i = 0; i < n; i++) {
//   ans[i] = new Array(2);
//   ans[i] = [obj.keys[i], obj.vals[i]];
// }
var obj = {
  keys: ["10:09:03", "10:09:06", "10:09:09", "10:09:12", "10:09:15"],
  vals: [39.12, 23.76, 22.79, 30.57, 31.84],
};
let n = 5;
var ans = Array(n);
for (var i = 0; i < n; i++) {
  ans[i] = new Array(2);
  ans[i] = [obj.keys[i], obj.vals[i]];
}
export default defineComponent({
  name: "ChartInfo",
  components: {
    //使用到的图表组件
    ElButton,
    VChart,
  },
  provide: {
    [THEME_KEY]: "white", //设置主题
  },
  setup() {
    //启动函数
    //动态生成数据ans,双向绑定
    const myData = reactive(ans);
    //随机生成数据
    function randomData() {
      let mx = 30.0;
      let mn = 1.0;
      for (var i = 0; i < n; i++) {
        myData[i][1] = Math.random() * (mx - mn) + mn;
      }
      //console.log("random:", myData);
    }
    //配置option
    const option = ref({
      //由grid控制各个图表，x，y为与左上角顶点的距离，控制各个图表的位置及大小
      grid: [
        { left: "10%", top: "6%", width: "80%", height: "20%" },
        { left: "10%", top: "41%", width: "80%", height: "20%" },
        { left: "10%", y: "76%", width: "80%", height: "20%" },
      ],
      title: [
        { text: "最近5个时刻的cpu使用率" },
        { text: "最近5个时刻的mem使用率", top: "35%" },
        { text: "最近5个时刻的load使用率", top: "70%" },
      ],
      // tooltip: {
      //   //提示框配置
      //   trigger: "axis",
      //   fORMatter: "{a} <br/>{b} : {c}",
      // },
      // legend: {
      //   //图例组件
      //   orient: "vertical",
      //   left: "left",
      // },
      xAxis: [
        {
          gridIndex: 0,
          data: obj.keys,
        },
        {
          gridIndex: 1,
          data: obj.keys,
        },
        {
          gridIndex: 2,
          data: obj.keys,
        },
      ],
      // xAxis: {
      //   type: "cateGory",
      //   data: obj.keys, //keys是x轴
      // },
      yAxis: [
        //minInterval控制最小间隔，不设置的话会有小数，同样由gridIndex绑定各个图表
        { gridIndex: 0, minInterval: 1 },
        { gridIndex: 1, minInterval: 1 },
        { gridIndex: 2, minInterval: 1 },
      ],
      series: [
        //系列选择pie,进行相关数据配置
        {
          xAxisIndex: 0,
          yAxisIndex: 0,
          name: "cpu使用率",
          type: "line",
          radius: "55%",
          center: ["50%", "60%"],
          data: myData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        {
          xAxisIndex: 1,
          yAxisIndex: 1,
          name: "mem使用率",
          type: "line",
          radius: "55%",
          center: ["50%", "60%"],
          data: myData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        {
          xAxisIndex: 2,
          yAxisIndex: 2,
          name: "load使用率",
          type: "line",
          radius: "55%",
          center: ["50%", "60%"],
          data: myData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
    return { option, randomData };
  },
});
</script>
<style scoped>
.chart {
  
  height: 600px;
  margin-top: 30px;
}
.myBtn {
  margin-top: 10px;
}
</style>

4.结果

原生echarts

上文是基于vue-echarts 依赖的，在使用一段时间后，发现该模块对于异步请求数据不是很友好qwq，所以我换回了原生的echarts。

思路与前面完全一样，只是模块换成了原生的echarts。

1.代码

<template>
  <div id="chart"></div>
  <!-- <v-chart class="chart" :option="option" /> -->
  <el-button class="myBtn" type="primary" @click="randomData"
    >随机数据</el-button
  >
</template>
<script>
import { ref, defineComponent, onMounted } from "vue";
import { reactive } from "vue";
import { ElButton } from "element-plus";
import { getData } from "../utils/getChart";
import * as echarts from "echarts";
export default defineComponent({
  name: "ChartInfo",
  props: ["id"],
  components: {
    //使用到的图表组件
    ElButton,
  },
  setup(props) {
    //props 为子组件介绍父组件的参数,这里是路由props的参数
    //启动函数
    let obj = reactive({
      cpu: [],
      mem: [],
    });
    let ans_1 = reactive([]);
    let ans_2 = reactive([]);
    let option = reactive({});
    function myformatter(value, index) {
      if (value) {
        let date = new Date(value * 1000); // 时间戳为秒：10位数
        //let date = new Date(value)    // 时间戳为毫秒：13位数
        let year = date.getFullYear();
        let month =
          date.getMonth() + 1 < 10
            ? `0${date.getMonth() + 1}`
            : date.getMonth() + 1;
        let day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
        let hour =
          date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
        let minute =
          date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
        let second =
          date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
        return `${hour}:${minute}:${second}`;
        //return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      } else {
        return "";
      }
    }
    onMounted(async () => {
      let obj = await getData(props.id).catch((err) => {
        console.log(err);
      });
      console.log("res", obj);
      let x_arr = new Array(3);
      let res_arr = new Array(3);
      let n0 = obj.cpu.length;
      for (var i = 0; i < n0; i++) obj.cpu[i].key = myformatter(obj.cpu[i].key);
      x_arr[0] = new Array(n0);
      res_arr[0] = new Array(n0);
      for (var i = 0; i < n0; i++) {
        x_arr[0][i] = obj.cpu[i].key;
        res_arr[0][i] = [obj.cpu[i].key, obj.cpu[i].val];
      }
      console.log(res_arr[0]);
      var n1 = obj.mem.length;
      for (var i = 0; i < n1; i++) obj.mem[i].key = myformatter(obj.mem[i].key);
      x_arr[1] = new Array(n1);
      res_arr[1] = new Array(n1);
      for (var i = 0; i < n1; i++) {
        x_arr[1][i] = obj.mem[i].key;
        res_arr[1][i] = [obj.mem[i].key, obj.mem[i].val];
      }
      var n2 = obj.mem.length;
      x_arr[2] = new Array(n2);
      res_arr[2] = new Array(n2);
      for (var i = 0; i < n2; i++) {
        x_arr[2][i] = obj.mem[i].key;
        res_arr[2][i] = [obj.mem[i].key, obj.mem[i].val];
      }
      ans_1.push(...x_arr);
      ans_2.push(...res_arr);
      var myChart = echarts.init(document.getElementById("chart"));
      option = reactive({
        //由grid控制各个图表，x，y为与左上角顶点的距离，控制各个图表的位置及大小
        grid: [
          { left: "10%", top: "6%", width: "80%", height: "20%" },
          { left: "10%", top: "41%", width: "80%", height: "20%" },
          { left: "10%", y: "76%", width: "80%", height: "20%" },
        ],
        title: [
          { text: "最近5个时刻的cpu使用率" },
          { text: "最近5个时刻的mem使用率", top: "35%" },
          { text: "最近5个时刻的load使用率", top: "70%" },
        ],
        // tooltip: {
        //   //提示框配置
        //   trigger: "axis",
        //   formatter: "{a} <br/>{b} : {c}",
        // },
        // legend: {
        //   //图例组件
        //   orient: "vertical",
        //   left: "left",
        // },
        xAxis: [
          {
            gridIndex: 0,
            data: ans_1[0],
          },
          {
            gridIndex: 1,
            data: ans_1[1],
            // axisLabel: {
            //   formatter: myformatter,
            // },
          },
          {
            gridIndex: 2,
            data: ans_1[2],
            // axisLabel: {
            //   formatter: myformatter,
            // },
          },
        ],
        // xAxis: {
        //   type: "category",
        //   data: obj.keys, //keys是x轴
        // },
        yAxis: [
          //minInterval控制最小间隔，不设置的话会有小数，同样由gridIndex绑定各个图表
          { gridIndex: 0, minInterval: 1 },
          { gridIndex: 1, minInterval: 1 },
          { gridIndex: 2, minInterval: 1 },
        ],
        series: [
          //系列选择pie,进行相关数据配置
          {
            xAxisIndex: 0,
            yAxisIndex: 0,
            name: "cpu使用率",
            type: "line",
            radius: "55%",
            center: ["50%", "60%"],
            data: ans_2[0],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          {
            xAxisIndex: 1,
            yAxisIndex: 1,
            name: "mem使用率",
            type: "line",
            radius: "55%",
            center: ["50%", "60%"],
            data: ans_2[1],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          {
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: "load使用率",
            type: "line",
            radius: "55%",
            center: ["50%", "60%"],
            data: ans_2[2],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      myChart.setOption(option);
    });
    //随机生成数据
    function randomData() {
      // for (var i = 0; i < 3; i++) {
      //   option.series[i].data = ans_2[i];
      //   option.xAxis[i].data = ans_1[i];
      // }
      console.log("random test");
    }
    //配置option
    // let option = reactive({
    //   //由grid控制各个图表，x，y为与左上角顶点的距离，控制各个图表的位置及大小
    //   grid: [
    //     { left: "10%", top: "6%", width: "80%", height: "20%" },
    //     { left: "10%", top: "41%", width: "80%", height: "20%" },
    //     { left: "10%", y: "76%", width: "80%", height: "20%" },
    //   ],
    //   title: [
    //     { text: "最近5个时刻的cpu使用率" },
    //     { text: "最近5个时刻的mem使用率", top: "35%" },
    //     { text: "最近5个时刻的load使用率", top: "70%" },
    //   ],
    //   // tooltip: {
    //   //   //提示框配置
    //   //   trigger: "axis",
    //   //   formatter: "{a} <br/>{b} : {c}",
    //   // },
    //   // legend: {
    //   //   //图例组件
    //   //   orient: "vertical",
    //   //   left: "left",
    //   // },
    //   xAxis: [
    //     {
    //       gridIndex: 0,
    //       data: ans_1[0],
    //     },
    //     {
    //       gridIndex: 1,
    //       data: ans_1[1],
    //     },
    //     {
    //       gridIndex: 2,
    //       data: ans_1[2],
    //     },
    //   ],
    //   // xAxis: {
    //   //   type: "category",
    //   //   data: obj.keys, //keys是x轴
    //   // },
    //   yAxis: [
    //     //minInterval控制最小间隔，不设置的话会有小数，同样由gridIndex绑定各个图表
    //     { gridIndex: 0, minInterval: 1 },
    //     { gridIndex: 1, minInterval: 1 },
    //     { gridIndex: 2, minInterval: 1 },
    //   ],
    //   series: [
    //     //系列选择pie,进行相关数据配置
    //     {
    //       xAxisIndex: 0,
    //       yAxisIndex: 0,
    //       name: "cpu使用率",
    //       type: "line",
    //       radius: "55%",
    //       center: ["50%", "60%"],
    //       data: ans_2[0],
    //       emphasis: {
    //         itemStyle: {
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: "rgba(0, 0, 0, 0.5)",
    //         },
    //       },
    //     },
    //     {
    //       xAxisIndex: 1,
    //       yAxisIndex: 1,
    //       name: "mem使用率",
    //       type: "line",
    //       radius: "55%",
    //       center: ["50%", "60%"],
    //       data: ans_2[1],
    //       emphasis: {
    //         itemStyle: {
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: "rgba(0, 0, 0, 0.5)",
    //         },
    //       },
    //     },
    //     {
    //       xAxisIndex: 2,
    //       yAxisIndex: 2,
    //       name: "load使用率",
    //       type: "line",
    //       radius: "55%",
    //       center: ["50%", "60%"],
    //       data: ans_2[2],
    //       emphasis: {
    //         itemStyle: {
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: "rgba(0, 0, 0, 0.5)",
    //         },
    //       },
    //     },
    //   ],
    // });
    //console.log("dsda", obj);
    //动态生成数据ans,双向绑定
    //console.log(option);
    //console("tep", tep);
    return { ans_1, ans_2, randomData };
  },
});
</script>
<style scoped>
#chart {
  
  height: 600px;
  margin-top: 30px;
}
.myBtn {
  margin-top: 10px;
}
</style>

2.区别

使用原生的echarts就可以在onMounted钩子函数中执行异步请求，然后得到数据，然后通过原生dom操作获取图表元素。然后配置option。

var myChart = echarts.init(document.getElementById("chart"));
option = reactive({....})
myChart.setOption(option);

vue-echarts封装后的option配置得先获得数据就很蠢，在异步请求里获得数据后，往下操作数据可能是空得，这样导出setup函数导出option就可能有问题。

3.结果

到此这篇关于Vue eharts封装组件需求分析与实现的文章就介绍到这了,更多相关Vue eharts封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vueecharts封装组件需求分析与实现

本文链接: https://www.lsjlt.com/news/169771.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

京东一面：post为什么会发送两次请求？???

2024-01-12

鼠标划过时整行变色284607详解

2023-05-20

鼠标划过时整行变色284415处理办法

2023-05-20

TypeScript接口和类型的区别小结

2023-05-20

细说JS数组遍历的一些细节及实现

2023-05-20

深入浅出JavaScript前端中的设计模式

2023-05-20

初学者如何快速搭建Express开发系统步骤详解

2023-05-20

JavaScrip简单数据类型隐式转换的实现

2023-05-20

前端Website sitemap.xml文件搜索引擎优化

2023-05-20

vue使用Swiper踩坑解决避坑

2023-05-20

热门问答

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

Vueecharts封装组件需求分析与实现

目录

1.需求分析

2.结构

3.代码

4.结果

原生echarts

1.代码

2.区别

3.结果

本篇文章演示代码以及资料文档资料下载

Vueecharts封装组件需求分析与实现

vue封装组件js实例分析

VueEcharts实现图表轮播图以及图表组件封装和节流函数优化讲解

React Native开发封装Toast与加载Loading组件的示例分析

如何实现Vuejs页面的区域化与组件封装

React使用高阶组件与Hooks实现权限拦截教程详细分析

编写轻量ajax组件01-与webform平台上的各种实现方式比较的示例分析

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

细说JS数组遍历的一些细节及实现

深入浅出JavaScript前端中的设计模式

初学者如何快速搭建Express开发系统步骤详解

JavaScrip简单数据类型隐式转换的实现

前端Website sitemap.xml文件搜索引擎优化

vue使用Swiper踩坑解决避坑