记录使用vue+echarts简单封装基本的折线图，柱状图，饼状图组件

已于 2023-09-22 17:49:13 修改
阅读量315 收藏 1
点赞数
文章标签： vue.js echarts 前端 javascript ecmascript
于 2023-09-22 17:45:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37057426/article/details/133178152
版权

因为工作需要开发的程序经常和图表打交道，所以记录echart简单封装折线图，柱状图，饼状图组件。

1、首先展示echarts封装后的结果展示

2、下面是具体实现的文件和方法

首先是折线图的部分

<template>
  <div ref="main" :style="{ width, height }"></div>
</template>

<script>
export default {
  name: "lineChart",
  props: {
    chartData: {
      type: Object,
      default: () => ([
        {
          xData: [],
          yData: [],
        },
      ]),
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
    isSimple: { // 是否是简单显示模式
      type: Boolean,
      default: false,
    }
  },
  watch: {
      chartData: {
        handler() {
          this.myEcharts();
        },
        // 深度观察监听
        deep: true
      }
  },
  data() {
    return {
      myChart:null
    };
  },
  watch: {
    chartData: {
      handler() {
        this.myEcharts();
      },
      // 深度观察监听
      deep: true,
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.main);
    this.myEcharts();
  },
  methods: {
    myEcharts() {
      const space = "                    ";
      const that = this;
      //配置图表
      var option = {
        tooltip: {
          show: !this.isSimple,
          trigger: "axis",
          axisPointer: {
            type: "cross",
            snap: true,
          },
          //   formatter(params) {
          //     props.handleTooltipClick && props.handleTooltipClick(params); // 点击使用
          //   },
        },
        color: ["#2977FF"],
        grid: {
          top: "10%",
          left: this.isSimple ? "-10%" : '0', // 去掉Y轴后，去掉左侧间距
          right: "0",
          bottom: this.isSimple ? "-10%" : '0', // 去掉X轴后，去掉底部间距
          containLabel: true,
        },
        xAxis: {
          show: !this.isSimple,
          boundaryGap: false, // 起始空间
          axisLine: { // 0轴x线样式
            lineStyle: {
              color: "rgba(153, 153, 153, 0.2)",
              type: "dashed",
            },
          },
          axisLabel: {
            // x轴显示内容样式
            fontSize: "12px",
            color: "#ccc",
            margin: 26,
            interval: (index) =>
              index === 0 ||
              index === this.chartData.xData.length - 1 ||
              index === Math.floor(this.chartData.xData.length / 2),
            formatter(value, index) {
              if (index === 0) {
                return `${space}${value}`;
              } else if (index === that.chartData.xData.length - 1) {
                return `${value}${space}`;
              }
              return value;
            },
          },
          axisPointer: {
            // 竖着指示线的样式
            label: {
              formatter(obj) {
                return obj.value;
              },
              show: true,
              padding: [2, 4, 2, 4],
              fontSize: "12px",
              borderRadius: 0,
              backgroundColor: "#2977FF",
            },
            lineStyle: {
              color: "#2977FF", // 指示线颜色
              type: "dashed",
              height: 0.4,
            },
          },
          data: this.chartData.xData,
        },
        yAxis: {
          show: !this.isSimple,
          axisLabel: {
            // y轴显示内容样式
            fontSize: "12px",
            color: "#ccc",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(153, 153, 153, 0.2)",
              type: "dashed",
            },
          },
          axisPointer: {
            show: false, // 隐藏y轴指示线
          },
          splitNumber: 5,
          scale: true,
        },
        series: [
          {
            name: "",
            type: "line",
            markLine: {
              show: !this.isSimple,
              // 横着线的样式
              data: [],
              animation: false,
              label: {
                formatter(obj) {
                  const plus = parseFloat(obj.value) > 0 ? "+" : "";
                  return plus + parseFloat(obj.value).toFixed(toFixed) + sign;
                },
                position: "start",
                padding: [2, 4, 2, 4],
                fontSize: "12px",
                borderRadius: 0,
                backgroundColor: "#2977FF",
                color: "#fff",
              },
              lineStyle: {
                color: "#FF5800", // 指示线颜色
                type: "dashed",
                height: 0.4,
              },
              symbol: "none", // 去掉箭头
            },
            lineStyle: {
              // 折线样式
              normal: {
                width: 1,
              },
            },
            symbol: "none", // 圆点
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  { offset: 0, color: 'rgba(41, 119, 255, 0)' },
                  { offset: 1, color: 'rgba(41, 119, 255, 100%)' },
                ],
                global: false, // 缺省为 false
              },
              origin: "start",
            },
            data: [...this.chartData.yData],
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="less" src="./index.less"></style>

然后是柱状图的代码

<template>
  <div ref="main" :style="{ width, height }"></div>
</template>

<script>
export default {
  name: "barChart",
  props: {
    chartData: {
      type: Object,
      default: () => ([
        {
          xData: [],
          yData: [],
        },
      ]),
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    }
  },
  watch: {
      chartData: {
        handler() {
          this.myEcharts();
        },
        // 深度观察监听
        deep: true
      }
  },
  data() {
    return {
      myChart:null
    };
  },
  watch: {
    chartData: {
      handler() {
        this.myEcharts();
      },
      // 深度观察监听
      deep: true,
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.main);
    this.myEcharts();
  },
  methods: {
    myEcharts() {
      const space = "                    ";
      const that = this;
      //配置图表
      var option = {
        tooltip: {
          axisPointer: {
            type: "cross",
          },
        },
        color: ["#2977FF"],
        grid: {
          top: "10%",
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          boundaryGap: true, // 起始空间
          axisLine: { // 0轴x线样式
            lineStyle: {
              color: "rgba(153, 153, 153, 0.2)",
              type: "dashed",
            },
          },
          axisLabel: {
            // x轴显示内容样式
            fontSize: "12px",
            color: "#ccc",
            margin: 26,
            interval: (index) =>
              index === 0 ||
              index === this.chartData.xData.length - 1 ||
              index === Math.floor(this.chartData.xData.length / 2),
            formatter(value, index) {
              if (index === 0) {
                return `${space}${value}`;
              } else if (index === that.chartData.xData.length - 1) {
                return `${value}${space}`;
              }
              return value;
            },
          },
          axisPointer: {
            // 竖着指示线的样式
            label: {
              formatter(obj) {
                return obj.value;
              },
              show: true,
              padding: [2, 4, 2, 4],
              fontSize: "12px",
              borderRadius: 0,
              backgroundColor: "#2977FF",
            },
            lineStyle: {
              color: "#2977FF", // 指示线颜色
              type: "dashed",
              height: 0.4,
            },
          },
          data: this.chartData.xData,
        },
        yAxis: {
          axisLabel: {
            // y轴显示内容样式
            fontSize: "12px",
            color: "#ccc",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(153, 153, 153, 0.2)",
              type: "dashed",
            },
          },
          axisPointer: {
            show: false, // 隐藏y轴指示线
          },
          splitNumber: 5,
          scale: true,
        },
        series: [
          {
            name: "",
            type: "bar",
            data: this.chartData.yData,
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="less" src="./index.less"></style>

最后是饼图的代码

<template>
  <div ref="main" :style="{ width, height }"></div>
</template>

<script>
export default {
  name: "barChart",
  props: {
    chartData: {
      type: Object,
      default: () => ([
        {
          yData: [],
        },
      ]),
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
    colors: {
      type: Array,
      default: () => ([
          "#FF6801",
          "#FFAE5F",
          "#F9E619",
          "#36A2DA",
          "#3ACEF1",
          "#F14CEC",
          "#4CF1DD",
      ]),
    }
  },
  watch: {
      chartData: {
        handler() {
          this.myEcharts();
        },
        // 深度观察监听
        deep: true
      }
  },
  data() {
    return {
      myChart:null
    };
  },
  watch: {
    chartData: {
      handler() {
        this.myEcharts();
      },
      // 深度观察监听
      deep: true,
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.main);
    this.myEcharts();
  },
  methods: {
    myEcharts() {
      
      //配置图表
      var option = {
        color: this.colors,
        legend: {
          show: true,
          left: 230,
          itemGap: -11, //间距
          type: "plain",
          top: "center",
          orient: "vertical",
          icon: "circle",
          selectedMode: false,
          itemWidth: 8,
          itemHeight: 8,
          pageIconSize: 20,
          textStyle: {
            fontFamily: 'PingFangSC-Regular, PingFang SC',
            fontWeight: 400,
            verticalAlign: 'middle',
            overflow: 'break',
            lineHeight: 15,
            rich: {
              a: {
                align: 'left',
                padding: [0, 8, 0, 0]
              },
              b: {
                align: 'left',
                verticalAlign: 'middle'
              },
              c: {
                align: 'left',
                verticalAlign: 'top'
                // padding: [-10, 0, 0, 0]
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            minAngle: "0.5",
            center: ['50%', '50%'],
            radius: ['60%', '80%'],
            label: { show: false },
            animation: false,
            data: this.chartData.yData,
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="less" src="./index.less"></style>

3、最后差点忘了放模拟数据了

（1）柱状图和折线图的数据：

chartData: {
        xData: [
          "2017-01-01",
          "2017-01-02",
          "2017-01-03",
          "2017-01-04",
          "2017-01-05",
          "2017-01-06",
          "2018-01-01",
          "2018-01-02",
          "2018-01-03",
          "2018-01-04",
          "2018-01-05",
          "2018-01-06",
          "2019-01-01",
          "2019-01-02",
          "2019-01-03",
          "2019-01-04",
          "2019-01-05",
          "2019-01-06",
          "2020-01-01",
          "2020-01-02",
          "2020-01-03",
          "2020-01-04",
          "2020-01-05",
          "2020-01-06",
          "2021-01-01",
          "2021-01-02",
          "2021-01-03",
          "2021-01-04",
          "2021-01-05",
          "2021-01-06",
          "2022-01-01",
          "2022-01-02",
          "2022-01-03",
          "2022-01-04",
          "2022-01-05",
          "2022-01-06",
        ],
        yData: [
          6, 20, 1, 10, 10, 20, 6, 20, 36, 10, 10, 20, 6, 20, 36, 10, 10, 20, 6,
          20, 40, 10, 10, 20, 6, 20, 36, 10, 10, 20, 6, 20, 36, 10, 10, 20,
        ],
      },

（2）饼图的数据：

pieData: {
        yData: [36, 20, 16, 10, 9, 9],
 }

小飞机噗噗噗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ECharts图表整合封装----折线图、柱状图、扇形图
温柔雨哥的博客
12-23 925
基于echarts实例封装的组件，用于需要echarts比较多的时候，将他进行封装，哪个页面需要直接引用就好 1、安装 npm i v-charts echarts -S 2、完整引入 // main.js import Vue from ‘vue’ import VCharts from ‘v-charts’ import App from ‘./App.vue’ Vue.use(VCharts) 3、echarts封装的组件 封装了各种类型的图表。只需要给个type类型判断，就可以区分使用组件的哪种.
vue组件封装echart折线图
08-30
直接定义vue数据和承载的DIV,即可实现复用。使用Vue组件封装Echart柱状图，直接引用组件js，并且在需要展示的地方，进行Vue数据传值，支持多坐标轴。本案例非Webpack打包，直接引用JS即可。适用于部分页面使用Vue功能，或者想尝试Vue功能的同学。该组件使用方法比较简单，也可以自行修改样式扩展功能，但是需要自行查看echart的api配置文档。
Vue的学习 —— ＜Echarts组件库技术应用＞
最新发布
2301_78038072的博客
05-21 1266
在这个课程中，我们将学习一款强大的开源数据可视化工具——ECharts。在当今数据驱动的时代，数据可视化变得越来越重要。它能够帮助我们更好地理解和分析数据，从而做出更明智的决策。ECharts，全称Easy Chart，是一款由百度开源的数据可视化库，基于JavaScript，可以在网页中展示丰富的图表类型，如折线图、柱状图、饼图等。通过课程的学习，掌握ECharts数据可视化技术，并在实际项目开发中得心应手使用ECharts数据可视化技术，提升自身的技术能力与价值。ECharts是一款基于Javascri
vue开发图表echarts基本使用
可可的博客
07-07 2676
提供很多图标，用户且可自行修改。性能好可流畅远行PC和移动设备。3.echarts-基础配置。1.echarts-介绍。上面是引入了下面两个图表。
vue实现【echarts中 “12种” Bar柱状图图例】的组件封装及调用
weixin_50450473的博客
01-17 7749
1、安装echarts npm install echarts --save 2、在需要的页面引入 import * as echarts from "echarts" 3、创建组件personChart.vue <template> <div> <div id="person"></div> </div> </template> <script> import * as ..
用vue3封装自用的echarts组件
haodanzj的博客
12-19 744
echarts封装
vue-echarts echarts组件 更好的在vue项目中使用
热门推荐
greed
05-22 1万+
vue-echarts 使用github上封装过的组件 github地址 https://github.com/ecomfe/vue-echarts npm & ESM $ npm install echarts vue-echarts 要在 Vue 2 下使用 vue-echarts，需要确保 @vue/composition-api 已经安装： npm i -D @vue/composition-api mins文件夹里面进行配置 全局配置 import Vue from 'vue' imp
vue+echarts实现动态折线图的方法与注意
10-14
在Vue.js框架中结合ECharts库创建动态折线图，主要涉及到以下几个关键步骤和技术要点： 1. **引入ECharts库**： 在项目中安装ECharts依赖，可以通过npm或yarn进行安装： ``` npm install echarts ``` 2. **在...
Springboot+mybatis+echarts实现数据可视化 折线图饼图柱状图
06-22
这个例子展示了如何使用Echarts创建一个简单的折线图，但实际应用中，你可以根据需要从后端获取动态数据，用Mybatis查询数据库，然后将数据转换为Echarts理解的格式，最终渲染出折线图、饼图或柱状图。 总的来说，...
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
10-17
在本文中，我们将探讨如何使用Vue.js和ECharts库来创建一个可拖动节点的折线图，并且支持拖动方向和上下限的设置。首先，我们要了解Vue和ECharts的基本概念。 Vue.js是一个轻量级的前端JavaScript框架，它采用组件...
网页模板——vue+echarts高考分数双折线图统计代码.zip
11-23
ECharts，另一方面，是百度开发的一个开源的数据可视化库，支持丰富的图表类型，如折线图、柱状图、饼图等，用于在网页上展示数据。 在这个“高考分数双折线图统计代码”项目中，Vue.js 被用来创建一个动态的、交互...
vue项目中使用echarts，2024最新前端常用开源库总结
2401_83974087的博客
04-10 877
]});3. 按需引入（项目中少量图表的情况下，采用此条）// 引入基本模板// 引入柱状图组件// 引入提示框和title组件// 不引入这个会报错 xAxis “0” not found4. 封装成组件(echarts.vue)效果图如上（第二条）5. 使用此组件。
2023vue2用vue-echarts实现图表
feeeee889的博客
10-11 4198
⚡按照本文章的步骤，最终可实现官方的各种图表。
Vue2+Echarts实现多种图表数据可视化Dashboard详解（附源码）
weixin_34392843的博客
02-14 4902
2019独角兽企业重金招聘Python工程师标准>>> ...
vue实现 【echarts中 “9种” Pie饼图图例】的组件封装及调用
weixin_50450473的博客
01-11 1万+
1、安装echarts npm install echarts --save 2、在需要的页面引入 import * as echarts from "echarts" 3、创建组件 PieChart.vue <template> <div> <div id="pie"></div> </div> </template> <script> import * as echa...
vue封装echarts组件
qq_43013250的博客
07-12 2624
在做数据可视化大屏页面展示时，或多或少都会用到echarts去歇一歇图表，比如饼图、柱状图、折线图等等，但是如果所有的图表代码都在vue页面中去写会造成代码冗余，同时也不便于后期拓展，所以我们要将这部分代码给写到外面，将他们进行封装。这样，我们就可以在 Vue 中使用 Echarts 图表了。当父组件渲染时，会传递配置项到子组件中，然后子组件会创建一个 Echarts 实例并渲染图表。no no no，接下来，看我操作。1. 首先，在 Vue 项目中安装 Echarts 库。将组件封装，传参为饼图颜色。
Vue + Element-ui实现后台管理系统(4)—封装一个ECharts组件的一点思路
weixin_31081677的博客
01-31 1100
封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客。另外这里只展示关键部分代码，项目代码放在github上： mall-manage-system 1、Vue + Element-ui实现后台管理系统(1) — 总述 2、Vue + Element-ui实现后台管理系统(2) — 项目搭建 + ⾸⻚布局实现 3、Vue + Ele...
Vue+Echarts可视化详解（统计图）
qq_53438100的博客
03-04 1994
Echarts–商业级数据图表，它是一个纯JavaScript的图标库，可以流畅的运行在PC和移动设备上，兼容 当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据 视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
echarts+VUE实现折线图
weixin_46447771的博客
07-25 523
利用Echarts和vue实现折线图效果
vue+echarts实现动态柱状图
06-09
好的，以下是一个基于 Vue 和 Echarts 的动态柱状图示例： ```html ;height:400px;"> import * as echarts from 'echarts'; export default { data() { return { chartData: [], // 存储柱状图的数据 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值