TEAMModelOS/TEAMModelOS/ClientApp/src/components/student-analysis/total/BaseGeniusLine.vue

<template>
    <div>
        <Loading :top="100" v-show="dataLoading" type="1"></Loading>
        <div :id='echartsId' class='myLine'></div>
    </div>
</template>

<script>
    import Loading from '@/common/Loading.vue'
    export default {
        name: 'BaseGeniusLine',
        components: {Loading},
        props: ['echartsId', 'echartsData'],
        data() {
            return {
                dataLoading:false,
                radarData: []
            }
        },
        
        methods: {
            drawLine(echartsData) {
                let that = this
                let myLine = this.$echarts.init(
                    document.getElementById(this.echartsId),
                    'chalk'
                )


                // 指定图表的配置项和数据
                var option = {
                    color: ['#00B2C1'],
                    textStyle: {
                        color: 'rgb(222,222,222)'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function(params) {
                            var results = params[0].name + '<br>'
                            for (var i = 0; i < params.length; i++) {
                                if (params[i].seriesType === 'line') {
                                    results += params[i].marker + params[i].seriesName + '：' + params[i].data + '%<br>'
                                } else {
                                    results += params[i].marker + params[i].seriesName + '：' + params[i].data + '<br>'
                                }
                            }
                            return results
                        }
                    },
                    grid: {
                        show: false,
                        containLabel: true,
                        height: 320,
                        width: '98%',
                        x2: '1%',
                        tooltip: {
                            show: true,
                            trigger: 'axis', // 触发类型
                            textStyle: {
                                color: '#666'
                            }
                        }
                    },
                    dataZoom: [
                        {
                            show: true,
                            height: 10,
                            xAxisIndex: [0],
                            bottom: 20,
                            start: 0,
                            end: 100,
                            handleIcon:
                                'M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z',
                            handleSize: '160%',
                            handleStyle: {
                                color: '#d3dee5'
                            },
                            textStyle: {
                                color: '#fff'
                            },
                            borderColor: '#90979c'
                        },
                        {
                            type: 'inside',
                            show: true,
                            height: 15,
                            start: 0,
                            end: 100
                        }
                    ],
                    legend: {
                        data: [this.$t('totalAnalysis.echarts_text18'), this.$t('totalAnalysis.echarts_text17')],
                        textStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    xAxis: [
                        {
                            data: echartsData.className,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#4e4e4e'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: true, // 是否显示
                                inside: false, // 是否朝内
                                rotate: 45, // 旋转角度
                                margin: 15, // 刻度标签与轴线之间的距离
                                color: '#989898', // 默认取轴线的颜色,
                                fontSize: 12,
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: this.$t('totalAnalysis.echarts_text18'),
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {}
                        },
                        {
                            type: 'value',
                            name: this.$t('totalAnalysis.echarts_text17') + '(%)',
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {}
                        }
                    ],
                    series: [
                        {
                            name: this.$t('totalAnalysis.echarts_text18'),
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    // barBorderRadius: [30, 30, 0, 0],
                                    color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#00B2C1'
                                        },
                                        {
                                            offset: 1,
                                            color: '#00B2C1'
                                        }
                                    ])
                                }
                            },
							barMaxWidth:40,
                            data: echartsData.KeyLines.map(item => item[1])
                        },
                        {
                            name: this.$t('totalAnalysis.echarts_text17'),
                            type: 'line',
                            yAxisIndex: 1,
                            symbol: 'circle',
                            symbolSize:10,
                            smooth: false,
                            itemStyle: {
                                normal: {
                                    color: '#ffe898',
                                    barBorderRadius: [30, 30, 0, 0],
                                    lineStyle: {
                                        color: '#ffe898'
                                    }
                                }
                            },
                            data: echartsData.KeyLines.map(item => item[2]),
                            markLine: {
                                symbol: 'none',
                                itemStyle: {
                                    normal: {
                                        lineStyle: {
                                            type: 'dashed',
                                            color: 'red'
                                        },
                                        label: {
                                            show: true,
                                            position: 'left'
                                        }
                                    }
                                },
                                large: true,
                                effect: {
                                    show: false,
                                    loop: true,
                                    period: 0,
                                    scaleSize: 2,
                                    color: null,
                                    shadowColor: null,
                                    shadowBlur: null
                                },
                                data: [
                                    [
                                        {
                                            name: '',
                                            xAxis: '',
                                            yAxis: ''
                                        },
                                        {
                                            name: '',
                                            xAxis: '',
                                            yAxis: ''
                                        }
                                    ]
                                ]
                            }
                        }
                    ]
                }

                    // 绘制图表
                myLine.setOption(option)

                window.addEventListener('resize', function() {
                    myLine.resize()
                })

                myLine.on('finished', function () {
                    if (that.dataLoading) {
                        that.dataLoading = false
                    }
                });
            }
        },
        mounted() {
            if (this.echartsData) this.drawLine()
        },
        watch: {
            echartsData(val) {
                if (!val) return
                
                this.drawLine(val)
            }
        }
    }
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
    .myLine {
        width: 100%;
        height: 420px;
        margin: 0 auto;
        display: block;
    }
</style>