@vyr/echarts 0.0.1

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@vyr/echarts",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "sideEffects": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vyr/locale": "0.0.1",
+    "@vyr/engine": "0.0.1",
+    "echarts": "^5.5.0"
+  },
+  "files": [
+    "package.json",
+    "src/"
+  ],
+  "vyr": {
+    "type": "universal",
+    "order": 10
+  }
+}

package/src/actor/EchartActor.ts

@@ -0,0 +1,172 @@
+import * as echarts from 'echarts'
+import { DatasetDescriptor, HTMLActor, UpdateArgs } from "@vyr/engine";
+import { EchartDescriptor } from "../descriptor";
+import { ServiceEchartInterpreter } from '../interpreter';
+
+interface EchartServiceOption {
+    [k: string]: any
+}
+interface AxisOption {
+    [k: string]: any
+}
+
+class EchartActor extends HTMLActor {
+    private _wrapper: HTMLElement | null = null
+    readonly DOM: HTMLElement
+    readonly instance
+    options: { [k: string]: any } = {}
+
+    constructor(uuid: string) {
+        super(uuid)
+        this.DOM = this.createDOM()
+        const wrapper = this.getWrapper()
+        wrapper.appendChild(this.DOM)
+        this.instance = echarts.init(this.DOM)
+    }
+
+    protected createWrapper() {
+        const wrapper = document.createElement('div')
+        wrapper.setAttribute('class', HTMLActor.className)
+        wrapper.setAttribute(HTMLActor.uuidKey, this.uuid)
+        return wrapper
+    }
+
+    getWrapper() {
+        if (this._wrapper === null) {
+            this._wrapper = this.createWrapper()
+        }
+
+        return this._wrapper
+    }
+
+    add() { }
+
+    remove() { }
+
+    getXAxis(descriptor: EchartDescriptor, args: UpdateArgs) {
+        const xAxis: AxisOption = {
+            show: descriptor.xAxisShow,
+            axisLine: descriptor.xAxisLine,
+            axisTick: descriptor.xAxisTick,
+            axisLabel: descriptor.xAxisLabel,
+            splitLine: descriptor.xAxisSplitLine,
+        }
+        if (descriptor.xAxisType) xAxis.type = descriptor.xAxisType
+        return xAxis
+    }
+    getYAxis(descriptor: EchartDescriptor, args: UpdateArgs) {
+        const yAxis: AxisOption = {
+            show: descriptor.yAxisShow,
+            axisLine: descriptor.yAxisLine,
+            axisTick: descriptor.yAxisTick,
+            axisLabel: descriptor.yAxisLabel,
+            splitLine: descriptor.yAxisSplitLine,
+        }
+        if (descriptor.yAxisType) yAxis.type = descriptor.yAxisType
+        return yAxis
+    }
+    getGrid(descriptor: EchartDescriptor, args: UpdateArgs) {
+        const grid = {
+            show: descriptor.gridShow,
+            ...descriptor.gridRect,
+        }
+
+        return grid
+    }
+    getLegend(descriptor: EchartDescriptor, args: UpdateArgs) {
+        const legend = {
+            show: descriptor.legendShow,
+            type: descriptor.legendType || undefined,
+            left: descriptor.legendRect.left,
+            top: descriptor.legendRect.top,
+            textStyle: {
+                color: descriptor.legendTextStyle.color,
+            }
+        }
+        return legend
+    }
+    getTooltip(descriptor: EchartDescriptor, args: UpdateArgs) {
+        const tooltip = {
+            show: descriptor.tooltipShow,
+            trigger: descriptor.tooltipTrigger,
+        }
+
+        return tooltip
+    }
+
+    getDataZoom(descriptor: EchartDescriptor, args: UpdateArgs) {
+        const dataZoom = [
+            {
+                // 设置滚动条的隐藏或显示
+                show: false,
+                // 设置类型
+                type: "slider",
+                // 数据窗口范围的起始数值
+                startValue: 0,
+                // 数据窗口范围的结束数值（一页显示多少条数据）
+                endValue: descriptor.scroll.end - 1,
+                // 控制哪个轴，如果是number表示控制一个轴，
+                // 如果是Array表示控制多个轴。此处控制第二根轴
+                yAxisIndex: [0, 1],
+                // empty：当前数据窗口外的数据，被设置为空。
+                // 即不会影响其他轴的数据范围
+                filterMode: "empty",
+            },
+            {
+                // 没有下面这块的话，只能拖动滚动条，
+                // 鼠标滚轮在区域内不能控制外部滚动条
+                type: "inside",
+                // 控制哪个轴，如果是number表示控制一个轴，
+                // 如果是Array表示控制多个轴。此处控制第二根轴
+                yAxisIndex: [0, 1],
+                // 滚轮是否触发缩放
+                zoomOnMouseWheel: false,
+                // 鼠标移动能否触发平移
+                moveOnMouseMove: true,
+                // 鼠标滚轮能否触发平移
+                moveOnMouseWheel: true,
+            },
+        ]
+
+        return dataZoom
+    }
+
+    setOptions(descriptor: EchartDescriptor, args: UpdateArgs) {
+        const dimensions: string[] = [descriptor.xAxisModelValue]
+        const children: EchartServiceOption[] = []
+        const graphics = HTMLActor.getGraphics(this)
+        for (const serie of descriptor.children) {
+            dimensions.push(serie.modelValue)
+            const interpreter = graphics.getInterpreter<ServiceEchartInterpreter>(serie)
+            children.push(interpreter.getService(serie, args))
+        }
+
+        const xAxis = this.getXAxis(descriptor, args)
+        const yAxis = this.getYAxis(descriptor, args)
+        const grid = this.getGrid(descriptor, args)
+        const legend = this.getLegend(descriptor, args)
+        const tooltip = this.getTooltip(descriptor, args)
+        const dataZoom = descriptor.scroll.end <= 0 ? undefined : this.getDataZoom(descriptor, args)
+        const dataset = { dimensions, source: DatasetDescriptor.getCollection(descriptor.dataset) }
+
+        this.options = { xAxis, yAxis, grid, legend, tooltip, dataset, dataZoom, series: children }
+    }
+
+    update(descriptor: EchartDescriptor, args: UpdateArgs) {
+        const wrapper = this.getWrapper()
+        this.setHTMLStyle(wrapper, this.getWrapperStyle(descriptor, args))
+        this.setHTMLInteraction(wrapper, descriptor, args)
+        this.setHTMLStyle(this.DOM, this.getLayoutStyle(descriptor, args))
+        this.setStyleClass(this.DOM, this.getStyleClass(descriptor, args))
+        this.setOptions(descriptor, args)
+        this.instance.clear()
+        this.instance.setOption(this.options)
+        const rect = wrapper.getBoundingClientRect()
+        this.instance.resize({ width: rect.width, height: rect.height, })
+    }
+}
+
+export {
+    EchartServiceOption,
+    EchartActor,
+}

