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