Based on echarts, draw polygons in the rectangular coordinate system; randomly generate colors; modify the show-overflow-tooltip style
- 1. Draw polygons in the rectangular coordinate system based on echarts
-
- 1.1Introduce echarts dependency into the project
- 1.2Introduce echarts into the page
- 1.3html code
- 1.4js code
- 1.5 Optimization, add fill style js code
- 2. Randomly generate colors
-
- 2.1 Code
- 3. Modify show-overflow-tooltip style
-
- 3.1html code
- 3.2css code
- 3.3js code
- 4.Format time
-
- 4.1js code
- 4.Basic use of websocket
-
- 4.1js code
- 5. The problem of using el-checkbox view in el-table is not updated
-
- 5.1html code
- 5.2js code
1. Based on echarts, draw polygons in the rectangular coordinate system
1.1 Introduce echarts dependency into the project
npm install echarts –save
1.2 Introduce echarts into the page
import * as echarts from 'echarts'
1.3html code
<div id="showEchart" style="width: 400px; height: 400px"></div>
1.4js code
/*Initialize 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: {},
//Scroll the mouse to zoom the coordinate system
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: 'Longitude',
nameTextStyle: {<!-- -->
color: '#000'
},
axisLabel: {<!-- -->
color: '#000' //Tick mark label color
},
//Modify the tick mark style in the coordinate system
splitLine:{<!-- -->
// show:false
lineStyle:{<!-- -->
type:'dotted',
color:'#e3e3e5',
}
},
lineStyle:{<!-- -->
color:'#000',
}
},
yAxis: {<!-- -->
min: -90,
max: 90,
name: 'Latitude',
nameTextStyle: {<!-- -->
color: '#000'
},
axisLabel: {<!-- -->
color: '#000' //Tick mark label color
},
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 & amp; & amp; myChart.setOption(option);
},
1.5 optimization, add fill style js code
/*Initialize 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: {},
//Scroll the mouse to zoom the coordinate system
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: 'Longitude',
nameTextStyle: {<!-- -->
color: '#000'
},
axisLabel: {<!-- -->
color: '#000' //Tick mark label color
},
//Modify the tick mark style in the coordinate system
splitLine:{<!-- -->
// show:false
lineStyle:{<!-- -->
type:'dotted',
color:'#e3e3e5',
}
},
lineStyle:{<!-- -->
color:'#000',
}
},
yAxis: {<!-- -->
min: -90,
max: 90,
name: 'Latitude',
nameTextStyle: {<!-- -->
color: '#000'
},
axisLabel: {<!-- -->
color: '#000' //Tick mark label color
},
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 & amp; & amp; myChart.setOption(option);
},
2. Randomly generate colors
2.1 code
/*Randomly generate colors*/
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. Modify show-overflow-tooltip style
3.1html code
<el-table :data="data" :max-height="0.42*height" tooltip-effect="dark myshowT">
<el-table-column
prop="content" label="label" min-width="120"align="center" show-overflow-tooltip>
</el-table-column>
</el-table>
3.2css code
<style>
.myshowT{<!-- -->
width: 180px;
}
</style>
3.3js code
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
height: innerHeight, //used for adaptive page height
}
}
}
</script>
4.Formatting time
4.1js code
/*Format time*/
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.Basic use of websocket
4.1js code
methods:{<!-- -->
/* webSocket method */
init: function () {<!-- -->
if (typeof (WebSocket) === 'undefined') {<!-- -->
alert('Your browser does not support socket')
} else {<!-- -->
// Instantiate socket
this.socket = new WebSocket('ws://localhost:8080/ws/url')
//Listen to socket connection
this.socket.onopen = this.openMsg
// Listen for socket error messages
this.socket.onerror = this.error
//Listen to socket messages
this.socket.onmessage = this.getMessage
//Listen for disconnection
this.socket.onclose = this.close
}
},
//connection succeeded
openMsg: function () {<!-- -->
this.$notify({<!-- -->
title: 'Success',
message: 'socket connection successful',
type: 'success'
})
},
//Connection failed
error: function () {<!-- -->
this.$notify.error({<!-- -->
title: 'Error',
message: 'socket connection error'
type:'error'
})
setTimeout(() => {<!-- -->
this.init()
}, 30000)
},
//Receive messages sent in the background
getMessage: function (msg) {<!-- -->
},
//User sends message
send: function (data) {<!-- -->
/*send data*/
this.socket.send(data)
},
close: function () {<!-- -->
/*Close connection*/
this.socket.close()
},
},
beforeDestroy() {<!-- -->
this.close()
},
5. Problem that the el-checkbox view does not update when used in el-table
5.1html code
<el-table-column>
<template slot="header">
<el-checkbox :checked="checkedF" @change="getCheckedS"
>Test</el-checkbox
>
</template>
</el-table-column>
5.2js code
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
checkedF: false,
}
},
methods: {<!-- -->
getCheckedS(val1) {<!-- -->
this.checkedF = val1
console.log('checked:', this.checkedF)
},
},
}
</script>