package/src/actor/index.ts

@@ -0,0 +1 @@
+export * from './EchartActor'

package/src/descriptor/BarServiceEchartDescriptor.ts

@@ -0,0 +1,31 @@
+import { DeserializationObject } from '@vyr/engine'
+import { EchartItemStyle, ServiceEchartDescriptor } from './ServiceEchartDescriptor'
+
+class BarServiceEchartDescriptor extends ServiceEchartDescriptor {
+    static type = 'BarServiceEchart'
+
+    barWidth: string
+    barMaxWidth: string
+    labelShow: boolean
+    labelColor: string
+    labelPosition: string
+
+    itemStyle: EchartItemStyle
+
+    constructor(descriptor: Partial<DeserializationObject<BarServiceEchartDescriptor>> = {}) {
+        super(descriptor)
+        this.echart = descriptor.echart ?? 'bar'
+        this.barWidth = descriptor.barWidth ?? ''
+        this.barMaxWidth = descriptor.barMaxWidth ?? ''
+        this.labelShow = descriptor.labelShow ?? false
+        this.labelColor = descriptor.labelColor ?? ''
+        this.labelPosition = descriptor.labelPosition ?? 'inside'
+
+        this.itemStyle = descriptor.itemStyle ? ServiceEchartDescriptor.deepClone(descriptor.itemStyle) : ServiceEchartDescriptor.getDefaultItemStyle()
+    }
+}
+ServiceEchartDescriptor.register(BarServiceEchartDescriptor)
+
+export {
+    BarServiceEchartDescriptor
+}

