基于echarts实现在直角坐标系中，绘制多边形；随机生成颜色；修改show-overflow-tooltip样式；格式化时间；websocket使用；el-table中使用checkbox视图不更新

1.基于echarts实现在直角坐标系中，绘制多边形

1.1在项目中引入echarts依赖

npm install echarts --save

1.2在页面中引入echarts

import * as echarts from 'echarts'

1.3html代码

<div id="showEchart" style="width: 400px; height: 400px"></div>

1.4js代码

/*初始化echarts*/
    initEchart() {
      this.echartShowData=[['red',67,-3,66,-4,66,-5,67,-6]]
      const startValueX = this.echartShowData.length > 0 ? this.echartShowData[this.echartShowData.length-1][1] - 1 : -180
      const EndValueX = this.echartShowData.length > 0 ? this.echartShowData[this.echartShowData.length-1][7] + 1 : 180
      const startValueY = this.echartShowData.length > 0 ? this.echartShowData[this.echartShowData.length-1][2] - 1 : -90
      const EndValueY = this.echartShowData.length > 0 ? this.echartShowData[this.echartShowData.length-1][8] + 1 : 90
      let chartDom = document.getElementById('showEchart');
      let myChart = echarts.init(chartDom);
      let option;
      const data = this.echartShowData;
      option = {
        // tooltip: {},
        //鼠标滑动缩放坐标系
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0],
            startValue: startValueX,  
            endValue: EndValueX
          },
          {
            type: 'inside',
            yAxisIndex: [0],
            startValue: startValueY,
            endValue: EndValueY
          },
        ],
        grid: {
          bottom: 80
        },
        xAxis: {
          min: -180,
          max: 180,
          name: '经度',
          nameTextStyle: {
            color: '#000'
          },
          axisLabel: {
            color: '#000' //刻度线标签颜色
          },
          //修改坐标系中刻度线样式
          splitLine:{
            // show:false
            lineStyle:{
              type:'dotted',
              color:'#e3e3e5',
            }
          },
          lineStyle:{
            color:'#000',
          }
        },
        yAxis: {
          min: -90,
          max: 90,
          name: '纬度',
          nameTextStyle: {
            color: '#000'
          },
          axisLabel: {
            color: '#000' //刻度线标签颜色
          },
          splitLine:{
            // show:false
            lineStyle:{
              type:'dotted',
              color:'#dadce0',
            }
          },
          lineStyle:{
            color:'#000',
          }
        },
        series: [
          {
            type: 'custom',
            renderItem: function (params, api) {
              const group = {
                type: 'group',
                children: []
              };
              let coordDims = ['x', 'y'];
              for (let baseDimIdx = 0; baseDimIdx < 1; baseDimIdx++) {
                let otherDimIdx = 1 - baseDimIdx;
                let encode = params.encode;
                // console.log(encode);
                let baseValue = api.value(encode[coordDims[baseDimIdx]][0]);
                let param = [];
                param[baseDimIdx] = baseValue;
                param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][0]);
                let point1 = api.coord(param);
                param[baseDimIdx] = api.value(encode[coordDims[baseDimIdx]][1]);
                param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][1]);
                let point2 = api.coord(param);
                param[baseDimIdx] = api.value(encode[coordDims[baseDimIdx]][2]);
                param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][2]);
                let point3 = api.coord(param);
                param[baseDimIdx] = api.value(encode[coordDims[baseDimIdx]][3]);
                param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][3]);
                let point4 = api.coord(param);
                let style = api.style({
                  stroke: api.value(0),
                  fill: undefined
                });
                group.children.push(
                    {
                      type: 'line',
                      transition: ['shape'],
                      shape: makeShape(
                          baseDimIdx,
                          point1[baseDimIdx],
                          point1[otherDimIdx],
                          point2[baseDimIdx],
                          point2[otherDimIdx]
                      ),
                      style: style
                    },
                    {
                      type: 'line',
                      transition: ['shape'],
                      shape: makeShape(
                          baseDimIdx,
                          point2[baseDimIdx],
                          point2[otherDimIdx],
                          point3[baseDimIdx],
                          point3[otherDimIdx]
                      ),
                      style: style
                    },
                    {
                      type: 'line',
                      transition: ['shape'],
                      shape: makeShape(
                          baseDimIdx,
                          point3[baseDimIdx],
                          point3[otherDimIdx],
                          point4[baseDimIdx],
                          point4[otherDimIdx]
                      ),
                      style: style
                    },
                    {
                      type: 'line',
                      transition: ['shape'],
                      shape: makeShape(
                          baseDimIdx,
                          point4[baseDimIdx],
                          point4[otherDimIdx],
                          point1[baseDimIdx],
                          point1[otherDimIdx]
                      ),
                      style: style
                    }
                );
              }
              function makeShape(baseDimIdx, base1, value1, base2, value2) {
                let shape = {};
                shape[coordDims[baseDimIdx] + '1'] = base1;
                shape[coordDims[1 - baseDimIdx] + '1'] = value1;
                shape[coordDims[baseDimIdx] + '2'] = base2;
                shape[coordDims[1 - baseDimIdx] + '2'] = value2;
                return shape;
              }
              return group;
            },
            encode: {
              x: [1, 3, 5, 7],
              y: [2, 4, 6, 8],
              itemName: 0
            },
            data: data,
            z: 100
          }
        ]
      };
      option && myChart.setOption(option);
    },

