vue脚手架开发+Echarts基础图表实现模拟数据的动态展示

最新推荐文章于 2022-12-01 20:25:39 发布

不就是个div嘛

最新推荐文章于 2022-12-01 20:25:39 发布

阅读量526

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts 前端小白文章标签： vue.js

本文链接：https://blog.csdn.net/m0_48940868/article/details/111875837

本文旨在通过Vue.js实现Echarts图表的动态数据展示，讲解如何利用vue模板语法渲染数据，并探讨Echarts中点击数据块的排他算法及动态参数指标变化。同时，分享了在mounted钩子中初始化Echarts图表的关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习目标：

更加熟练地使用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"><