package/src/descriptor/EchartDescriptor.ts

@@ -0,0 +1,106 @@
+import { DeserializationObject, HTMLDescriptor } from '@vyr/engine'
+import { ServiceEchartDescriptor } from './ServiceEchartDescriptor';
+
+interface EchartRect {
+    left: string
+    top: string
+    width: string
+    height: string
+}
+interface EchartGridRect extends EchartRect {
+    right: string
+    bottom: string
+}
+interface EchartAxisLine {
+    show: boolean
+}
+interface EchartAxisTick {
+    show: boolean
+}
+interface EchartAxisLabel {
+    show: boolean
+    color: string
+    fontSize: number
+}
+interface EchartSplitLine {
+    show: boolean
+}
+interface EchartTextStyle {
+    color: string
+}
+
+interface EchartScroll {
+    end: number
+}
+
+class EchartDescriptor extends HTMLDescriptor {
+    static type = 'Echart'
+
+    declare children: ServiceEchartDescriptor[];
+
+    xAxisShow: boolean
+    xAxisType: string
+    xAxisModelValue: string
+    xAxisLine: EchartAxisLine
+    xAxisTick: EchartAxisTick
+    xAxisLabel: EchartAxisLabel
+    xAxisSplitLine: EchartSplitLine
+
+    yAxisShow: boolean
+    yAxisType: string
+    yAxisLine: EchartAxisLine
+    yAxisTick: EchartAxisTick
+    yAxisLabel: EchartAxisLabel
+    yAxisSplitLine: EchartSplitLine
+
+    gridShow: boolean
+    gridRect: EchartGridRect
+
+    legendType: string
+    legendShow: boolean
+    legendRect: EchartRect
+    legendTextStyle: EchartTextStyle
+
+    tooltipShow: boolean
+    tooltipTrigger: string
+
+    scroll: EchartScroll
+
+    constructor(descriptor: Partial<DeserializationObject<EchartDescriptor>> = {}) {
+        super(descriptor)
+        this.width = descriptor.width ?? 400
+        this.height = descriptor.height ?? 400
+        this.xAxisShow = descriptor.xAxisShow ?? true
+        this.xAxisType = descriptor.xAxisType ?? 'category'
+        this.xAxisModelValue = descriptor.xAxisModelValue ?? ''
+        this.xAxisLine = descriptor.xAxisLine ? HTMLDescriptor.deepClone(descriptor.xAxisLine) : { show: true }
+        this.xAxisTick = descriptor.xAxisTick ? HTMLDescriptor.deepClone(descriptor.xAxisTick) : { show: true }
+        this.xAxisLabel = descriptor.xAxisLabel ? HTMLDescriptor.deepClone(descriptor.xAxisLabel) : { show: true, color: '', fontSize: 12 }
+        this.xAxisSplitLine = descriptor.xAxisSplitLine ? HTMLDescriptor.deepClone(descriptor.xAxisSplitLine) : { show: false }
+
+        this.yAxisType = descriptor.yAxisType ?? ''
+        this.yAxisShow = descriptor.yAxisShow ?? true
+        this.yAxisLine = descriptor.yAxisLine ? HTMLDescriptor.deepClone(descriptor.yAxisLine) : { show: true }
+        this.yAxisTick = descriptor.yAxisTick ? HTMLDescriptor.deepClone(descriptor.yAxisTick) : { show: true, }
+        this.yAxisLabel = descriptor.yAxisLabel ? HTMLDescriptor.deepClone(descriptor.yAxisLabel) : { show: true, color: '', fontSize: 12 }
+        this.yAxisSplitLine = descriptor.yAxisSplitLine ? HTMLDescriptor.deepClone(descriptor.yAxisSplitLine) : { show: false }
+
+        this.gridShow = descriptor.gridShow ?? false
+        this.gridRect = descriptor.gridRect ? HTMLDescriptor.deepClone(descriptor.gridRect) : { top: '60', left: '10%', right: '10%', bottom: '60', width: 'auto', height: 'auto', }
+
+        this.legendType = descriptor.legendType ?? 'plain'
+        this.legendShow = descriptor.legendShow ?? true
+        this.legendRect = descriptor.legendRect ? HTMLDescriptor.deepClone(descriptor.legendRect) : { top: 'top', left: 'center', width: '', height: '', }
+        this.legendTextStyle = descriptor.legendTextStyle ? HTMLDescriptor.deepClone(descriptor.legendTextStyle) : { color: '#333' }
+
+        this.tooltipShow = descriptor.tooltipShow ?? true
+        this.tooltipTrigger = descriptor.tooltipTrigger ?? 'item'
+
+        this.scroll = descriptor.scroll ? HTMLDescriptor.deepClone(descriptor.scroll) : { end: -1 }
+    }
+}
+HTMLDescriptor.register(EchartDescriptor)
+
+export {
+    EchartDescriptor
+}

