Description of project

1. Depend on the package version

// package.json
{
  // ...
  "dependencies": {
    // ...
    "echarts": "^ 4.8.0"."vue": "^ 2.6.10".// ...
  },
  // ...  
}
Copy the code

2. Service Description

Brief analysis of the company’s current data screen situation:

  1. Except for the map module, the amount of data displayed by other modules is controllable.
  2. The project sets up a special exhibition hall, the page needs to be opened for a long time, the page sometimes crashes;
  3. After the page is loaded by the host, the built-in zoom function of the browser may be used to display the page in some scenarios.

The page zooming scheme of the project refers to the implementation idea of Baidu cloud page, and calculates the most appropriate zooming ratio for zooming rendering according to a fixed aspect ratio (e.g. 16:9).

<template>
  <div class="scale-box" :style="{width: cw + 'px', height: ch + 'px'}">
    <div class="scale-container" :style="{transform: 'scale(' + scale + ')', width: width + 'px', height: height + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>
Copy the code
// Container width and height
let cw = 0;
let ch = 0;

// UI specification width and height
let width = 1920;
let height = 1080;
let scale = 1;

// Ratio of viewing area width to height
let ww = window.innerWidth / this.width;
let wh = window.innerHeight / this.height;

// Calculate the actual most appropriate scaling ratio: take the smaller as the scaling base, and leave the space where the content is insufficient to ensure the integrity of the content display. The principle is the same as background-size property of the background image.
scale = ww < wh ? ww : wh;

// Update container render width and height
cw = this.width * scale
ch = this.height * scale
Copy the code

A,CanvasApply colours to a drawing orSVGApply colours to a drawing

1. Theoretical review

  • Canvas is more suitable for drawing charts with very large number of graphic elements, and also for realizing some visual effects.

    Such as: thermal map, geographic coordinate system or parallel coordinate system on the large-scale map or scatter map.

    // Use Canvas renderer (default)
var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
// This is equivalent to:
var chart = echarts.init(containerDom);
Copy the code

  • SVG has a lower memory footprint, slightly better rendering performance, and does not blur when users use the browser’s built-in zoom feature.

    Canvas renderer and SVG renderer are used to draw folds, columns and pie charts of medium data volume. SVG renderer performs better overall on mobile end than Canvas renderer. However, in other scenarios with large amounts of data or interactive graphics, the performance of the current SVG renderer is not as good as the Canvas renderer.

    // Use the SVG renderer
var chart = echarts.init(containerDom, null, {renderer: 'svg'});
Copy the code

  • To sum up, choosing which renderer to use depends onHardware and software Environment,The amount of data,The functional requirementsTo make a decision.

    Business Scene (↓) \ ECharts Renderer (→) Canvas SVG
    Good hardware and software environment

    Not much data    		 Square root Square root
    The software and hardware environments are poor

    Not much data    		 More ECharts instance

    Browsers crash easily    		 x Square root
    A lot of data

    Interaction is more    		 Square root x

  • Note that rich text and materials are not yet supported in the current VERSION of SVG.

2. Project analysis

Based on the existing scaling scheme, the UI draft is output at 1920 × 1080 pixels in width and height, and the purchased hardware specifications are also 1920 × 1080 pixels in width and height.

  • If a page is displayed on a hardware screen, the display is close to the output without scalingUIDraft.
  • But there is actually a scene where nine hardware screens are spliced together into one large screen to render a page (in this case, the page is enlarged twice)9Times. Finally, page elementsRender the fuzzy).

In summary, the company’s final choice of ECharts renderer for the big screen data project was SVG.

/ / SVG rendering
var chart = echarts.init(containerDom, null, {renderer: 'svg'});
Copy the code

3. Do an extension

With regard to the ECharts element rendering blur, a review of the ECharts documentation found a configuration parameter: devicePixelRatio (devicePixelRatio, default browser value window.devicepixelratio).

Can we keep using Canvas rendering and solve the problem of element rendering blur by setting devicePixelRatio?

Here’s the idea:

  1. keepEChartsDefault renderer (Canvas);
  2. Set up thedevicePixelRatioIs a larger value, such as:9;
  3. Use the browser’s built-in zoom function to see if the rendered page elements are blurred. If vague, business code with corresponding scenarios can only be usedSVGRender mode; If it’s not fuzzy, you can continue to use itCanvasRender, just add one moredevicePixelRatioParameter value setting only.

The idea has, that we test next ~

  1. Default renderer, default device pixel ratio

    // Default renderer, default device pixel ratio
