图表Echart组件封装

最新推荐文章于 2024-07-18 16:47:34 发布

可口可乐哟

最新推荐文章于 2024-07-18 16:47:34 发布

阅读量626

点赞数

分类专栏： echart 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_41704680/article/details/121246954

版权

本文详细介绍了如何将Echarts图表进行组件化封装，通过JavaScript和ECMAScript实现可复用的图表组件，提高代码效率和图表管理的便捷性。

摘要由CSDN通过智能技术生成

图表Echart组件封装

<template>
  <div>
    <div class="charts-box" :id="idCode" :style="{width: width, height: height}"></div>
  </div>
</template>

import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
// 柱状图
import 'echarts/lib/chart/bar';

import {
   DataZoomComponent, GridComponent} from 'echarts/components';

echarts.use([DataZoomComponent, GridComponent]);
// 饼状图
import 'echarts/lib/chart/pie';
// 仪表盘
import 'echarts/lib/chart/gauge';
//折线图
import 'echarts/lib/chart/line'

export default {
   
  name: "chart",
  props: {
   
    type: {
   
      type: String
    },
    value: {
   
      type: [Object, Array, Number]
    },
    width: {
   
      type: String,
      default: '100%',
      required: true
    },
    height: {
   
      type: String,
      default: '25rem',
      required: true
    },
    chartId: {
   
      type: String
    },
    title: {
   
      type: String
    }
  },
  data() {
   
    return {
   
      chartType: null,
      chartValue: null,
      chartTitle: '',
      myChart: null,
    }
  },
  mounted() {
   
    this.init()
  },
  methods: {
   
    init() {
   
      let chart = document.getElementById(this.idCode