<!--
 * @Author: liyingjing ll47991367@qq.com
 * @Date: 2023-03-16 11:17:04
 * @LastEditors: liyingjing ll47991367@qq.com
 * @LastEditTime: 2023-05-22 16:31:41
 * @FilePath: \西安海绵\src\views\assessment\components\waterresource\VBarLine.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- <div>
        <v-chart :options="options" style="width: 100%;height: 100%;" />
    </div> -->
    <div class="asset">
        <div ref="assetEchart" class="asset_echart"></div>
    </div>
</template>
<script  lang="ts" setup>
import { init } from 'echarts';
import { reactive, toRefs, Ref, ref, onMounted } from 'vue';
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let { data } = defineProps(['data'])
console.log(data, '11');

onMounted(() => {
    const chart = init(assetEchart.value as HTMLElement);
    chart.setOption({
        dataset: {
            source: data
        },
        legend: {
            bottom: '0',
            textStyle: {
                //color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crorssStyle: {
                    color: '#999',
                }
            },
            formatter: function (params) {
                var relVal = `${params[0].name}<br />`;
                for (var i = 0; i < params.length; i++) {
                    relVal += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color: ${params[i].color}"></span>
                                    ${params[i].seriesName}：${params[i].data[params[i].componentIndex + 1]}${params[i].componentIndex === 3 ? '%' : '万m³'}
                                <br/>`;
                }
                return relVal;
            }
        },
        xAxis: {
            type: 'category',
            axisPointer: {
                type: 'shadow'
            },
            axisLabel: {
                show: true,
                textStyle: {
                    //color: '#fff'
                },
                nameTextStyle: {
                    //color: '#fff'
                },
            },
        },
        yAxis: [{
            type: 'value',
            name: '万m³',
            axisLabel: {
                //color: '#fff'
            },
            nameTextStyle: {
                //color: '#fff'
            },
        },
        {
            type: 'value',
            name: '利用率',
            axisLabel: {
                formatter: '{value}%',
                //color: '#fff',
                lineStyle: {
                    //color: '#fff',
                }
            },
            nameTextStyle: {
                //color: '#fff'
            },
        }
        ],
        series: [
            { type: 'bar', name: '污水再生回用总量', barWidth: 20 },
            { type: 'bar', name: '污水处理量', barWidth: 20 },
            { type: 'bar', name: '污水处理总量', barWidth: 20 },
            { type: 'line', name: '污水资源利用率', yAxisIndex: 1 },
        ],
        color: ['#fa8c16', '#13c2c2', '#722ed1', '#ffec3d']
    })
})

</script>

<style lang="scss" scoped>
.asset_echart {
    width: 820px;
    height: 704px;
    margin: 10px 14px 0 16px;
    padding: 24px;

    &_echart {
        width: 100%;
        height: 230px;
    }
}
</style>