neic-hefeng/src/components/dataDetails.vue

<template>
    <el-dialog  width="50%" @closed="closed()" :show-close="false" class="my-info-dialog">
        <template #title>
            <div class="showTitles">
				<div class="titles">{{title}}详情</div>
			</div>
		</template>
        <div class="body">
            <div id="detailEcharts" class="echarts"></div>
        </div>
    </el-dialog>
</template>
<script>
    import * as echarts from "echarts";
    export default {
        props: {
            title: {
                type: String,
                default: '111',
                required: true,
            },
        },
        updated() {
            this.getEcharts()
        },
        mounted() { 
            this.xdata = JSON.parse("[\"09:24\",\"09:25\",\"09:26\",\"09:27\",\"09:28\",\"09:29\",\"09:30\",\"09:31\",\"09:32\",\"09:33\",\"09:34\",\"09:35\",\"09:36\",\"09:37\",\"09:38\",\"09:39\",\"09:40\",\"09:41\",\"09:42\",\"09:43\",\"09:44\",\"09:45\",\"09:46\",\"09:47\",\"09:48\",\"09:49\",\"09:50\",\"09:51\",\"09:52\",\"09:53\",\"09:54\",\"09:55\",\"09:56\",\"09:57\",\"09:58\",\"09:59\",\"10:00\",\"10:01\",\"10:02\",\"10:03\",\"10:04\",\"10:05\",\"10:06\",\"10:07\",\"10:08\",\"10:09\",\"10:10\",\"10:11\",\"10:12\",\"10:13\",\"10:14\",\"10:15\",\"10:16\",\"10:17\",\"10:18\",\"10:19\",\"10:20\",\"10:21\",\"10:22\",\"10:23\",\"10:24\",\"10:25\",\"10:26\",\"10:27\",\"10:28\",\"10:29\",\"10:30\",\"10:31\",\"10:32\",\"10:33\",\"10:34\",\"10:35\",\"10:36\",\"10:37\",\"10:38\",\"10:39\",\"10:40\",\"10:41\",\"10:42\",\"10:43\",\"10:44\",\"10:45\",\"10:46\",\"10:47\",\"10:48\",\"10:49\",\"10:50\",\"10:51\",\"10:52\",\"10:53\",\"10:54\",\"10:55\",\"10:56\",\"10:57\",\"10:58\",\"10:59\",\"11:00\",\"11:01\",\"11:02\",\"11:03\",\"11:04\",\"11:05\",\"11:06\",\"11:07\",\"11:08\",\"11:09\",\"11:10\",\"11:11\",\"11:12\",\"11:13\",\"11:14\",\"11:15\",\"11:16\",\"11:17\",\"11:18\",\"11:19\",\"11:20\",\"11:21\",\"11:22\",\"11:23\",\"11:24\",\"11:25\",\"11:26\",\"11:27\",\"11:28\",\"11:29\",\"11:30\",\"11:31\",\"11:32\",\"11:33\",\"11:34\",\"11:35\",\"11:36\",\"11:37\",\"11:38\",\"11:39\",\"11:40\",\"11:41\",\"11:42\",\"11:43\",\"11:44\",\"11:45\",\"11:46\",\"11:47\",\"11:48\",\"11:49\",\"11:50\",\"11:51\",\"11:52\",\"11:53\",\"11:54\",\"11:55\",\"11:56\",\"11:57\",\"11:58\",\"11:59\",\"12:00\",\"12:01\",\"12:02\",\"12:03\",\"12:04\",\"12:05\",\"12:06\",\"12:07\",\"12:08\",\"12:09\",\"12:10\",\"12:11\",\"12:12\",\"12:13\",\"12:14\",\"12:15\",\"12:16\",\"12:17\",\"12:18\",\"12:19\",\"12:20\",\"12:21\",\"12:22\",\"12:23\",\"12:24\",\"12:25\",\"12:26\",\"12:27\",\"12:28\",\"12:29\",\"12:30\",\"12:31\",\"12:32\",\"12:33\",\"12:34\",\"12:35\",\"12:36\",\"12:37\",\"12:38\",\"12:39\",\"12:40\",\"12:41\",\"12:42\",\"12:43\",\"12:44\",\"12:45\",\"12:46\",\"12:47\",\"12:48\",\"12:49\",\"12:50\",\"12:51\",\"12:52\",\"12:53\",\"12:54\",\"12:55\",\"12:56\",\"12:57\",\"12:58\",\"12:59\",\"01:00\",\"01:01\",\"01:02\",\"01:03\",\"01:04\",\"01:05\",\"01:06\",\"01:07\",\"01:08\",\"01:09\",\"01:10\",\"01:11\",\"01:12\",\"01:13\",\"01:14\",\"01:15\",\"01:16\",\"01:17\",\"01:18\",\"01:19\",\"01:20\",\"01:21\",\"01:22\",\"01:23\",\"01:24\",\"01:25\",\"01:26\",\"01:27\",\"01:28\",\"01:29\",\"01:30\",\"01:31\",\"01:32\",\"01:33\",\"01:34\",\"01:35\",\"01:36\",\"01:37\",\"01:38\",\"01:39\",\"01:40\",\"01:41\",\"01:42\",\"01:43\",\"01:44\",\"01:45\",\"01:46\",\"01:47\",\"01:48\",\"01:49\",\"01:50\",\"01:51\",\"01:52\",\"01:53\",\"01:54\",\"01:55\",\"01:56\",\"01:57\",\"01:58\",\"01:59\",\"02:00\",\"02:01\",\"02:02\",\"02:03\",\"02:04\",\"02:05\",\"02:06\",\"02:07\",\"02:08\",\"02:09\",\"02:10\",\"02:11\",\"02:12\",\"02:13\",\"02:14\",\"02:15\",\"02:16\",\"02:17\",\"02:18\",\"02:19\",\"02:20\",\"02:21\",\"02:22\",\"02:23\",\"02:24\",\"02:25\",\"02:26\",\"02:27\",\"02:28\",\"02:29\",\"02:30\",\"02:31\",\"02:32\",\"02:33\",\"02:34\",\"02:35\",\"02:36\",\"02:37\",\"02:38\",\"02:39\",\"02:40\",\"02:41\",\"02:42\",\"02:43\",\"02:44\",\"02:45\",\"02:46\",\"02:47\",\"02:48\",\"02:49\",\"02:50\",\"02:51\",\"02:52\",\"02:53\",\"02:54\",\"02:55\",\"02:56\",\"02:57\",\"02:58\",\"02:59\",\"03:00\",\"03:01\",\"03:02\",\"03:03\",\"03:04\",\"03:05\",\"03:06\",\"03:07\",\"03:08\",\"03:09\",\"03:10\",\"03:11\",\"03:12\",\"03:13\",\"03:14\",\"03:15\",\"03:16\",\"03:17\",\"03:18\",\"03:19\",\"03:20\",\"03:21\",\"03:22\",\"03:23\",\"03:24\",\"03:25\",\"03:26\",\"03:27\",\"03:28\",\"03:29\",\"03:30\",\"03:31\",\"03:32\",\"03:33\",\"03:34\",\"03:35\",\"03:36\",\"03:37\",\"03:38\",\"03:39\",\"03:40\",\"03:41\",\"03:42\",\"03:43\",\"03:44\",\"03:45\",\"03:46\",\"03:47\",\"03:48\",\"03:49\",\"03:50\",\"03:51\",\"03:52\",\"03:53\",\"03:54\",\"03:55\",\"03:56\",\"03:57\",\"03:58\",\"03:59\",\"04:00\",\"04:01\",\"04:02\",\"04:03\",\"04:04\",\"04:05\",\"04:06\",\"04:07\",\"04:08\",\"04:09\",\"04:10\",\"04:11\",\"04:12\",\"04:13\",\"04:14\",\"04:15\",\"04:16\",\"04:17\",\"04:18\",\"04:19\",\"04:20\",\"04:21\",\"04:22\",\"04:23\",\"04:24\",\"04:25\",\"04:26\",\"04:27\",\"04:28\",\"04:29\",\"04:30\",\"04:31\",\"04:32\",\"04:33\",\"04:34\",\"04:35\",\"04:36\",\"04:37\",\"04:38\",\"04:39\",\"04:40\",\"04:41\",\"04:42\",\"04:43\",\"04:44\",\"04:45\",\"04:46\",\"04:47\",\"04:48\",\"04:49\",\"04:50\",\"04:51\",\"04:52\",\"04:53\",\"04:54\",\"04:55\",\"04:56\",\"04:57\",\"04:58\",\"04:59\",\"05:00\",\"05:01\",\"05:02\",\"05:03\",\"05:04\",\"05:05\",\"05:06\",\"05:07\",\"05:08\",\"05:09\",\"05:10\",\"05:11\",\"05:12\",\"05:13\",\"05:14\",\"05:15\",\"05:16\",\"05:17\",\"05:18\",\"05:19\",\"05:20\",\"05:21\",\"05:22\",\"05:23\"]")
        },
        data(){
            return{
                xdata: []
            }
        },
        methods: {
            getEcharts() {
                console.log(document.getElementById('detailEcharts'));
                var chartDom = document.getElementById('detailEcharts');
                var myChart = echarts.init(chartDom, '#ffffff');
                var option;
                option = {
                    legend: {
                        show: true,
                        data: ["111", "222"],
                        right: 56,
                        icon: "circle",
                        itemWidth: 6,
                        inactiveColor: '#606769',
                        textStyle: {
                            color: '#B3BDC0',
                            fontSize: 12,
                        },
                    },
                    // title: {
                    //     text: 'Income of Germany and France since 1950'
                    // },
                    // tooltip: {
                    //     trigger: 'axis'
                    // },
                    xAxis: [
                        {
                            type: "category",
                            boundaryGap: false,
                            axisLabel: {
                                interval: 60,
                                showMinLabel: true,
                                showMaxLabel: true,
                                formatter: "{value}",
                                fontSize: 14,
                                textStyle: {
                                    color: '#606769',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            data: this.xdata,
                        },
                    ],
                    yAxis: {
                        type: "value",
                        // name: 'y轴',
                        axisLabel: {
                            formatter: "{value}",
                            fontSize: 14,
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#606769',
                            type: "dashed",
                        },
                        },
                    },
                    series: [{
                        name: '111',
                        smooth: true,
                        showSymbol: false,
                        data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260,],
                        type: 'line'
                    },
                    {
                        name: '222',
                        smooth: true,
                        showSymbol: false,
                        data: [50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60, 50, 30, 24, 18, 35, 47, 60,],
                        type: 'line'
                    }]
                };

                option && myChart.setOption(option);
            },
            closed() {
                this.$emit('closed');
            },
        },
    }
</script>

<style>
    .showTitles {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: -10px;
		font-size: 18px;
		color: #FFFFFF;
	}
    .body {
		background-color: black;
		width: 100%;
		margin-top: -30px;
		/* height: 200px; */
	}
    .echarts {
        width: 900px;
        height: 480px;
        /* margin-top: 20px; */
        margin-left: 10px;
        padding-top: 20px;
    }
</style>