1.5优化，添加填充样式js代码

/*初始化echarts*/
    initEchart() {
      this.echartShowData=[['red',67,-3,66,-4,66,-5,67,-6]]
      const startValueX = this.echartShowData.length > 0 ? this.echartShowData[this.echartShowData.length-1][1] - 1 : -180
      const EndValueX = this.echartShowData.length > 0 ? this.echartShowData[this.echartShowData.length-1][7] + 1 : 180
      const startValueY = this.echartShowData.length > 0 ? this.echartShowData[this.echartShowData.length-1][2] - 1 : -90
      const EndValueY = this.echartShowData.length > 0 ? this.echartShowData[this.echartShowData.length-1][8] + 1 : 90
      let chartDom = document.getElementById('showEchart');
      let myChart = echarts.init(chartDom);
      let option;
      const data = this.echartShowData;
      option = {
        // tooltip: {},
        //鼠标滑动缩放坐标系
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0],
            startValue: startValueX,  
            endValue: EndValueX
          },
          {
            type: 'inside',
            yAxisIndex: [0],
            startValue: startValueY,
            endValue: EndValueY
          },
        ],
        grid: {
          bottom: 80
        },
        xAxis: {
          min: -180,
          max: 180,
          name: '经度',
          nameTextStyle: {
            color: '#000'
          },
          axisLabel: {
            color: '#000' //刻度线标签颜色
          },
          //修改坐标系中刻度线样式
          splitLine:{
            // show:false
            lineStyle:{
              type:'dotted',
              color:'#e3e3e5',
            }
          },
          lineStyle:{
            color:'#000',
          }
        },
        yAxis: {
          min: -90,
          max: 90,
          name: '纬度',
          nameTextStyle: {
            color: '#000'
          },
          axisLabel: {
            color: '#000' //刻度线标签颜色
          },
          splitLine:{
            // show:false
            lineStyle:{
              type:'dotted',
              color:'#dadce0',
            }
          },
          lineStyle:{
            color:'#000',
          }
        },
        series: [
          {
            type: 'custom',
            renderItem: function (params, api) {
              const group = {
                type: 'group',
                children: []
              };
              let coordDims = ['x', 'y'];
              for (let baseDimIdx = 0; baseDimIdx < 1; baseDimIdx++) {
                let otherDimIdx = 1 - baseDimIdx;
                let encode = params.encode;
                // console.log(encode);
                let baseValue = api.value(encode[coordDims[baseDimIdx]][0]);
                let param = [];
                param[baseDimIdx] = baseValue;
                param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][0]);
                let point1 = api.coord(param);
                param[baseDimIdx] = api.value(encode[coordDims[baseDimIdx]][1]);
                param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][1]);
                let point2 = api.coord(param);
                param[baseDimIdx] = api.value(encode[coordDims[baseDimIdx]][2]);
                param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][2]);
                let point3 = api.coord(param);
                param[baseDimIdx] = api.value(encode[coordDims[baseDimIdx]][3]);
                param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][3]);
                let point4 = api.coord(param);
                let style = api.style({
                  stroke: api.value(0),
                  fill: api.value(0)==='#000'?'':api.value(0),
                  opacity: 1,
                });
                group.children.push(
                    {
                      type: 'polygon',
                      transition: ['shape'],
                      shape: {
                        points:[[point1[baseDimIdx],point1[otherDimIdx]],[point2[baseDimIdx],point2[otherDimIdx]],[point3[baseDimIdx],point3[otherDimIdx]],[point4[baseDimIdx],point4[otherDimIdx]]]
                      },
                      style: style,
                    },
                );
              }
              return group;
            },
            encode: {
              x: [1, 3, 5, 7],
              y: [2, 4, 6, 8],
              itemName: 0
            },
            data: data,
            z: 100
          }
        ]
      };
      option && myChart.setOption(option);
    },