package/src/descriptor/LineServiceEchartDescriptor.ts

@@ -0,0 +1,30 @@
+import { DefaultStyleColor, DeserializationObject, StyleColor } from '@vyr/engine'
+import { ServiceEchartDescriptor } from './ServiceEchartDescriptor'
+
+interface EchartLineStyle {
+    width: number
+    type: string
+}
+
+class LineServiceEchartDescriptor extends ServiceEchartDescriptor {
+    static type = 'LineServiceEchart'
+
+    smooth: boolean
+    lineStyle: EchartLineStyle
+    itemStyleColor: StyleColor
+    areaStyleColor: StyleColor
+
+    constructor(descriptor: Partial<DeserializationObject<LineServiceEchartDescriptor>> = {}) {
+        super(descriptor)
+        this.echart = descriptor.echart ?? 'line'
+        this.smooth = descriptor.smooth ?? false
+        this.lineStyle = descriptor.lineStyle ? ServiceEchartDescriptor.deepClone(descriptor.lineStyle) : { width: 0, type: 'solid', }
+        this.itemStyleColor = descriptor.itemStyleColor ? DefaultStyleColor.create(descriptor.itemStyleColor) : new DefaultStyleColor({ value: '#5470c6' })
+        this.areaStyleColor = descriptor.areaStyleColor ? DefaultStyleColor.create(descriptor.areaStyleColor) : new DefaultStyleColor({ value: '#849ae7' })
+    }
+}
+ServiceEchartDescriptor.register(LineServiceEchartDescriptor)
+
+export {
+    LineServiceEchartDescriptor
+}

package/src/descriptor/PieServiceEchartDescriptor.ts

@@ -0,0 +1,47 @@
+import { DeserializationObject } from '@vyr/engine'
+import { EchartItemStyle, ServiceEchartDescriptor } from './ServiceEchartDescriptor'
+
+interface EchartCenter {
+    x: string
+    y: string
+}
+
+interface EchartRadius {
+    x: string
+    y: string
+}
+
+class PieServiceEchartDescriptor extends ServiceEchartDescriptor {
+    static type = 'PieServiceEchart'
+
+    roseType: string
+    width: string
+    height: string
+    radius: EchartRadius
+    center: EchartCenter
+    padAngle: number
+    labelShow: boolean
+    labelColor: string
+    labelPosition: string
+    itemStyle: EchartItemStyle
+
+    constructor(descriptor: Partial<DeserializationObject<PieServiceEchartDescriptor>> = {}) {
+        super(descriptor)
+        this.echart = descriptor.echart ?? 'pie'
+        this.roseType = descriptor.roseType ?? 'area'
+        this.width = descriptor.width ?? 'auto'
+        this.height = descriptor.height ?? 'auto'
+        this.radius = descriptor.radius ? ServiceEchartDescriptor.deepClone(descriptor.radius) : { x: '0', y: '75%' }
+        this.center = descriptor.center ? ServiceEchartDescriptor.deepClone(descriptor.center) : { x: '50%', y: '50%' }
+        this.padAngle = descriptor.padAngle ?? 4
+        this.labelShow = descriptor.labelShow ?? false
+        this.labelColor = descriptor.labelColor ?? ''
+        this.labelPosition = descriptor.labelPosition ?? 'outside'
+        this.itemStyle = descriptor.itemStyle ? ServiceEchartDescriptor.deepClone(descriptor.itemStyle) : ServiceEchartDescriptor.getDefaultItemStyle()
+    }
+}
+ServiceEchartDescriptor.register(PieServiceEchartDescriptor)
+
+export {
+    PieServiceEchartDescriptor
+}

