observe-front/src/views/service/InterfaceDetail/components/LineCharts.vue

<template>
    <div class="line-content">
        <div id="chart1" class="line-chart" v-loading="loading1"></div>
        <div id="chart2" class="line-chart" v-loading="loading2"></div>
        <div id="chart3" class="line-chart" v-loading="loading3"></div>
    </div>
</template>
<script>
import moment from 'moment'
// import resize from '../../service/mixins/resize'
import storage from '@/utils/storage'
import { getChartData } from '@/api/service'
export default {
    data() {
        return {
            myChartScale1: null,
            myChartScale2: null,
            myChartScale3: null,
            subListQuery:{
                start_time: 0,
                end_time: 0,
                app_alias: ''
            },
            loading1: false,
            loading2: false,
            loading3: false
        }
    },
    watch:{
        '$store.state.time.globalTimes':{
            handler(newValue, oldValue) {
                if (newValue){
                    this.subListQuery.start_time= newValue.startTime;
                    this.subListQuery.end_time= newValue.endTime;
                    this.drawEchartsScale()
                }
            }
        }
    },
    created(){
        let appItem = storage.get('appsItem');
        if(JSON.stringify(appItem) !="{}"){
            this.subListQuery.start_time = appItem.start_time;
            this.subListQuery.end_time = appItem.end_time
            this.subListQuery.app_alias = appItem.alias
        }
    },
    mounted() {
        this.$nextTick(() =>{ 
            this.drawEchartsScale()
            
        })
    },
    methods: {
        getChartDataFn(i){
            return new Promise((resolve, reject)=>{
                const rowItem = storage.get('row');
                let obj ={
                    '请求趋势(QPS)': 'request_trend',
                    '延迟分位(ms)': 'latency',
                    '状态码占比': 'status_trend'
                }
                let par = {
                    start_time:this.subListQuery.start_time,    // 开始时间
                    end_time:this.subListQuery.end_time,    // 结束时间
                    app_alias:this.subListQuery.app_alias,       // 应用别名
                    type:obj[i],           // 类型，request_trend（默认）、status_trend、latency
                    service_name:rowItem.service_name,        // 服务名
                    method:rowItem.method,                      // 请求方法
                    route:rowItem.route,   // 请求路由
                }
                getChartData(par).then(res=>{
                    resolve(res)
                }).catch(error=>{
                    reject(error)
                })
            })
        },
        async drawEchartsScale() {
            //绘制趋势echarts
            
            let obj = {
                1: '请求趋势(QPS)',
                2: '延迟分位(ms)',
                3: '状态码占比'
                // 4: 'HTTP Bandwidth(KB)'
                // 5: 'HTTP Status 4xx Percent Per Minute(%)',
                // 6: 'HTTP Status 5xx Percent Per Minute(%)',
            }
            
            for(let i = 1; i <=3; i++){
                this[`loading${i}`] = true
                if(this[`myChartScale${i}`] == null) {
                    this[`myChartScale${i}`] = this.$echarts5.init(document.getElementById(`chart${i}`));
                    this[`myChartScale${i}`].resize();
                }
                const res = await this.getChartDataFn(obj[i])
                if(res.code == 200){
                    this[`loading${i}`] = false
                    let data = res.data
                    data.text = obj[i]
                    let option = this.getOption(data, obj[i])
                    this[`myChartScale${i}`].setOption(option);
                    this[`myChartScale${i}`].getZr().on('click', params => {
                        let data = storage.get('paramsValue')
                        let timestamp = moment(data[0].name).unix();
                        this.$emit('chartClick', timestamp);
                    })
                    // 分别设置每个实例的 group id
                    this[`myChartScale${i}`].group = 'group1';
                    this.$echarts5.connect('group1');
                }
            }
        },
        getOption(data, type) {
            let option = {
                title:{
                    top: 0,
                    text:data.text,
                    textStyle:{
                        fontSize:14
                    }
                },
                legend: {
                    top: '10%',
                    left: 0,    // 设置水平位置为居中
                    orient: 'horizontal' // 设置图例水平排布
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        storage.set('paramsValue', params)
                        let axisValueLabel = params[0].axisValueLabel
                        let str0 = '';
                        params.forEach((item, idx) => {
                            str0 += `${item.marker}${item.seriesName}<span style='margin-left:30px;text-align:right;font-weight:400'>${item.data}</span>`
                            switch (idx) {
                                case 0:
                                    str0;
                                    break;
                                case 1:
                                    str0;
                                    break;
                                default:
                                    str0
                            }
                            str0 += idx === params.length - 1 ? '' : '<br/>'
                        })
                        return axisValueLabel + '<br>' + str0
                    }
                },
                // toolbox: {
                //     show: true,
                //     top: '8%',
                //     feature: {
                //         dataZoom: { //数据区域缩放。目前只支持直角坐标系的缩放
                //             show: false, //是否显示该工具。
                //         },
                //         dataView: {  //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
                //             show: false 
                //         },
                //         magicType: { type: ['line', 'bar'] },
                //         restore: {},//配置项还原。
                //         saveAsImage: { // 保存为图片。
                //             　show: false, //是否显示该工具。
                //         }
                //     }
                // },
                grid: {
                    left: '4%',
                    right: '8%',
                    bottom: 0,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.times,
                    axisLabel: {
                        interval: data.times.length > 10 ? (data.times.length > 40 ? 8: 3): 0, //每间隔显示一个坐标
                        formatter: function(params) {
                            let newParams = moment(params).format('MM-DD HH:mm');
                            let newArr = newParams.split(' ')
                            let time = newArr[0] + "\n" + newArr[1]
                            return time;
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                    gridIndex: 0,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        show: true
                    },
                },
                series: []
            };
            for(let key in data.values){
                let tempType = type == '状态码占比' ? 'bar':'line'
                let obj = {
                    name: key,
                    type: tempType,
                    data:data.values[key]
                }
                option.series.push(obj)
            }
            
            return option
        }
    }
}
</script>
<style lang="scss" scoped>
.line-content{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow:row wrap;
    .line-chart{
        width: 33%;
        height:300px;
        margin-bottom: 20px;
    }
}
</style>