89 lines
1.8 KiB
Vue
89 lines
1.8 KiB
Vue
<template>
|
|
<div class="bar-spike">
|
|
<div :id="domId" :style="{ width: w, height: h }"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineProps, defineEmits, inject } from 'vue';
|
|
import { onMounted } from 'vue';
|
|
const props = defineProps({
|
|
id: String,
|
|
w: {
|
|
type: Number,
|
|
default: 200
|
|
},
|
|
h: {
|
|
type: Number,
|
|
default: 200
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '尖峰图'
|
|
},
|
|
xData: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
});
|
|
const emits = defineEmits(['click']);
|
|
const echarts = inject('echarts');
|
|
const domId = ref(props.id);
|
|
const w = ref(`${props.w}px`);
|
|
const h = ref(`${props.h}px`);
|
|
|
|
const init = () => {
|
|
var chart = echarts.init(document.getElementById(domId.value));
|
|
chart.setOption({
|
|
title: {
|
|
text: props.title
|
|
},
|
|
tooltip: {},
|
|
grid: {
|
|
left: 50,
|
|
top: 10
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: props.xData
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
type: 'pictorialBar',
|
|
barCategoryGap: '0%',
|
|
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
|
|
itemStyle: {
|
|
opacity: 0.6
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
opacity: 1
|
|
}
|
|
},
|
|
z: 10,
|
|
data: props.data,
|
|
}]
|
|
})
|
|
chart.on('click', (params) => {
|
|
emits('click', {
|
|
index: params.dataIndex,
|
|
name: props.xData[params.dataIndex],
|
|
value: props.data[params.dataIndex]
|
|
})
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
init();
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
</style> |