package/src/descriptor/ServiceEchartDescriptor.ts

@@ -0,0 +1,39 @@
+import { DefaultStyleColor, Descriptor, DeserializationObject, StyleColor } from '@vyr/engine'
+
+interface EchartItemStyle {
+    color: StyleColor
+    borderColor: DefaultStyleColor
+    borderWidth: number
+    borderType: string
+    borderRadius: number
+}
+
+class ServiceEchartDescriptor extends Descriptor {
+    static type = 'ServiceEchart'
+
+    static getDefaultItemStyle() {
+        const itemStyle: EchartItemStyle = {
+            color: new DefaultStyleColor({ value: '#5470c6' }),
+            borderColor: new DefaultStyleColor({ opacity: 0 }),
+            borderWidth: 0,
+            borderType: 'solid',
+            borderRadius: 0
+        }
+
+        return itemStyle
+    }
+
+    echart: string
+    modelValue: string
+
+    constructor(descriptor: Partial<DeserializationObject<ServiceEchartDescriptor>> = {}) {
+        super(descriptor)
+        this.echart = descriptor.echart ?? ''
+        this.modelValue = descriptor.modelValue ?? ''
+    }
+}
+
+export {
+    EchartItemStyle,
+    ServiceEchartDescriptor
+}

package/src/descriptor/index.ts

@@ -0,0 +1,5 @@
+export * from './EchartDescriptor'
+export * from './ServiceEchartDescriptor'
+export * from './BarServiceEchartDescriptor'
+export * from './LineServiceEchartDescriptor'
+export * from './PieServiceEchartDescriptor'

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './locale'
+export * from './descriptor'
+export * from './interpreter'
+export * from './actor'

package/src/interpreter/BarServiceEchartInterpreter.ts

@@ -0,0 +1,34 @@
+import { UpdateArgs } from "@vyr/engine";
+import { BarServiceEchartDescriptor } from "../descriptor";
+import { ServiceEchartInterpreter } from "./ServiceEchartInterpreter";
+
+class BarServiceEchartInterpreter extends ServiceEchartInterpreter {
+    static type = BarServiceEchartDescriptor.type
+
+    getService(descriptor: BarServiceEchartDescriptor, args: UpdateArgs) {
+        const service = super.getService(descriptor, args)
+
+        return {
+            ...service,
+            barWidth: descriptor.barWidth,
+            barMaxWidth: descriptor.barMaxWidth,
+            label: {
+                show: descriptor.labelShow,
+                color: descriptor.labelColor,
+                position: descriptor.labelPosition,
+            },
+            itemStyle: {
+                color: this.getStyleColor(descriptor.itemStyle.color),
+                borderType: descriptor.itemStyle.borderType,
+                borderWidth: descriptor.itemStyle.borderWidth,
+                borderColor: this.getStyleColor(descriptor.itemStyle.borderColor),
+                borderRadius: descriptor.itemStyle.borderRadius,
+            }
+        }
+    }
+}
+ServiceEchartInterpreter.register(BarServiceEchartInterpreter)
+
+export {
+    BarServiceEchartInterpreter
+}

package/src/interpreter/EchartInterpreter.ts

@@ -0,0 +1,46 @@
+import { Descriptor, HTMLActor, Interpreter, PickupObject, UpdateArgs } from "@vyr/engine";
+import { EchartDescriptor } from "../descriptor";
+import { EchartActor } from "../actor";
+
+class EchartInterpreter extends Interpreter {
+    static type = EchartDescriptor.type
+
+    protected createActor(descriptor: EchartDescriptor, args: UpdateArgs) {
+        return new EchartActor(descriptor.uuid)
+    }
+
+    update(descriptor: EchartDescriptor, args: UpdateArgs) {
+        super.update(descriptor, args)
+        
+        const actor = this.getActor<EchartActor>(descriptor, args)
+        actor.update(descriptor, args)
+    }
+
+    mount(descriptor: EchartDescriptor, args: UpdateArgs, parentInterpreter: Interpreter, parentDescriptor: Descriptor) {
+        super.mount(descriptor, args, parentInterpreter, parentDescriptor)
+        const actor = this.getActor<EchartActor>(descriptor, args)
+
+        const parenActor = parentInterpreter.getActor<HTMLActor>(parentDescriptor, args)
+        parenActor.add(actor)
+    }
+
+    unmount(descriptor: Descriptor, args: UpdateArgs, parentInterpreter: Interpreter, parentDescriptor: Descriptor) {
+        const actor = this.getActor<EchartActor>(descriptor, args)
+        actor.clearStyleClass(actor.DOM)
+        actor.cleanInteraction()
+
+        const parenActor = parentInterpreter.getActor<HTMLActor>(parentDescriptor, args)
+        parenActor.remove(actor)
+
+        super.unmount(descriptor, args, parentInterpreter, parentDescriptor)
+    }
+
+    pickup(descriptor: Descriptor, args: UpdateArgs, result: PickupObject[]) {
+        result.push({ uuid: descriptor.uuid, generatedBy: descriptor.generatedBy })
+    }
+}
+Interpreter.register(EchartInterpreter)
+
+export {
+    EchartInterpreter
+}

