shanxi_control/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() {

        },
        data(){
            return{
                xdata: []
            }
        },
        methods: {
            getEcharts() {
                let chartDom = document.getElementById('detailEcharts');
                let myChart = echarts.init(chartDom, '#ffffff');
                let 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>