ECharts Tools Module

简介

echarts-tools 是一个用于管理和绘制 ECharts 图表的工具模块。它提供了多个方法来初始化、绘制和处理 ECharts 图表，并支持自定义事件处理和配置验证。该模块设计为一个 Vue.js 插件，可以通过绑定 Vue 实例来使用其提供的功能。

目录结构

node_modules/echarts-tools/
├── optionsModel/
│   ├── options
│   ├── echartsOption1.js
│   └── echartsOptionsModel.js
├── utils/
│   └── echartsUtils.js
├── index.js
src/
└── YourComponent.vue

主要功能

1. 初始化 ECharts 图表
2. 绘制 ECharts 图表
3. 配置验证
4. 事件处理
5. 调用接口获取数据

安装

确保你已经安装了 Vue.js 和 ECharts。

npm install vue echarts

使用方法

1. 导入 echartsUtils

在你的 Vue 组件中导入 echartsUtils 并初始化。

import echartsUtils from 'echarts-tools';

export default {
  name: 'YourComponent',
  data() {
    return {
      echartsArray: [],
      echartsOptionsModelPath: '',//选填
      echartsInitMethodName: ['getEcharts1'],//必填
      echarts1: {//必填
        echartsObj: null,
        optionsName: 'getOptions1',
        echartsId: 'gw-echarts1',
        events: {
          eventName: 'click',
          methodName: 'eventEcharts1'
        }
      }
    };
  },
  methods: {
    getEcharts1() {
      const url = '/xxx';
      const data = {
        showLoading: false,
        param: 'param'
      };
      const echartsOptionsName = 'echarts1';
      this.drawEcharts(echartsOptionsName, [0], this.echartsOptionsModelPath);
    },
    eventEcharts1(xIndex) {
      this.$message.success('配置点击方法成功,获取到索引' + xIndex);
    }
  },
  mounted() {
    const initEchartsUtils = echartsUtils || (vm => vm);
    Object.assign(this, initEchartsUtils(this));
    this.$nextTick(() => {
      this.initEcharts();
    });
  }
};

2. 初始化 ECharts

在组件的 mounted 生命周期钩子中初始化 echartsUtils，并在 data 中定义 echartsInitMethodName 数组，指定需要初始化的方法。

3. 配置 ECharts

在 data 中定义 echarts 对象，包含每个 ECharts 图表的配置信息，如 echartsId、optionsName 和 events。

4. 绘制 ECharts

调用 drawEcharts 方法来绘制 ECharts 图表。你需要提供图表的名称和数据。

methods: {
  drawMyEcharts() {
    this.echartsUtils.drawEcharts('myEcharts', this.data);
  }
}

5. 处理事件

在 echarts 对象的 events 属性中定义事件处理方法。例如，处理点击事件：

methods: {
  eventEcharts1(index) {
    console.log('Clicked on index:', index);
  }
}

6. 调用接口获取数据

使用 getEcharts 方法调用接口获取数据并绘制图表。

methods: {
  fetchEchartsData() {
    this.echartsUtils.getEcharts('/api/data', {}, 'myEcharts');
  }
}

API 文档

echartsEvents(echartsObj, eventsOption)

• 参数
  • echartsObj: ECharts 实例对象
  • eventsOption: 事件配置对象，包含 eventName 和 methodName
• 描述: 绑定 ECharts 事件，并在事件触发时调用指定的方法。

validateEchartsProperties(echarts, data)

• 参数
  • echarts: ECharts 配置对象
  • data: 数据对象
• 返回值: 布尔值，表示配置是否有效
• 描述: 验证 ECharts 配置信息是否完整和有效。

drawEcharts(echarts, data)

• 参数
  • echarts: ECharts 配置对象
  • data: 数据对象
• 描述: 绘制 ECharts 图表。

initEcharts()

• 描述: 初始化 ECharts 图表，调用 data 中定义的初始化方法。

getEcharts(url, data, echartsOptionsName)

• 参数
  • url: 接口地址
  • data: 请求数据
  • echartsOptionsName: ECharts 配置名称
• 描述: 调用接口获取数据并绘制 ECharts 图表。

示例

组件示例

注意事项

1. 依赖: 确保已经安装了 Vue.js 和 ECharts。
2. 配置: 在 data 中正确配置 echarts 对象和 echartsInitMethodName 数组。
3. 事件处理: 确保在 methods 中定义了 events 中指定的方法。
4. DOM 渲染: 使用 $nextTick 确保 DOM 已经渲染完成后再初始化 ECharts。