mirror of
https://gitee.com/dromara/go-view.git
synced 2024-11-30 02:38:30 +08:00
fix:新增横向柱状图
This commit is contained in:
parent
ded1f8ae4b
commit
ccf78c6dd2
43
src/packages/components/Charts/Bars/BarCrossrange/config.ts
Normal file
43
src/packages/components/Charts/Bars/BarCrossrange/config.ts
Normal 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
|
||||
}
|
||||
}
|
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div>配置项目</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user