BusinessBenchmark/src/components/Overview.vue

<template>
    <div>
        <div style="display:flex">
            <div style="width: 600px">
                <Editor
                    :code="toString(dataformParams)"
                    height="650px"
                    :showDefaultTips="false"
                    @change="setXhrParam"
                />
            </div>
            <div style="padding: 20px">
                <div style="border: 1px solid #d6d6d6; margin-bottom: 10px">
                    <div id="echarts_test" style="width: 800px;height:500px"></div>
                </div>
                <el-button type="primary" @click="ceshisss">刷新</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import Editor from "./editorCode/index.vue";
export default {
    components: {
        Editor
    },
    data() {
        return {
            dataformParams: {},
            getData: ''
        }
    },
    mounted() {
        this.$nextTick(() =>{
            this.getEcharts()
        })
    },
    methods: {
        setXhrParam(value) {
            this.getData = value
        },
        ceshisss() {
            console.log(this.dataformParams)
            this.getData = eval("(" + this.getData + ")")
            
            this.getEcharts(this.getData)
        },
        // 数组转字符串
        toString(obj = {}) {
            return String(JSON.stringify(obj, null, 2));
        },
        getEcharts(val) {
            let option = {}
            if (!val) {
                option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
            } else {
                option = val
            }
            let dom = document.getElementById('echarts_test');
            dom.removeAttribute("_echarts_instance_")
            let myChart = this.$echarts.init(dom);
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        }
    }
}
</script>

<style>

</style>