irc_web/src/components/readingChart/index.vue

<template>
    <div :id="key" class="readingChart" v-show="visible" :style="{
        'z-index': zIndex
    }">
        <div ref="chartContainer" style="width: 490px; height: 290px;" v-loading="loading"></div>
    </div>
</template>

<script>
import { getReportsChartData } from "@/api/reading"
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DataZoomComponent,
    LegendComponent,
    DatasetComponent,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    DataZoomComponent,
    LegendComponent,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
// let echarts = require('echarts/lib/echarts');

// 按需引入图表
// require('echarts/lib/chart/bar');
// require('echarts/lib/chart/line');
// require('echarts/lib/chart/pie');
// require('echarts/lib/chart/scatter');

// 按需引入组件
// require('echarts/lib/component/tooltip');
// require('echarts/lib/component/title');
// require('echarts/lib/component/legend');
// require('echarts/lib/component/grid');
// require('echarts/lib/component/dataZoom');
export default {
    name: "readingChart",
    props: {

    },
    data() {
        return {
            visible: false,
            zIndex: 9,
            chart: null,
            loading: false,
            key: 'readingChart',
            isInteger: false
        };
    },
    methods: {
        init(event, obj, zIndex = 9) {
            this.loading = true
            this.zIndex = zIndex
            let { key } = obj
            if (key) {
                this.key = key
            }
            this.$nextTick(() => {
                this.visible = true
                let readingChart = document.querySelector(`#${this.key}`);
                let chaY = document.body.clientHeight - event.clientY;
                let chaX = document.body.clientWidth - event.clientX;
                if (chaY < 250) {
                    readingChart.style.top = event.clientY - 220 + "px";
                } else {
                    readingChart.style.top = event.clientY + "px";
                }
                if (chaX < 500) {
                    readingChart.style.left = event.clientX - 520 + "px";
                } else {
                    readingChart.style.left = event.clientX + 15 + "px";
                }
                this.getInfo(obj)
            })
        },
        async getInfo(data) {
            try {
                let { VisitTaskId = null, TrialId = null, QuestionId = null, QuestionName = null, TableQuestionId = null, RowIndex = null, ReportChartTypeEnum = null } = data
                let params = {
                    VisitTaskId, TrialId, QuestionId, TableQuestionId, RowIndex, ReportChartTypeEnum
                }
                this.loading = true
                let res = await getReportsChartData(params)
                this.loading = false
                if (res.IsSuccess) {
                    this.isInteger = res.Result.Type === 'number' && res.Result.ValueType === 0
                    let LatestScanDateList = res.Result.LatestScanDateList.map(item => item.split(" ")[0])
                    let obj = {
                        title: QuestionName,
                        xAxisData: LatestScanDateList || [],
                        series: [],
                        unit: res.Result.Unit === 0 ? '' : res.Result.Unit === 4 ? res.Result.CustomUnit : this.$fd("ValueUnit", res.Result.Unit),
                        visitName: res.Result.VisitTaskNameList,
                        min: null,
                        max: null
                    }
                    res.Result.ChartDataList.forEach((item) => {
                        let arr = []
                        item.Value.forEach((d, index) => {
                            // arr.push([LatestScanDateList[index], d])
                            arr.push(d)
                        })
                        obj.series.push({
                            name: item.Name,
                            data: arr,
                            type: 'line'
                        })
                    });
                    this.initChart(obj)
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        foo() {
            this.visible = false
            this.$emit("foo");
            this.dispose()
        },
        initChart(obj) {
            this.chart = echarts.init(this.$refs.chartContainer);
            // ...图表配置
            const option = {
                title: {
                    text: obj.title,
                    textStyle: {
                        color: "#fff"
                    },
                    left: 0,
                    top: 0
                },
                grid: {
                    left: 50,
                    bottom: 30
                },
                tooltip: {
                    trigger: 'axis',
                    // formatter: function (params) {
                    //     let index = obj.xAxisData.findIndex(item => item === params[0].value[0])
                    //     let result = obj.visitName[index] + ' ' + params[0].value[0] + '<br>'; // 显示类目名（如日期）
                    //     params.forEach(function (item) {
                    //         result += item.marker + ' ' + item.seriesName + ': ' + item.value[1] + '<br>'; // 显示每个系列的图例、系列名和值
                    //     });
                    //     return result;
                    // }
                },
                xAxis: {
                    // type: 'time',
                    // data: obj.xAxisData,
                    data: obj.visitName,
                    axisLine: { // 设置 x 轴线颜色
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                    axisLabel: { // 设置 x 轴文字颜色
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    // splitLine: {
                    //     show: false // 隐藏网格线
                    // },
                    // min: obj.min,
                    // max: obj.max
                },
                yAxis: {
                    name: obj.unit,
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                },
                series: obj.series
            };
            if (this.isInteger) {
                option.yAxis.minInterval = 1
            }
            // 4. 使用配置项渲染图表
            this.chart.setOption(option);
        },
        resize() {
            if (this.chart) {
                this.chart.resize()
            }
        },
        dispose() {
            if (this.chart) {
                this.chart.dispose()
                this.chart = null
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.readingChart {
    min-width: 500px;
    max-width: 500px;
    font-size: 14px;
    display: inline-block;
    background: #000;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    position: fixed;
    padding: 10px 6px;
    list-style-type: none;
    min-height: 300px;
    max-height: 80vh;
    // overflow: hidden;
    // overflow-y: auto;
    box-sizing: border-box;
}
</style>