手摸手教你用RayTemplate RChart组件开发企业级图表

2023-07-29 06:40:47

RayTemplate RChart：释放企业级图表开发潜力

导言

在数据主导的时代，图表已经成为数据分析和可视化的不可或缺的工具。然而，企业级图表对于性能、灵活性以及可定制性有着严格的要求。RayTemplate RChart 应运而生，旨在帮助开发者快速构建满足这些需求的企业级图表，助你探索数据的奥秘。

组件化设计：打造灵活且可扩展的图表

RChart 采用组件化设计理念，将图表分解为可重用的组件，包括图表容器、标题、图例、数据以及工具栏。每个组件都有其明确的职责，通过属性（props）和插槽（slots）实现数据和样式的传递。这种设计模式不仅简化了图表开发，还赋予了图表极高的灵活性，可以轻松地适应各种定制需求。

打造企业级图表组件的步骤

1. 安装依赖项

首先，安装必要的依赖项：

npm install --save vue vue3 vueuse echarts

2. 创建图表容器组件

图表容器组件负责管理图表的整体布局和样式：

<template>
  <div class="chart-container">
    <div class="chart-title">{{ title }}</div>
    <div class="chart-legend">
      <el-scrollbar wrap>
        <el-checkbox-group v-model="checkedLegend">
          <el-checkbox v-for="item in legendData" :label="item.name">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-scrollbar>
    </div>
    <div class="chart-body">
      <ECharts :options="options" :theme="theme"></ECharts>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUpdated } from 'vue'
import { useECharts } from 'vueuse-echarts'
import ECharts from 'vue-echarts'
import 'echarts/lib/theme/chalk'

export default {
  name: 'RChart',
  components: { ECharts },
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => ({})
    },
    options: {
      type: Object,
      default: () => ({})
    },
    theme: {
      type: String,
      default: 'chalk'
    }
  },
  setup(props) {
    const chartRef = ref(null)
    const instance = useECharts(chartRef)
    const checkedLegend = ref([])
    const legendData = computed(() => {
      return props.data.legend
    })

    const updateLegend = () => {
      const legend = []
      props.data.series.forEach(item => {
        if (checkedLegend.value.includes(item.name)) {
          legend.push(item)
        }
      })
      props.options.legend.data = legend
    }

    onMounted(() => {
      instance.setOption(props.options)
    })

    onUpdated(() => {
      updateLegend()
      instance.setOption(props.options)
    })

    return {
      chartRef,
      checkedLegend,
      legendData
    }
  }
}
</script>

3. 使用组件

在其他组件中，可以使用 RChart 组件创建图表：

<template>
  <div>
    <RChart :data="data" :options="options" />
  </div>
</template>

<script>
import RChart from './RChart.vue'

export default {
  name: 'ChartDemo',
  components: { RChart },
  data() {
    return {
      data: {
        legend: [
          { name: '销量' },
          { name: '利润' }
        ],
        series: [
          {
            name: '销量',
            type: 'line',
            data: [10, 20, 30, 40, 50, 60]
          },
          {
            name: '利润',
            type: 'line',
            data: [20, 40, 60, 80, 100, 120]
          }
        ]
      },
      options: {
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销量',
            type: 'line',
            data: [10, 20, 30, 40, 50, 60]
          },
          {
            name: '利润',
            type: 'line',
            data: [20, 40, 60, 80, 100, 120]
          }
        ]
      }
    }
  }
}
</script>