package/src/interpreter/LineServiceEchartInterpreter.ts

@@ -0,0 +1,31 @@
+import { UpdateArgs } from "@vyr/engine";
+import { LineServiceEchartDescriptor } from "../descriptor";
+import { ServiceEchartInterpreter } from "./ServiceEchartInterpreter";
+
+class LineServiceEchartInterpreter extends ServiceEchartInterpreter {
+    static type = LineServiceEchartDescriptor.type
+
+    getService(descriptor: LineServiceEchartDescriptor, args: UpdateArgs) {
+        const service = super.getService(descriptor, args)
+
+        return {
+            ...service,
+            smooth: descriptor.smooth,
+            lineStyle: {
+                type: descriptor.lineStyle.type,
+                width: descriptor.lineStyle.width,
+            },
+            itemStyle: {
+                color: this.getStyleColor(descriptor.itemStyleColor),
+            },
+            areaStyle: {
+                color: this.getStyleColor(descriptor.areaStyleColor),
+            }
+        }
+    }
+}
+ServiceEchartInterpreter.register(LineServiceEchartInterpreter)
+
+export {
+    LineServiceEchartInterpreter
+}

package/src/interpreter/PieServiceEchartInterpreter.ts

@@ -0,0 +1,38 @@
+import { UpdateArgs } from "@vyr/engine";
+import { PieServiceEchartDescriptor } from "../descriptor";
+import { ServiceEchartInterpreter } from "./ServiceEchartInterpreter";
+
+class PieServiceEchartInterpreter extends ServiceEchartInterpreter {
+    static type = PieServiceEchartDescriptor.type
+
+    getService(descriptor: PieServiceEchartDescriptor, args: UpdateArgs) {
+        const service = super.getService(descriptor, args)
+
+        return {
+            ...service,
+            roseType: descriptor.roseType,
+            width: descriptor.width,
+            height: descriptor.height,
+            radius: [descriptor.radius.x, descriptor.radius.y],
+            center: [descriptor.center.x, descriptor.center.y],
+            padAngle: descriptor.padAngle,
+            label: {
+                show: descriptor.labelShow,
+                color: descriptor.labelColor,
+                position: descriptor.labelPosition,
+            },
+            itemStyle: {
+                color: this.getStyleColor(descriptor.itemStyle.color),
+                borderType: descriptor.itemStyle.borderType,
+                borderWidth: descriptor.itemStyle.borderWidth,
+                borderColor: this.getStyleColor(descriptor.itemStyle.borderColor),
+                borderRadius: descriptor.itemStyle.borderRadius,
+            }
+        }
+    }
+}
+ServiceEchartInterpreter.register(PieServiceEchartInterpreter)
+
+export {
+    PieServiceEchartInterpreter
+}

package/src/interpreter/ServiceEchartInterpreter.ts

