首页 前端知识 Echarts组件封装(数据、样式、配置项)

Echarts组件封装(数据、样式、配置项)

2024-06-18 22:06:34 前端知识 前端哥 448 621 我要收藏

🐱 个人主页:TechCodeAI启航,公众号:SHOW科技

🙋‍♂️ 作者简介:2020参加工作,专注于前端各领域技术,共同学习共同进步,一起加油呀!

💫 优质专栏:前端主流技术分享

📢 资料领取:前端进阶资料可以找我免费领取

🔥 摸鱼学习交流:我们的宗旨是在「工作中摸鱼,摸鱼中进步」,期待大佬一起来摸鱼!

首先安装 Echarts:

npm install echarts --save

在 Vue 3 中,你可以通过封装一个组件来实现 Echarts 图表的可定制化,并且根据传入的参数绘制不同样式的图表。下面是一个简单的示例:

创建一个名为 EchartsChart 的组件:

<template>
  <div ref="chart" :style="chartStyle"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    chartData: {     // 接收数据的参数
      type: Array,
      required: true
    },
    chartOptions: {     // 接收配置项的参数
      type: Object,
      required: true
    },
    chartStyle: {    // 接收样式的参数
      type: Object,
      default: () => ({ width: '400px', height: '300px' })
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      chart.setOption(this.chartOptions);
      chart.setOption({
        series: [
          {
            type: 'bar',
            data: this.chartData
          }
        ]
      });
    }
  }
};
</script>

在需要使用图表的页面中,导入并使用 EchartsChart

<template>
  <div>
    <EchartsChart
      :chartData="data1"
      :chartOptions="options1"
      :chartStyle="style1"
    />
    <EchartsChart
      :chartData="data2"
      :chartOptions="options2"
      :chartStyle="style2"
    />
  </div>
</template>

<script>
import EchartsChart from '@/components/EchartsChart.vue';

export default {
  components: {
    EchartsChart
  },
  data() {
    return {
      data1: [120, 200, 150, 80, 70],
      options1: {
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        grid: {
          left: '10%',
          right: '10%',
          bottom: '5%',
          containLabel: true
        }
      },
      style1: { width: '400px', height: '300px' },
      data2: [50, 100, 120, 80, 90],
      options2: {
        xAxis: {
          type: 'category',
          data: ['F', 'G', 'H', 'I', 'J']
        },
        yAxis: {},
        grid: {
          left: '10%',
          right: '10%',
          bottom: '5%',
          containLabel: true
        }
      },
      style2: { width: '600px', height: '400px' }
    };
  }
};
</script>

上述示例中,EchartsChart 组件接收 chartDatachartOptionschartStyle 三个参数,分别用于传入图表的数据、配置项和样式。在 mounted 钩子函数中,通过 echarts.init 初始化图表实例,并利用传入的参数进行绘制。

在需要使用图表的页面中,可以多次调用 EchartsChart 组件,并分别传入不同的参数进行绘制。确保每个图表组件都有独立的引用,避免只显示一个的问题。

请注意,上述示例仅提供了基本的封装思路,具体的数据、配置项和样式需要根据自己的实际需求进行调整。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12648.html
标签
评论
发布的文章

@JsonSerialize注解的使用

2024-06-24 23:06:21

npm install报错

2024-06-24 23:06:56

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!