fix:新增横向柱状图

This commit is contained in:
MTrun 2022-02-02 00:46:42 +08:00
parent ded1f8ae4b
commit ccf78c6dd2
3 changed files with 84 additions and 6 deletions

View File

@ -0,0 +1,43 @@
import { getUUID } from '@/utils'
import { BarCrossrangefig } from './index'
import { ConfigType, CreateComponentType } from '@/packages/index.d'
import omit from 'lodash/omit'
export default class Config implements CreateComponentType {
public id: string = getUUID()
public key: string = BarCrossrangefig.key
public chartData: Exclude<ConfigType, ['node']> = omit(BarCrossrangefig, ['node'])
public attr = { x: 0, y: 0, w: 500, h: 300 }
// 图表配置项
public config = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'value',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'category'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
}
// 设置坐标
public setPosition(x: number, y: number): void {
this.attr.x = x
this.attr.y = y
}
}

View File

@ -0,0 +1,7 @@
<template>
<div>配置项目</div>
</template>
<script setup lang="ts">
</script>

View File

@ -1,13 +1,41 @@
<template>
<div>
柱状图组件渲染
</div>
<v-chart theme="dark" :option="option" autoresize />
</template>
<script setup lang="ts">
import { computed, toRef, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
GridComponent,
TooltipComponent,
LegendComponent
} from 'echarts/components'
import config from './config'
const props = defineProps({
chartData: {
type: Object as PropType<config>,
required: true
}
})
use([
CanvasRenderer,
BarChart,
GridComponent,
TooltipComponent,
LegendComponent
])
const option = computed(() => {
return props.chartData.config
})
const attr = toRef(props.chartData, 'attr')
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>