@vue-chart/echart

About

适用于 vue2.x、vue3.x 的通用 echart 组件.

扩展

整理了一些常用场景的图表创建模板 (Tips: 正在逐步开发, 带 todo 的是未完成的)

默认

Tip: 原本计划将常用的柱状图, 饼图这些都去做一个预设方法. 方便使用. 但是, 目前遇到一个问题, 就是不同的使用场景, 图表的表示不同, 越基础 的图表, 想通过简单的模板创建处理起来越复杂, 导致最终使用效果甚至比原生的还要麻烦. 这里, 我留一个 issue, 感兴趣的朋友可以进来讨论下, 图表开发搞哪些预设合适.

• 圆环进度图 - @vue-chart/create-process-serie

暗黑主题

• 圆环进度图 (dark) - @vue-chart/create-dark-process-serie

安装

注意:

1. 出于对不同项目使用 echart 版本不同考虑, 这里 echart 组件请按需安装, 但建议版本应 >= 4.*

2. 由于 @vue/composition-api 限制, 当 vue 版本 <= 2.6.10 时,

   • 需要额外安装 @vue/composition-api, 扩展对组合式 API 支持.
   • 需要使用 @vue/cli-service 构建项目, 如需使用 vitejs, 请升级到 vue 2.7.*

• vue 2.7.* or vue >= 3.0.0

1
2yarn add echart @vue-chart/echart
3

• vue version <= 2.6.10

1yarn add echart @vue-chart/echart @vue/composition-api

快速上手

1<!-- use in vue3 composition api -->
2<script lang="ts" setup>
3import { Chart, OmitedEChartsOption } from '@vue-chart/echart'
4import { ref, Ref } from 'vue'
5import { EChartsOption } from 'echart'
6
7const chartOptions: EChartsOption = {}
8
9// Tip: 使用 ref 引用 options 时, 需要使用 OmitedEChartsOption 类型
10// 因为, Ref 对象的类型推断使用的 Ref<Unwrap<T>> 解包方式, 与 echarts `graphic` 的类型重载冲突, 会产生类型推断错误
11const chartOptions2: Ref<OmitedEChartsOption> = ref({} as EChartsOption)
12
13// 或者, 可以使用以下2种写法
14// const chartOptions3 = ref({} as EChartsOption)
15// const chartOptions4: Ref<EChartsOption> = ref({}) // 注: ref 参数对象不能指定类型 `EChartsOption`, 需要让编译器推断
16</script>
17
18<!-- use in vue2 -->
19<script lang="ts" setup>
20import { Chart } from '@vue-chart/echart'
21import { Component, Vue } from 'vue-property-decorator'
22import { EChartsOption } from 'echart'
23
24@Component({ components: { Chart } })
25export default class extends Vue {
26    chartOptions: EChartsOption = {}
27}
28</script>
29
30<!-- use in js -->
31<script>
32import { Chart } from '@vue-chart/echart'
33
34export default {
35    components: { Chart },
36    data() {
37        return {
38            chartOptions: {}
39        }
40    }
41}
42</script>
43
44<!-- 必填项: Chart 组件引入和 指定容器尺寸(主要是高度) -->
45<template>
46    <!-- usage component -->
47    <Chart :options="chartOptions" />
48</template>
49
50<style>
51.chart {
52    height: 181px - 16px;
53}
54</style>

chart 特性

• 增强, 针对同一时刻大量更新的 echarts 图表, 增加了队列修改能力
• 增强, 针对单一图表, 增加 clear 属性, 允许清除未完成动画, 并执行下次渲染
• 修复, 使用 ref 映射 options 变量时, 由于Ref<Unwrap<T>> 类型冲突导致的类型推断不一致问题