Screen adaptation

The imaging principle of large screen is almost always cast screen, that is, the computer screen is put on the large screen through the cable signal, what content is displayed on the computer, what content will be displayed on the large screen, so the horizontal and vertical of the computer screen can not appear scroll bar. I saw some adaptation schemes on the Internet, and finally referred to the big-screen data visualization — Screen adaptation scheme (multi-resolution). With the SCALE of CSS3, the container was set to the width and height of the design draft, such as 3840*2160, and the container was dynamically scaled according to the width and height of the browser viewport, so as to realize that the container was always covered with the browser viewport, and no scroll bar appeared.

The structure of a container component:

<template>
<div class="bsd-frame" :style="{'background': bgColor}" ref="bsdFrame">
  <slot></slot>
</div>
</template>
Copy the code

The first step is to get the actual width and height of the container, usually the design width and height, or the width and height of the computer screen.

setSize () { this.frameWidth = this.width || screen.width this.frameHeight = this.height || screen.height const frame = Frame.style. width = this.frameWidth + 'px' frame.style.height = this.frameheight + 'px' frame.frame }Copy the code

Second, set the zoom ratio for the container based on the width and height of the browser viewport.

SetScale () {const bodyWidth. = the document body. ClientWidth / / premise is HTML, body height: 100%; width: 100% const bodyHeight = document.body.clientHeight const scaleX = bodyWidth / this.frameWidth const scaleY = bodyHeight / this.frameHeight this.$refs.bsdFrame.style.transform = `scale(${scaleX},${scaleY})` }Copy the code

Part 3: Listen for the resize event and recalculate the container scale each time the resize event is triggered.

mounted () {
  this.setSize()
  this.setScale()
  window.addEventListener('resize', this.setScale)
},
destroyed () {
  window.removeEventListener('resize', this.setScale)
}
Copy the code

Echarts development chart

Mainly used bar chart, line chart, pie chart and other basic charts, as well as maps. The main work of this section is to adjust the icon configuration against the Echarts configuration items. Echarts.apache.org/zh/option.h…

Echarts5 adjusts for on-demand introduction. Separate renderers, components, and diagrams from the Echarts core and reference them as needed. Previously, canvas and SVG renderers were included by default. Now you can choose between Canvas and SVG renderers as needed. Components and charts are introduced on demand in a different way than before. For example, to draw a LineChart with a title, introduce TitleComponent and LineChart as follows.