@@ -0,0 +1,90 @@
+import * as echarts from 'echarts'
+import { Descriptor, StyleColor, Interpreter, Queue, UpdateArgs } from "@vyr/engine";
+import { EchartDescriptor, ServiceEchartDescriptor } from "../descriptor";
+import { EchartActor } from '../actor';
+
+class ServiceEchartInterpreter extends Interpreter {
+    static type = ServiceEchartDescriptor.type
+
+    getLinearXYByAngle(angle: number) {
+        const radian = (angle * Math.PI) / 180
+        const x = Math.cos(radian)
+        const y = Math.sin(radian)
+        const x2 = Math.cos(radian + Math.PI)
+        const y2 = Math.sin(radian + Math.PI)
+
+        return { x, y, x2, y2 }
+    }
+
+    getStyleColor(color: StyleColor) {
+        if (color.type == 'linear') {
+            const { x, y, x2, y2 } = this.getLinearXYByAngle(color.angle)
+
+            const colorStops = []
+            for (const item of color.value) {
+                colorStops.push({ offset: item.ratio, color: echarts.color.modifyAlpha(item.value, item.opacity) })
+            }
+
+            const style = {
+                type: color.type,
+                x, y, x2, y2,
+                colorStops
+            }
+
+            return style
+        } else if (color.type === 'radial') {
+            const colorStops = []
+            for (const item of color.value) {
+                colorStops.push({ offset: item.ratio, color: echarts.color.modifyAlpha(item.value, item.opacity) })
+            }
+
+            const style = {
+                type: color.type,
+                r: color.radius,
+                x: color.center.x,
+                y: color.center.y,
+                colorStops
+            }
+
+            return style
+        } else {
+            return echarts.color.modifyAlpha(color.value, color.opacity)
+        }
+    }
+
+    getService(descriptor: ServiceEchartDescriptor, args: UpdateArgs) {
+        return { type: descriptor.echart, name: descriptor.name }
+    }
+
+    update(descriptor: ServiceEchartDescriptor, args: UpdateArgs) {
+        super.update(descriptor, args)
+        const unit = this.graphics.getUnit(descriptor.uuid)
+        const parentDescriptor = Descriptor.get(unit.parent)
+        if (parentDescriptor instanceof EchartDescriptor) {
+            const actor = this.graphics.getActor<EchartActor>(parentDescriptor, args)
+            if (actor === null) return
+            actor.setOptions(parentDescriptor, args)
+            actor.instance.setOption(actor.options)
+        }
+    }
+
+    mount(descriptor: EchartDescriptor, args: UpdateArgs, parentInterpreter: Interpreter, parentDescriptor: Descriptor) {
+        super.mount(descriptor, args, parentInterpreter, parentDescriptor)
+        if (parentDescriptor instanceof EchartDescriptor) {
+            const unit = this.graphics.getUnit(parentDescriptor.uuid)
+            if (unit) unit.trigger(Queue.Update)
+        }
+    }
+
+    unmount(descriptor: Descriptor, args: UpdateArgs, parentInterpreter: Interpreter, parentDescriptor: Descriptor) {
+        if (parentDescriptor instanceof EchartDescriptor) {
+            const unit = this.graphics.getUnit(parentDescriptor.uuid)
+            if (unit) unit.trigger(Queue.Update)
+        }
+        super.unmount(descriptor, args, parentInterpreter, parentDescriptor)
+    }
+}
+
+export {
+    ServiceEchartInterpreter
+}

package/src/interpreter/index.ts

@@ -0,0 +1,5 @@
+export * from './EchartInterpreter'
+export * from './ServiceEchartInterpreter'
+export * from './BarServiceEchartInterpreter'
+export * from './LineServiceEchartInterpreter'
+export * from './PieServiceEchartInterpreter'

package/src/locale/Language.ts

@@ -0,0 +1,10 @@
+import { Locale } from "@vyr/locale";
+import { zhCnLanguageProvider, ZhCNLanguageProvider } from "./LanguageProvider";
+
+Locale.register(zhCnLanguageProvider)
+
+const language = Locale.getLanguage<ZhCNLanguageProvider>(zhCnLanguageProvider.name)
+
+export {
+    language
+}

package/src/locale/LanguageProvider.ts

@@ -0,0 +1,15 @@
+import { LanguageProvider } from '@vyr/locale'
+
+interface ZhCNLanguageProvider extends LanguageProvider {
+    
+}
+
+const zhCnLanguageProvider: ZhCNLanguageProvider = {
+    id: 'zh_CN',
+    name: '@vyr/echarts',
+}
+
+export {
+    ZhCNLanguageProvider,
+    zhCnLanguageProvider,
+}

package/src/locale/index.ts

@@ -0,0 +1,2 @@
+export * from './LanguageProvider'
+export * from './Language'