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