根据条件循环生成并模块化echarts图表

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量6 收藏
点赞数
文章标签： echarts javascript 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzy__007/article/details/139920778
版权
  • 此次将循环生成多个图表，每个图表根据条件展示不同的图表，并将echarts的每个配置项抽离出来，进行灵活配置。

1.循环生成echarts图表并根据条件生成不同的图表

1.1 准备需要展示图表的模型
<template>
  <div class="echarts-body">
    <div class="echarts-form"  v-for="item in 9" :key="item"></div>
  </div>
</template>

<script>
export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {};
  },

  computed: {},

  watch: {},
  created() {},

  methods: {},

  mounted() {},
};
</script> 

<style scoped lang="less">
.echarts-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .echarts-form{
    width: 32%;
    height: 32%;
    border: 1px solid rgba(151, 151, 151, 0.25);
  }
}
</style>
效果图
1.2 引入echarts并循环渲染图表
...
<script>
import * as echarts from "echarts";
export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {
      myChart: null, 
    };
  },

  computed: {},

  watch: {},
  created() {},

  methods: {
    echartsBody() {
      if (
        this.myChart !== null &&
        this.myChart !== "" &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose(); // 销毁
      }
      // const that = this
      // 获取
      // 基于准备好的dom，初始化echarts实例
      const dom = document.querySelectorAll(".echarts-form");
      Array.from(dom).map((x, index) => {
        this.myChart = echarts.init(x);
        this.myChart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          color: ['#a9df96','#ffe176'],
          series: [
            {
            name: "Precipitation",
            type: "bar",
            data: [150, 230, 224, 218, 135, 147, 260],
          },
          {
            name: "Temperature",
            type: "line",
            data: [150, 230, 224, 218, 135, 147, 260],
          },
          ]
        });
      });
    },
  },

  mounted() {
    this.echartsBody();
  },
};
</script> 
...
效果图
  • 到此为止，只是对容器进行了循环并渲染出图表，但9份图表一模一样，这不是想要的结果，本次是希望不同的条件/满足某些条件渲染出不同的图表，并且数据是独立的，每个容器相对于其他容器都是独立的。
  • 当然有很多办法可以实现，只是繁琐程度而已。
  • 如果在echarts内部写的话，限制很很大，只能使用其提供的回调函数，没办法写那么灵活，或者在循环时根据判断写多种类型的图表，其实不如把echarts的每个配置项抽离出来，将其模块化，根据需要输入不同的模块

2 抽离echarts图表配置项

2.1. 模块化处理
...
  methods: {
    // echarts 提示窗
    echartsTooltip() {
      return {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      };
    },
    // x轴
    echartsXaxis() {
      return {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      };
    },
    // y轴
    echartsYaxis() {
      return {
        type: "value",
      };
    },
    // 为了操作起来更方便将下面会将其拆开
    // // 数据/配置
    // echartsSeries() {
    //   return [
    //     {
    //       name: "Precipitation",
    //       type: "bar",
    //       data: [150, 230, 224, 218, 135, 147, 260],
    //     },
    //     {
    //       name: "Temperature",
    //       type: "line",
    //       data: [150, 230, 224, 218, 135, 147, 260],
    //     },
    //   ];
    // },
    // 数据/配置 bar
    echartsSeriesBar() {
      return  {
          name: "Temperature",
          type: "bar",
          data: [150, 230, 224, 218, 135, 147, 260],
          color: "#a9df96"
        }
    },
    // 数据/配置 line
    echartsSeriesLine() {
      return {
          name: "Temperature",
          type: "line",
          data: [150, 230, 224, 218, 135, 147, 260],
          color: "#ffe176"
        }
    },
    echartsBody() {
      if (
        this.myChart !== null &&
        this.myChart !== "" &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose(); // 销毁
      }
      // const that = this
      // 获取
      // 基于准备好的dom，初始化echarts实例
      const dom = document.querySelectorAll(".echarts-form");
      Array.from(dom).map((x, index) => {
        this.myChart = echarts.init(x);
        this.myChart.setOption({
          tooltip: this.echartsTooltip(),
          xAxis: this.echartsXaxis(),
          yAxis: this.echartsYaxis(),
          // series: this.echartsSeries(),
          series: [this.echartsSeriesBar(), this.echartsSeriesLine()],
        });
      });
    },
  },
...
效果图
  • 此时会发现将配置项抽离出来后，原来渲染的图表没有任何变化，还是可以正常展示。
  • 虽然模块化，但每个图表还不是独立的。
2.2 根据条件渲染不同的图表
  • 本次只改改数据与展示形式等，x,y轴等有兴趣可可以试试(随便改几个，大致写法没区别)
