songjianet
3 years ago
committed by
GitHub
2 changed files with 97 additions and 0 deletions
@ -0,0 +1,95 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { defineComponent, PropType, ref } from 'vue' |
||||
import initChart from '@/components/chart' |
||||
import type { Ref } from 'vue' |
||||
|
||||
const props = { |
||||
height: { |
||||
type: [String, Number] as PropType<string | number>, |
||||
default: 400, |
||||
}, |
||||
width: { |
||||
type: [String, Number] as PropType<string | number>, |
||||
default: '100%', |
||||
}, |
||||
} |
||||
|
||||
const BarChart = defineComponent({ |
||||
name: 'BarChart', |
||||
props, |
||||
setup() { |
||||
const barChartRef: Ref<HTMLDivElement | null> = ref(null) |
||||
|
||||
const option = { |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'shadow', |
||||
}, |
||||
backgroundColor: '#fff', |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true, |
||||
}, |
||||
xAxis: [ |
||||
{ |
||||
type: 'category', |
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
axisTick: { |
||||
alignWithLabel: true, |
||||
}, |
||||
}, |
||||
], |
||||
yAxis: [ |
||||
{ |
||||
type: 'value', |
||||
}, |
||||
], |
||||
series: [ |
||||
{ |
||||
name: 'Direct', |
||||
type: 'bar', |
||||
barWidth: '60%', |
||||
data: [10, 52, 200, 334, 390, 330, 220], |
||||
}, |
||||
], |
||||
} |
||||
|
||||
initChart(barChartRef, option) |
||||
|
||||
return { barChartRef } |
||||
}, |
||||
render() { |
||||
const { height, width } = this |
||||
return ( |
||||
<div |
||||
ref='barChartRef' |
||||
style={{ |
||||
height: typeof height === 'number' ? height + 'px' : height, |
||||
width: typeof width === 'number' ? width + 'px' : width, |
||||
}} |
||||
/> |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export default BarChart |
Loading…
Reference in new issue