diff --git a/src/components/RayChart/index.scss b/src/components/RayChart/index.scss index 50c47d90..9205e373 100644 --- a/src/components/RayChart/index.scss +++ b/src/components/RayChart/index.scss @@ -3,4 +3,5 @@ height: var(--ray-chart-height); border: none; outline: none; + box-sizing: border-box; } diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index 0515f6fe..77ffab1a 100644 --- a/src/components/RayChart/index.tsx +++ b/src/components/RayChart/index.tsx @@ -17,6 +17,7 @@ import { PieChart, CandlestickChart, ScatterChart, + PictorialBarChart, } from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`) import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性 import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器 @@ -131,15 +132,17 @@ const RayChart = defineComponent({ default: false, }, options: { - type: Object, + type: Object as PropType, default: () => ({}), }, success: { /** * - * @param `chart` 实例 + * 返回 chart 实例 * * 渲染成功回调函数 + * + * () => EChartsInstance */ type: Function, default: () => ({}), @@ -148,6 +151,8 @@ const RayChart = defineComponent({ /** * * 渲染失败回调函数 + * + * () => void */ type: Function, default: () => ({}), @@ -178,6 +183,11 @@ const RayChart = defineComponent({ type: Array, default: () => [], }, + watchOptions: { + /** 主动监听 options 变化 */ + type: Boolean, + default: true, + }, }, setup(props) { const settingStore = useSetting() @@ -221,11 +231,12 @@ const RayChart = defineComponent({ PieChart, CandlestickChart, ScatterChart, + PictorialBarChart, ]) // 注册类型 echarts.use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果 - // 如果业务场景中需要 `svg` 渲染器, 手动导入渲染器后使用该行代码即可 + // 如果业务场景中需要 `svg` 渲染器, 手动导入渲染器后使用该行代码即可(不过为了体积考虑, 移除了 SVG 渲染器) // echarts.use([props.canvasRender ? CanvasRenderer : SVGRenderer]) echarts.use([CanvasRenderer]) // 注册渲染器 @@ -300,6 +311,8 @@ const RayChart = defineComponent({ props.success?.(echartInstance) } catch (e) { props.error?.() + + console.error(e) } } @@ -369,6 +382,17 @@ const RayChart = defineComponent({ }, ) + if (props.watchOptions) { + watch( + () => props.watchOptions, + () => { + const options = useMergeOptions() + + echartInstance?.setOption(options) + }, + ) + } + onBeforeMount(async () => { await registerChartCore() })