fix: 新增水球

This commit is contained in:
mtrun
2022-03-28 15:44:55 +08:00
parent bd430aab32
commit d60e6effa1
5 changed files with 327 additions and 224 deletions
@@ -1,14 +1,66 @@
import { publicConfig } from '@/packages/public'
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { WaterPoloConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const includes = []
export const option = {
colors: ['#4fd2dd', '#235fa7'],
series: [
{
type: 'liquidFill',
radius: '90%',
data: [0.5],
center: ['50%', '50%'],
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#446bf5',
},
{
offset: 1,
color: '#2ca3e2',
},
],
globalCoord: false,
},
],
backgroundStyle: {
borderWidth: 1,
color: 'RGBA(51, 66, 127, 0.7)',
},
label: {
normal: {
textStyle: {
fontSize: 50,
color: '#fff',
},
},
},
outline: {
show: false,
borderDistance: 10,
itemStyle: {
borderWidth: 2,
borderColor: '#112165',
},
},
},
],
}
export default class Config extends publicConfig implements CreateComponentType {
export default class Config
extends publicConfig
implements CreateComponentType
{
public key = WaterPoloConfig.key
public chartConfig = cloneDeep(WaterPoloConfig)
public option = option
public option = echartOptionProfixHandle(option, includes)
}
@@ -1,13 +1,44 @@
<template>
<div>
水波
</div>
<v-chart
ref="vChartRef"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
autoresize
></v-chart>
</template>
<script setup lang="ts">
import { computed, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import 'echarts-liquidfill/src/liquidFill.js'
import { CanvasRenderer } from 'echarts/renderers'
import { GridComponent } from 'echarts/components'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import { isPreview } from '@/utils'
const props = defineProps({
themeSetting: {
type: Object,
required: true,
},
themeColor: {
type: Object,
required: true,
},
chartConfig: {
type: Object as PropType<config>,
required: true,
},
})
use([CanvasRenderer, GridComponent])
const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>