Vue封装ECharts组件实现动态复用

freshfish丶

已于 2023-04-03 11:23:30 修改

阅读量1.5k

点赞数 2

分类专栏：前端学习文章标签： echarts vue.js javascript

于 2023-03-31 16:13:45 首次发布

本文链接：https://blog.csdn.net/qq_39064418/article/details/129882622

版权

该博客介绍如何在后台管理系统中封装ECharts组件以复用，减少代码量并提高开发效率。通过动态和静态图表的代码实现，详细讲解了如何设置ECharts属性、自动调整尺寸、自适应宽高，以及如何结合后端接口动态展示数据。

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

🍓🍓开发后台管理系统时，经常使用ECharts图表渲染首页信息，在首页使用多个图表时，选择封装ECharts组件复用的方式可以减少代码量，增加开发效率🍓🍓

🍅效果需求：

在这里插入图片描述

使用组件传递ECharts中的 option 属性
手动/自动设置chart尺寸
chart自适应宽高
动态展示获取到的后端数据

🍑代码实现( 静态图表🍪•ᴥ•🍪 )：

首先我们需要导入echarts： npm i echarts
选择在main.js中配置ECharts全局变量声明或仅组件内使用

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts // 全局声明  写在main.js中

import * as echarts from 'echarts'; // 仅在组件内使用

创建static_options.js作为静态options配置项，配置项内对象即echarts实例中的源码，🔴链接在此🔴

export const barOption =  {
   
  tooltip: {
   
    trigger: 'axis',
    axisPointer: {
   
      type: 'shadow'
    }
  },
  grid: {
   
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
   
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
   
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
   
      type: 'value'
    }
  ],
  series: [
    {
   
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
}