var chart = echarts.init(containerDom);
Copy the code

  2. By default, the device pixel ratio is set to a larger value

    // By default renderer, the device pixel ratio is set to a larger value
var chart = echarts.init(containerDom, null, {devicePixelRatio: 9});
Copy the code

  3. SVG rendering

    / / SVG rendering
var chart = echarts.init(containerDom, null, {renderer: 'svg'});
Copy the code

This shows that rendering in SVG is not necessary solely for the sake of the browser’s built-in scaling capabilities. And if you look closely, you’ll find that Canvas rendering has a richer effect: the gradient vertical line of the currently highlighted module is present in Canvas rendering, but not in SVG rendering.

2. Render data with colored native tables with caution

1. Problem statement

Render data using native table (qb-origin-table) based on existing scaling scheme, if table rows (tr) have background color, use this page scaling scheme even if the borders of the table are merged together (border-collapse: collapse;) The spacing between table borders is 0 and border: 0 none; , border-color: transparent; , a black line is still visible between the cells!

Finally, it had to use the meaningless QB-Listening-table div implementation for compatibility.

2. Principle analysis

  1. CSS3 transformattributescaleIt’s not the height of the element that changes, it’sX.YThe scale of the axis.

    <! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>CSS3 Transform Scale parsing</title>
  <style>
    .box-origin {
      width: 100px;
      height: 100px;
      margin: 150px;
      background: lightgray;
      color: black;
    }

    .box-scale {
      width: 100px;
      height: 100px;
      margin: 150px;
      background: lightgray;
      color: black;
      transform: scale(2);
    }
  </style>
</head>

<body>
  <div class="box-origin">The original div block</div>

  <div class="box-scale">Original DIV block scale The enlarged div block</div>
</body>

</html>
Copy the code

  2. HTML uses a window coordinate system, with the upper left corner of the element box of the reference object as the origin, X-axis to the right, Y-axis to the right, and coordinate values corresponding to pixel values.

    The reference object is usually the position non-static element closest to the analysis element.

    • Keep the geometric scaling

    • Resets the zoom scale to the default

    Try resetting the scale of table rows (transform: scale(1);) The black line is not eliminated. Take the coordinate system into account and reset one layer at a time until you reach the outer scaling ratio. The black line is finally gone!

Three,VueThe recommendedEChartsComponent templates

<template>
  <div ref="moreDataLineChart" style="width: 100%; height: 100%;"></div>
</template>

<script>
/ * * *@description: Multi-line ECharts components *@update: the 2021-02-02 11:03:30 *@author: Ada.H
*/

export default {
  name: 'moreDataLineChart'.props: {
    // Data set
    seriesData: {
      type: Array.default: () = > {
        return[]; }},// other props here ...
  },
  data() {
    return {
      // Component instance object
      myChart: null.// Component configuration parameters
      options: {}}; },mounted() {
    this.init();
  },
  beforeDestroy() {
    this.destroyEchart();
  },
  watch: {
    seriesData: {
      handler() {
        this.$nextTick(() = > {
          this.update();
        });
      },
      deep: true,}},methods: {
    // Initialize the ECharts component
    init() {
      this.destroyEchart();

      if (!this.myChart) {
        this.myChart = this.$echarts.init(this.$refs.moreDataLineChart, null, {
          renderer: 'svg'}); }this.update();
    },
    // Update component data
    update() {
      // Logic handles component options arguments
      const options = {
        series: this.seriesData,
        // other options here ...
      };
      this.options = options;

      // Make sure dom exists
      this.$nextTick(() = > {
        // Clear the canvas
        this.myChart.clear();
        // Call the ECharts component setOption update
        this.myChart.setOption(this.options, true);
        // Update the animation
        this.mixin_loop_animation(this.options, this.myChart, true).then(
          (res) = > {
            if (res) {
              this.mixin_loop_animation(this.options, this.myChart, false); }}); }); },// Destroy the ECharts instance
    destroyEchart() {
      if (this.myChart) {
        this.myChart.clear();
        this.myChart.dispose();
        this.myChart = null; }},// other methods here ...}};</script>
Copy the code
  1. Remember to clean up components when they are destroyedEChartsInstance to release application memory in a timely manner.
  2. Component initializationinitAnd component data updatesupdateIndependent of each other, ensuring that a component is initialized only once during its entire life cycle from creation to destructionEChartsInstance, save program performance consumption.
  3. byVueThe depth of thewatchTo synchronize updatesEChartsInstance view, not roughv-ifTo avoid memory leaks and page crashes.Vue.js avoids memory leaks