...
  methods: {
    // echarts 提示窗
    echartsTooltip() {
      return {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      };
    },
    // x轴
    echartsXaxis() {
      return {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      };
    },
    // y轴
    echartsYaxis() {
      return {
        type: "value",
      };
    },
    // 为了操作起来更方便将下面会将其拆开
    // // 数据/配置
    // echartsSeries() {
    //   return [
    //     {
    //       name: "Precipitation",
    //       type: "bar",
    //       data: [150, 230, 224, 218, 135, 147, 260],
    //     },
    //     {
    //       name: "Temperature",
    //       type: "line",
    //       data: [150, 230, 224, 218, 135, 147, 260],
    //     },
    //   ];
    // },
    // 数据/配置 bar
    echartsSeriesBar(index) {
      if (index !== 0 && index !== 8 && index !== 4) {
        return {
          name: "Temperature",
          type: "bar",
          data: [150, 230, 224, 218, 135, 147, 260],
          color: "#a9df96",
        };
      } else if (index === 4) {
      } else if (index === 8) {
        return {
          name: "Temperature",
          type: "bar",
          data: [15, 110, 144, 118, 235, 147, 260],
          color: "#b5b6e8 !important",
        };
      } else {
        return {
          name: "Temperature",
          type: "line",
          data: [100, 130, 184, 118, 135, 147, 160],
          color: "#ccc",
        };
      }
    },
    // 数据/配置 line
    echartsSeriesLine(index) {
      if (index === 5) {
        // 当满足条件可以做些图表之外的操作 改改数据  页面样式啥的
      } else {
        return {
          name: "Temperature",
          type: "line",
          data: [150, 230, 224, 218, 135, 147, 260],
          color: "#ffe176",
        };
      }
    },
    echartsBody() {
      if (
        this.myChart !== null &&
        this.myChart !== "" &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose(); // 销毁
      }
      // const that = this
      // 获取
      // 基于准备好的dom，初始化echarts实例
      const dom = document.querySelectorAll(".echarts-form");
      Array.from(dom).map((x, index) => {
        this.myChart = echarts.init(x);
        this.myChart.setOption({
          tooltip: this.echartsTooltip(),
          xAxis: this.echartsXaxis(),
          yAxis: this.echartsYaxis(),
          // series: this.echartsSeries(),
          series: [this.echartsSeriesBar(index), this.echartsSeriesLine(index)],
        });
      });
    },
  },
...
效果图
  • 通过传入的索引值进行判断，当满足条件时输出不一样的图表。

3 完整代码

<template>
  <div class="echarts-body">
    <div class="echarts-form" v-for="item in 9" :key="item"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {};
  },

  computed: {},

  watch: {},
  created() {},

  methods: {
    // echarts 提示窗
    echartsTooltip() {
      return {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      };
    },
    // x轴
    echartsXaxis() {
      return {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      };
    },
    // y轴
    echartsYaxis() {
      return {
        type: "value",
      };
    },
    // 为了操作起来更方便将下面会将其拆开
    // // 数据/配置
    // echartsSeries() {
    //   return [
    //     {
    //       name: "Precipitation",
    //       type: "bar",
    //       data: [150, 230, 224, 218, 135, 147, 260],
    //     },
    //     {
    //       name: "Temperature",
    //       type: "line",
    //       data: [150, 230, 224, 218, 135, 147, 260],
    //     },
    //   ];
    // },
    // 数据/配置 bar
    echartsSeriesBar(index) {
      if (index !== 0 && index !== 8 && index !== 4) {
        return {
          name: "Temperature",
          type: "bar",
          data: [150, 230, 224, 218, 135, 147, 260],
          color: "#a9df96",
        };
      } else if (index === 4) {
      } else if (index === 8) {
        return {
          name: "Temperature",
          type: "bar",
          data: [15, 110, 144, 118, 235, 147, 260],
          color: "#b5b6e8 !important",
        };
      } else {
        return {
          name: "Temperature",
          type: "line",
          data: [100, 130, 184, 118, 135, 147, 160],
          color: "#ccc",
        };
      }
    },
    // 数据/配置 line
    echartsSeriesLine(index) {
      if (index === 5) {
        // 当满足条件可以做些图表之外的操作 改改数据  页面样式啥的
      } else {
        return {
          name: "Temperature",
          type: "line",
          data: [150, 230, 224, 218, 135, 147, 260],
          color: "#ffe176",
        };
      }
    },
    echartsBody() {
      if (
        this.myChart !== null &&
        this.myChart !== "" &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose(); // 销毁
      }
      // const that = this
      // 获取
      // 基于准备好的dom，初始化echarts实例
      const dom = document.querySelectorAll(".echarts-form");
      Array.from(dom).map((x, index) => {
        this.myChart = echarts.init(x);
        this.myChart.setOption({
          tooltip: this.echartsTooltip(),
          xAxis: this.echartsXaxis(),
          yAxis: this.echartsYaxis(),
          // series: this.echartsSeries(),
          series: [this.echartsSeriesBar(index), this.echartsSeriesLine(index)],
        });
      });
    },
  },

  mounted() {
    this.echartsBody();
  },
};
</script> 

