echart三步走

1.初始化echart

<div ref="echarts1"></div>
this.chart1 = echarts.init(this.$refs.echarts1);

2.指定图表的配置项和数据

echartsOption1: {
                    //标题组件
                    title: {
                        text: "温度",
                        left: "center",
                        textStyle: {
                            color: "#fff",
                        },
                    },
                    backgroundColor: '#031d33',
                    textStyle: {
                        fontSize: 16,
                        color: 'rgba(101, 213, 255, 1)',
                    },
                    //图例
                    legend: {
                        top: "bottom",
                        textStyle: {
                            fontSize: 16,
                            color: 'rgba(101, 213, 255, 1)',
                        },
                        icon:
                        'path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z',
                        itemWidth: 8, // 设置宽度
                        itemHeight: 8, // 设置高度、
                        itemGap: 12, // 设置间距
                    },
                    //提示框
                    tooltip: {
                        show: true,
                        trigger: 'axis', //axis , item
                        backgroundColor: 'RGBA(0, 49, 85, 1)',
                        borderColor: 'rgba(0, 151, 251, 1)',
                        borderWidth: 1,
                        borderRadius: 0,
                        textStyle: {
                            color: '#BCE9FC',
                            fontSize: 16,
                            align: 'left',
                        },
                    },
                    //x轴
                    xAxis: {
                        type: 'category',//类目轴
                        // data: this.time
                    },
                    //y轴
                    yAxis: {
                        type:'value',//数据轴
                        name:'℃',
                    },
                    //系列列表
                    series: [
                        {
                            name: '温度',
                            type: 'line',
                            data: [],
                            smooth: true,
                            symbol: 'circle',
                            //区域填充样式
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "rgba(23, 255, 243, 0.3)",
                                            },
                                            {
                                                offset: 0.8,
                                                color: "rgba(255, 100, 97, 0)",
                                            },
                                        ],
                                        false
                                    ),
                                    shadowColor: "rgba(0, 0, 0, 0.1)",
                                    shadowBlur: 10,
                                },
                            },
                            lineStyle: {
                                normal: {
                                    color: "rgba(23, 255, 243, 0.3)",
                                }
                            },

                        }
                    ]
                },

3.使用刚指定的配置项和数据显示图表

this.chart1.setOption(this.echartsOption1);

实时

有了图表，我们要让他动(实时)起来 前端定时从服务器获取数据

setInterval(this.searchAjax, 6000);

或者用websocket

1.创建一个websocket对象

self.socket = new webSocket(后端返回URL 以ws开头)

2.用onopen检测连接的状态，这里发送一个心跳，后端收到后，返回一个心跳消息，onmessage拿到返回的心跳就说明连接正常

self.socket.onopen = function() {
    self.reset().start();
};

3.用onmessage接收消息，后台如果有数据的更新向前端返回新的数据，重新setOption

self.socket.onmessage = function(event) {
    var data = event.data;
}

大屏的布局

<div class="realtime-container">
        <el-row>
            <el-col :span="7"><div ref="echarts1" class="card"></div></el-col>
            <el-col :span="10">
                123
            </el-col>
            <el-col :span="7"><div ref="echarts2" class="card"></div></el-col>
        </el-row>
        <el-row style="margin-top: 20px">
            <el-col :span="7"><div ref="echarts3" class="card"></div></el-col>
            <el-col :span="10"><div ref="echarts4" class="card w90"></div></el-col>
            <el-col :span="7"><div ref="echarts5" class="card"></div></el-col>
        </el-row>
        <!--<div ref="echarts2" class="realtime"></div>-->
    </div>

关键css：高度50vh-去你的空隙，因为画布必须有固定的宽高才能渲染图表

.realtime-container{
  width:100%;
  height:100vh;
}
.card{
  width: 95%;
  height: calc(50vh - 100px);
}