关于vue3:vue封装echarts为原生组件

vuecharts

github 地址: vuecharts

我的项目设计

1. 官网团队 Baidu EFE team 有出一个 vue 封装的 echarts 库 vue-echarts。然而这个库和本人在 vue 外面封装没有啥太大区别。仍旧解脱不了针对一个图表写一个微小的配置文件。
2. 参考 BizCharts 对 G2 这个库的封装形式，对 echarts 进行了封装。相对而言 API 更方便使用
3. 应用 ts-transformer-keys，从 echarts 导出的 XXOption 主动生成 vue 组件 props

装置

yarn add vuecharts3

Components

我的项目定义的组件蕴含在下图中，每一个都是一个 vue 的 Component。
具体的组件反对的配置信息参考：https://echarts.apache.org/zh…（能够通过名字首字母小写后搜寻到对应的配置我的项目）

DEMO

import 'echarts'
import Echarts from 'vuecharts3'

const {Chart, Title, Tooltip, Line, Bar, Legend, Grid, XAxis, YAxis} = Echarts

export default defineComponent({

  components: {
    Chart,
    Title, Tooltip, Bar, Line, Legend, Grid, XAxis, YAxis,
  },

  setup() {return {}
  }
})


// template

<template>
  <div class="container">
    <Chart>
      <Grid :top="100" />
      <Legend :data="['data1','data2']" :top="65" />
      <Title text="顶部题目" subtext="顶部小标题" left="center" :top="10" />
      <Title text="底部题目" top="bottom" left="center" />
      <Bar name="data1" :data="[0.32, 0.45, 0.2]" />
      <Bar name="data2" :data="[0.2, 0.5, 0.3]" />
      <Line name="data2" :data="[0.2, 0.5, 0.3]" />
      <YAxis />
      <XAxis :data="['x1','x2','x3']" />
      <Tooltip trigger="axis" />
    </Chart>
    <h2>Heatmap 必须搭配 VisualMap</h2>
    <Chart>
      <Tooltip position="top" />
      <Grid top="10%" height="50%" />
      <XAxis :data="hours" />
      <YAxis :data="days" type="category" />
      <VisualMap :calculable="true" orient='horizontal' left='center' bottom="15%" :min="0" max="10" />
      <Heatmap name="Punch Card" :data="data" :label="{show: true}" :emphasis="{itemStyle: { shadowBlur: 10, shadowColor:'rgba(0, 0, 0, 0.5)'}}" />
    </Chart>
  </div>
</template>

自定义组件

1. 通过自定义组件实现官网切换图像的 example

import {contextSymbol} from 'vuecharts3'

const TreemapSunburstTransition = defineComponent({
  name: 'TreemapSunburstTransition',
  inject: [contextSymbol],
  setup() {const { chart} = inject(contextSymbol)
    const interval = ref()
    const state = reactive({
      data: null,
      type: '',
    })

    const url = "https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/echarts-package-size.json"
    fetch(url).then(res => res.json()).then(data => {
      state.data = data.children
      console.log('data.value', data.children)
      interval.value = setInterval(function () {
        state.type = state.type == 'treemap' ? 'sunburst' : 'treemap'
        console.log('state.type', state.type)
      }, 3000);
    })
    onUnmounted(() => clearInterval(interval.value))
    return () => state.type == 'treemap' ?
      h(Treemap, {
        id: 'echarts-package-size',
        animationDurationUpdate: 1000,
        roam: false,
        nodeClick: undefined,
        data: state.data,
        universalTransition: true,
        label: {show: true},
        breadcrumb: {show: false}
      }) : h(Sunburst, {
        id: 'echarts-package-size',
        radius: ['20%', '90%'],
        animationDurationUpdate: 1000,
        nodeClick: undefined,
        data: state.data,
        universalTransition: true,
        itemStyle: {
          borderWidth: 1,
          borderColor: 'rgba(255,255,255,.5)'
        },
        label: {show: false}
      })
  }
})

// template
<Chart>
  <TreemapSunburstTransition />
</Chart>