import * as echarts from 'echarts/core';
import { TitleComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use(
    [TitleComponent, LineChart, CanvasRenderer]
);
Copy the code

Use:

var dom = document.getElementById('main'); var myChart = echarts.init(dom); / / initializes the var option = {xAxis: {type: 'category' data: [' Mon, Tue, Wed, Thu, Fri, Sat, 'Sun']}, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }] }; option && myChart.setOption(option); // Set optionsCopy the code

To draw a chart in a DOM, echarts.init(DOM) initializes an echarts instance and then sets the option mychart.setoption (option) for the instance. You can see the echarts case on the website.

When the data changes and you want to redraw, mychart.setoption (newOption) is called again.

The previous vue-Echarts component library was based on Echarts4, so it was easy to encapsulate a component based on Echarts5 that initializes the chart based on the options passed in, and then rerenders the chart when the options change.

<template> <div class="echarts"></div> </template> <script> import * as echarts from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' echarts.use([CanvasRenderer]) export default { name: 'vue-echarts', props: { options: { type: Object, required: true } }, watch: {options (newValue, oldValue) {if (this.chart && newValue) {// Deep: true is not set, so when data changes, the option pointer must be changed to trigger the method. this.chart.setOption(newValue) } } }, methods: { init (opt) { if (! this.chart) { this.chart = echarts.init(this.$el) } this.chart.setOption(this.options) } }, mounted () { this.init() } } </script> <style lang="scss" scoped> .echarts { width: 100%; height: 100%; } </style>Copy the code

Use:

<vue-echarts :options="chartOption" />
computed: {
  chartOption () {
    const categorySales = this.$store.state.categorySales
    categoryOpt.series[0].data = categorySales
    return Object.assign({}, categoryOpt)
  }
}
Copy the code

Scroll to broadcast

I’m using transition for scrolling, and I’m changing the height of the top line,The transition: height 0.3 s linear;

When the top row is hidden, move its data from the head of the array to the end. Realize cyclic scrolling.

//this.rowHeight is the calculated height of each row, where all row heights are restored to the original value, This.rowheights = new Array(len).fill(this.rowheights).fill(this.rowheights).fill(this.rowheights).fill(this.rowheights).fill(this.rowheights).fill(this.rowheights) Const temp = this.rowsx.slice(this.currentIndex) temp. Push (... this.rowsx.slice(0, this.currentIndex)) this.rowsData = temp this.currentIndex += 1Copy the code
<div v-for="(item, index) in rowsData" :key = "item.index"></div>
Copy the code

Map development

echarts.registerMapThe API supports custom geographic coordinates, such asecharts.registerMap('china', map)The first parameter is the name of the custom map, and the second parameter is the data in GeoJson format, which looks like this:Data in the GeoJson format can be obtained at this site by entering place names.Datav.aliyun.com/tools/atlas…

Customize the use of geographic coordinates:

  • Draw a map directly fortype: 'map'Chart type
Series: [{name: 'product ', type: 'map', map:' China ', Zoom: 1.6, center: [104.114129, 36.050339], itemStyle: { borderColor: 'blue', borderWidth: 2 } } ]Copy the code

Plus the visual mapping componentvisualMap, you can achieve a thermal distribution map.

visualMap: { show: false, min: 0, max: 10000, seriesIndex: [0], inRange: { color: [' # a7d5f2 ', '# 3 f95ff', '# 5470 c6]}}, series: [{name:' product flow to the distribution, type: 'the map, the map:' China 'and zoom: 1.6, center: [104.114129, 36.050339], itemStyle: {borderColor: 'blue', borderWidth: 2}}]Copy the code

  • As a coordinate system, draw scatter plot, line set, etc.
Geo: {map: 'China ', // Customize map name zoom: 1.6, Center: [104.114129, 36.050339], itemStyle: {borderColor: Border-width: 2}}, series: [{type: 'effectScatter', coordinateSystem: 'geo', // specify the geo coordinateSystem symbolSize: function (val) { return val[2] / 200 }, rippleEffect: { brushType: 'stroke' }, label: { show: true, position: ['20', '0'], formatter: '{b}', fontSize: 16 }, itemStyle: { color: 'yellow' } }]Copy the code

The use of custom geographic coordinate system is very common. Some statistics of provinces and cities can be realized by the above method.

data

The project uses simulated data, and vuEX is used for data management and communication. The update mode is scheduled polling.

// home.vue created () {this.$store.dispatch('updateAll') setInterval(() => {// Emulate scheduled polling this.$store.dispatch('updateAll') }, 5 * 60 * 1000) }Copy the code

Simulate the request data in actions.

actions: {
  updateAll (context) {
    setTimeout(() => { // 模拟成功请求接口数据
      // 接口返回，数据变化，更新状态
      //context.commit('updateOverall', data)
        ...
    }, 1000)
  }
},
Copy the code

Processing usage data on a component’s computed:

computed: {
  chartOption () {
    const categorySales = this.$store.state.categorySales
    categoryOpt.series[0].data = categorySales
    return Object.assign({}, categoryOpt)
  }
}
Copy the code

The resources

  • How to determine the design size of large screen for data visualization?
  • Large-screen Data Visualization — Screen adaptation (multi-resolution)
  • Screen adaptation scheme for front-end large-screen projects

The source code

Pay attention to the public number: Alasolala, reply: data large screen, obtain the source code.