基于vue项目的Echarts图形组件封装

最新推荐文章于 2024-06-03 17:25:58 发布

PitayaDog

最新推荐文章于 2024-06-03 17:25:58 发布

阅读量2.2k

点赞数 10

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/zyz13883658166/article/details/124430938

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为什么要封装Echarts组件？

1.原生echarts不是vue组件风格的，不爽

2.原生echarts需要事先准备dom，麻烦

3.原生echarts没有响应式系统，太菜

原始使用步骤

1.安装并且引用echarts

安装命令：npm install echarts --save

import * as echarts from 'echarts';

2.为 ECharts 准备一个定义了高宽的 DOM 容器

3.通过 echarts.init 方法初始化一个 echarts 实例

4.指定图表的配置项和数据

5.通过 setOption 方法生成一个图形

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 1.引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 2.为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 3.基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 4.指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 5.使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

基于vue封装一个简单的Echarts组件

1.准备dom:组件自动生成

id更不不重要，它只是echarts内部生成实例的dom的身份标识

2.准备实例:组件自动生成

<template>
  <div :id="uuid" :style="style"></div>
</template>
<script>
import * as echarts from "echarts";
// idGen方法生成一个标识
const idGen = () => {
  return new Date().getTime();
};
export default {
  name: "HelloEcharts",
  // 自定义echarts的宽高
  props: {
    height: {
      type: String,
      default: "400px",
    },
    width: {
      type: String,
      default: "600px",
    },
  },
  data() {
    return {
      uuid: null, //自定义uuid
      myChart: null
    };
  },
  created() {
    this.uuid = idGen();
  },
  // style的计算属性，当宽高改变的时候，style发生相应改变
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width,
      };
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById(this.uuid));
    const option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    this.myChart.setOption(option);
  },
};
</script>

3.组织options: 用户传参

4.应用options: 组件自动应用

App.vue

<template>
  <div id="app">
    <HelloEcharts :option="option" />
  </div>
</template>

<script>
import HelloEcharts from "./components/HelloEcharts.vue";
import option from "./option";

export default {
  name: "App",
  components: {
    HelloEcharts,
  },
  data() {
    return {
      option: option,
    };
  },
};
</script>

<style>
</style>

Components/HelloEcharts.vue

<template>
  <div :id="uuid" :style="style"></div>
</template>
<script>
import * as echarts from "echarts";
const idGen = () => {
  return new Date().getTime();
};
export default {
  name: "HelloEcharts",
  props: {
    height: {
      type: String,
      default: "400px",
    },
    width: {
      type: String,
      default: "600px",
    },
    option: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      uuid: null,
      myChart: null,
    };
  },
  created() {
    this.uuid = idGen();
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width,
      };
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById(this.uuid));
    this.myChart.setOption(this.option);
  },
};
</script>

以上已经完成基本组件的封装效果，

下面是做组件的一个响应式效果

1.响应式尺寸，dom的尺寸大小发生改变，这个组件可以会重新适应新的容器大小，调整他的布局和效果

2.响应式options

App.vue

<template>
  <div id="app">
    <HelloEcharts :option="option" :width="width" />
    <button @click="changeWidth">changeWidth</button>
    <button @click="changeOption">changeOption</button>
  </div>
</template>

<script>
import HelloEcharts from "./components/HelloEcharts.vue";
import { option1, option2 } from "./option";

export default {
  name: "App",
  components: {
    HelloEcharts,
  },
  data() {
    return {
      option: option1,
      width: "600px",
    };
  },
  methods: {
    changeWidth() {
      if (this.width == "600px") {
        this.width = "800px";
      } else {
        this.width = "600px";
      }
    },
    changeOption() {
      if (this.option == option1) {
        this.option = option2;
      } else {
        this.option = option1;
      }
    },
  },
};
</script>

<style>
</style>

option.js

export const option1 = {

    title: {
        text: "ECharts",
    },
    tooltip: {},
    legend: {
        data: ["销量"],
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
        {
            name: "销量",
            type: "bar",
            data: [3, 6, 9, 12, 15, 18],
        },
    ],
};

export const option2 = {
    color: "red",
    title: {
        text: "ECharts 入门示例",
    },
    tooltip: {},
    legend: {
        data: ["销量"],
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
        {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
        },
    ],
};

Components/HelloEcharts.vue

<template>
  <div :id="uuid" :style="style"></div>
</template>
<script>
import * as echarts from "echarts";
const idGen = () => {
  return new Date().getTime();
};
export default {
  name: "HelloEcharts",
  props: {
    height: {
      type: String,
      default: "400px",
    },
    width: {
      type: String,
      default: "600px",
    },
    option: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      uuid: null,
      myChart: null,
    };
  },
  created() {
    this.uuid = idGen();
  },
  watch: {
    width() {
      //如果实例可用
      if (this.myChart) {
        this.myChart.resize({
          Animation: {
            duration: 300,
          },
        });
      }
    },
    option() {
      if (this.myChart) {
        //   notMerge这个方法，是表示配置不重复，但是目前这个分代码没有生效
        this.myChart.setOption(this.option),
          {
            notMerge: true,
          };
      }
    },
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width,
      };
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById(this.uuid));
    this.myChart.setOption(this.option);
  },
};
</script>

视频学习来源:【整理思路】从零开始封装Echarts的Vue组件_哔哩哔哩_bilibili

PitayaDog

关注

10
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
基于vue项目的Echarts图形组件封装

为什么要封装Echarts组件？1.原生echarts不是vue组件风格的，不爽2.原生echarts需要事先准备dom，麻烦3.原生echarts没有响应式系统，太菜原始使用步骤1.安装并且引用echarts安装命令：npm install echarts --saveimport * as echarts from 'echarts';2.为 ECharts 准备一个定义了高宽的 DOM 容器3.通过 echarts.init 方法初始化一个 echarts 实例
复制链接

扫一扫