2.随机生成颜色

2.1代码

 /*随机生成颜色*/
    rgb() {
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      return `rgb(${r},${g},${b})`
    },

3.修改show-overflow-tooltip样式

3.1html代码

<el-table :data="data" :max-height="0.42*height" tooltip-effect="dark myshowT">
   <el-table-column 
      prop="content" label="标签" min-width="120"align="center" show-overflow-tooltip>
   </el-table-column>
</el-table>

3.2css代码

<style>
.myshowT{
  width: 180px;
}
</style>

3.3js代码

<script>
export default {
  data() {
    return {
      height: innerHeight, //用于自适应页面高度
      }
    }
  }
</script>    

4.格式化时间

4.1js代码

  /*格式化时间*/
    formatDate(cellValue) {
      if (cellValue === null || cellValue === "") return "";
      let date = new Date(cellValue)
      let year = date.getFullYear()
      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds + ''
    },

4.websocket基本使用

4.1js代码

methods:{
   /* webSocket方法 */
    init: function () {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket('ws://localhost:8080/ws/url')
        // 监听socket连接
        this.socket.onopen = this.openMsg
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
        // 监听断开连接
        this.socket.onclose = this.close
      }
    },
    //连接成功
    openMsg: function () {
      this.$notify({
        title: '成功',
        message: 'socket连接成功',
        type: 'success'
      })
    },
    //连接失败
    error: function () {
      this.$notify.error({
        title: '错误',
        message: 'socket连接错误'
        type:'error'
      })
      setTimeout(() => {
        this.init()
      }, 30000)
    },
    //接收后台发送的消息
    getMessage: function (msg) {
 
    },
    //用户发送消息
    send: function (data) {
      /*发送数据*/
      this.socket.send(data)
    },
    close: function () {
      /*关闭连接*/
      this.socket.close()
    },
},
 beforeDestroy() {
    this.close()
  },

5.el-table中使用el-checkbox视图不更新问题

5.1html代码

  <el-table-column>
        <template slot="header">
          <el-checkbox :checked="checkedF" @change="getCheckedS"
            >测试</el-checkbox
          >
        </template>
  </el-table-column>

5.2js代码

<script>
export default {
  data() {
    return {
      checkedF: false,
    }
  },
  methods: {
    getCheckedS(val1) {
      this.checkedF = val1
      console.log('checked:', this.checkedF)
    },
  },
}
</script>