<style scoped lang="less">
.echarts-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .echarts-form {
    width: 32%;
    height: 32%;
    border: 1px solid rgba(151, 151, 151, 0.25);
  }
}
</style>
许......
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[Python从零到壹] 十七.可视化分析之Matplotlib、Pandas、Echarts入门万字详解
杨秀璋的专栏
08-24 3万+
前一篇文章讲述了数据预处理、Jieba分词和文本聚类知识，这篇文章主要介绍Matplotlib和Pandas扩展包绘图的基础用法，同时引入Echarts技术，该技术主要应用于网站可视化展示中。本文内容以实例为主，给读者最直观的图形感受。两万字基础文章，希望对您有所帮助。
Python获取微信好友地址以及性别并生成可视化图表
慕公子的博客
05-13 1266
使用python批量获取微信好友地址，需要使用itchat库，这个库是用的网页版微信的接口进行数据获取的。所以你想测试这个功能必须要你的微信能够登录网页版微信。（之前的itchat-uos模块使用了统信版的接口绕过了腾讯的检测，所有的微信都能正常使用，但是最近这个接口被腾讯封杀了）如果你的微信是在2017年还是2018年？之前注册的，登录微信文件传输助手网页版之后传输一个文件之后再打开微信网页版就能直接登录了。（最近两年注册的新微信可能不适用！） ...
数据可视化 - Echarts图表
Henry_ID的博客
09-01 2958
可视化项目 01-项目介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。 ​ 该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 … 线上地址：http://mylovebase.gitee.io/my-view-project/ 代码仓库：https
循环生成多个图表,根据条件展示不同的图表
......
07-10 678
【代码】循环生成多个图表,根据条件展示不同的图表。
使用 wxPython和ECharts生成和保存HTML图表
Winfredzhang的博客
08-17 635
使用wxPython和ECharts库来生成和保存HTML图表。wxPython是一个基于wxWidgets的Python GUI库，而ECharts是一个用于数据可视化的JavaScript库。
JAVA开发人员画图表总结（ECHARTS）
w844916072的专栏
01-20 642
JAVA开发人员画图表总结（ECHARTS） 随着大数据的到来，越来越多的数据需求需要开发，而这些需求不可避免需要使用JS画出图表，而大多后端JAVA开发人员对JS不太熟悉，导致身心倍受折磨，今天记录以下最近我使用echarts的步骤，供参考： 一、环境说明 前端框架：echarts、Jquery 后端框架：SPRINGMVC 二、开发过程 前端代码： <!doctype...
数据可视化-ECharts Html项目实战（8）
qq_49513817的博客
03-27 1702
今天的文章，会正式进入ECharts气泡图与词云图的学习。希望我的文章能帮助到正在学习的你，也欢迎各位来本篇文章下一起交流学习，共同进步。
基于 Echarts 的 Python 图表库：Pyecahrts交互式的日历图和3D柱状图
happy game
02-01 1846
本文将引领读者深入了解数据可视化领域中的两个强大工具：Python 编程语言和 Pyecharts 库。我们将详细探讨如何使用 Pyecharts 创建令人印象深刻的柱状图和日历图，通过展示数据之美，提高信息传达的效果。日历图是一种用于展示时间数据的独特而强大的数据可视化工具。它以日历的形式呈现数据，让用户可以直观地看到时间的分布和趋势。在 Pyecharts 中，通过使用 Calendar 类，可以轻松地创建日历图。
vue循环绘制echart饼图
xx_ll_的博客
04-16 2685
1、echarts.js 将饼图封装成一个组件 <template> <!-- 每一个图表都有自己唯一的id,所有需要动态传入。 --> <div :id="id" :style="style"/> </template> <script> import echarts from 'echarts' // 引入 e...
全程组件化开发一个的图表webApp
08-10
在全程组件化开发一个图表WebApp的过程中，我们主要涉及到的技术栈和知识点包括JavaScript开发、前端框架、数据可视化、组件化编程以及现代Web开发的最佳实践。下面将详细展开这些主题。 首先，JavaScript作为Web...
基于Vue实现的简易购物清单
12-22
这通常需要用到像ECharts、Chart.js等数据可视化库，它们可以与Vue.js结合，根据Vue的数据模型动态生成图表。 在`Document - Google Chrome 2020-10-17 09-11-05.mp4`这个文件中，可能是对项目的一个演示视频，展示...
Python数据分析与可视化-公共课课件PPT模板.pptx
06-12
3. **pyecharts**：一个基于JavaScript库Echarts的Python接口，用于生成复杂的Web数据可视化图表。 第五章：科学计算与分析 1. **数据特征分析**：包括统计描述、相关性分析、主成分分析等方法，帮助理解数据的内在...
埃克
03-04
它的流程控制结构包括条件语句（if...else...）、循环语句（for、while、do...while）以及开关语句（switch）。 4. PHP 函数与类：PHP 支持函数定义和调用，可以创建自定义函数来封装代码，提高代码复用性。PHP 5 ...
vue仿小红书个人项目(完整代码).zip
10-21
12. **Echarts图表库**：如果项目中有数据分析或统计图表，可能用到了Echarts，这是一个强大的数据可视化库，可以生成各种图表。 通过这个项目，我们可以学习到Vue.js在实际项目中的应用，理解前端开发的流程，并...
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 401
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 830
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 994
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值