<template>
    <card icon="shuju_icon_jishu" title="技术交易">
        <div class="chart" ref="chart"></div>
    </card>
</template>

<script>
import card from '../card.vue';
import chartOptions from '../../mixins/chartOptions';
import * as echarts from 'echarts';
export default {
    name: 'Transaction',
    components: { card },
    mixins: [chartOptions],
    mounted() {
        this.myChart = echarts.init(this.$refs.chart, 'jmrh');
        var data1 = [];
        var data2 = [];

        for (var i = 0; i < 7; i++) {
            data1.push((Math.random() * 2).toFixed(2));
            data2.push((Math.random() * 5).toFixed(2));
        }

        this.$nextTick(() => {
            this.initChat(this.myChart);
            this.getData();
        });
    },
    methods: {
        getData() {
            this.$http.get('/statDataCenter/techTradeStat').then((res) => {
                var emphasisStyle = {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0,0,0,0.3)',
                    },
                };
                var option = {
                    legend: {
                        show: true,
                        data: ['交易数', '咨询数'],
                        left: '10%',
                        top: 20,
                    },
                    grid: {
                        top: 70,
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    xAxis: {
                        data: res.labels,
                        boundaryGap: true,
                    },
                    series: [
                        {
                            name: '交易数',
                            data: res.tradeData,
                            type: 'bar',
                            stack: 'one',
                            barWidth: '60%',
                            emphasis: emphasisStyle,
                        },
                        {
                            name: '咨询数',
                            data: res.consultData,
                            type: 'bar',
                            stack: 'one',
                            barWidth: '60%',
                            emphasis: emphasisStyle,
                        },
                    ],
                };
                this.myChart.setOption(option);
            });
        },
    },
};
</script>

<style lang="less" scoped>
.chart {
    width: 100%;
    height: 100%;
    flex-grow: 1;
}
</style>
