bt-xtgxq-population-bigdata/src/components/echarts/BarSpike.vue

<template>
    <div class="bar-spike">
        <div :id="domId" :style="{ width: w, height: h }"></div>
        <div class="percent">
            <ul>
                <li v-for="item in pData" :key="item">{{ item }}</li>
            </ul>
        </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: []
    },
    pData: {
        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,
            right: 100
        },
        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>
.bar-spike
    position relative
    .percent
        font-size 12px
        ul
            position absolute
            list-style none
            top 0
            right 0
            li
                width 100px
                text-align end

</style>