<template>
    <div id="myChart14"></div>
</template>
<script>
    import {helpResulttwo} from '../../api';

    export default {
        name: "Vertical",
        data() {
            return {
                Xdata: [],
                num: [],
            };
        },
        mounted() {
            this.carNumber();
        },
        methods: {
            async carNumber() {
                let myChart = this.$echarts.init(document.getElementById('myChart14'))
                const result = await helpResulttwo();
                result.data.forEach(item => {
                    this.Xdata.push(item.label)
                })
                result.data.forEach(item => {
                    this.num.push(item.value)
                })
                console.log(result, "图三")
                myChart.setOption(
                    {
                        tooltip: {
                            //鼠标悬停提示内容
                            trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item
                            axisPointer: {
                                // 坐标轴指示器，坐标轴触发有效
                                type: "line", // 默认为直线，可选为：'line' | 'shadow'
                                label: 'cross',
                                show: true
                            },
                            formatter: function (param) {
                                console.log(param)
                                return param[0].name + "<br/>" + '帮助企业数量：' + param[0].value + '家'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.Xdata
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: this.num,
                            type: 'line',
                            symbolSize: 10,
                            areaStyle: {
                                color: '#FACCD0'
                            },
                        }]
                    }
                )

            }
        }
    };
</script>
<style lang="less" scoped>
    #myChart14 {
        width: 1200px;
        height: 600px;
        margin-left: 30px;
    }
</style>
