Problems and solutions encountered in using echarts

1. There is an interval between the drawing area and the container

Problem : There is a large gap between the drawing area and the container.
insert image description here
Solution : Set the position of the grid in the container through the top, left, right, and bottom of the grid component. The grid component is the drawing grid in the Cartesian coordinate system

myChart.setOption({
    
    
   grid: {
    
     //使图表占据整个canvas大小
     top: 0,
     right: 0,
     left: 0,
     bottom: 0,
   },
   xAxis: {
    
    
     type: "category",
     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
   },
   yAxis: {
    
    
     type: "value",
   },
   series: [
     {
    
    
       data: [120, 200, 150, 80, 70, 110, 130],
       type: "bar",
     },
   ],
});

2. Null value

Problem : When a certain data does not exist (different from the case where the value is 0).
Solution : The official document states that it can be represented by '-' or null or undefined or NaN.
For example: Mon data does not exist, use "-" instead.

myChart.setOption({
    
    
  xAxis: {
    
    
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    
    
    type: "value",
  },
  series: [
    {
    
    
      data: ["-", 200, 150, 80, 70, 110, 130],
      type: "bar",
    },
  ],
});

insert image description here

3. The tick mark is not aligned with the label

Problem : The default labels are between the two tick marks and are not aligned with the tick values.
insert image description here

Solution : Set boundaryGap: true, alignWithLabel: true, so that the scale line and the label are aligned.

myChart.setOption({
    
    
   xAxis: {
    
    
     type: "category",
     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
     boundaryGap: true,
     axisTick: {
    
    
       alignWithLabel: true, //刻度线和标签对齐，boundaryGap为true时有效
     },
   },
   yAxis: {
    
    
     type: "value",
   },
   series: [
     {
    
    
       data: [120, 200, 150, 80, 70, 110, 130],
       type: "bar",
     },
   ],
});

insert image description here

4. The y-axis of the histogram starts from a negative value (ie does not start from 0)

Problem : By default, when a negative value appears, the 0 axis is used as the dividing line, the positive value is displayed upward, and the negative value is displayed downward, as shown in the following figure:
insert image description here

Sometimes we need the coordinate axis to start from a negative number, that is, both positive and negative values are displayed upwards.
Solution : Set xAxis.axisLine.onZero to false (the default is true), and the default is true, which means the axis is on the 0 scale.

var option = {
    
    
  xAxis: {
    
    
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLine: {
    
    
      onZero: false, //轴线是否在0刻度轴上
    },
  },
  yAxis: {
    
    
    type: "value",
  },
  series: [
    {
    
    
      data: [120, 200, 150, 80, -70, 110, 130],
      type: "bar",
    },
  ],
};

The effect is as follows, when a negative value occurs, the coordinate axis starts from the negative value.
insert image description here

Note : It is valid when the echarts version is 4.0.0 and below, and it is invalid when the version is higher than 4.0.0.

5. Draw Echarts on your own canvas

Echarts is drawn using canvas, and sometimes it is necessary to draw echarts on its own canvas.

Drawing images on the canvas is realized through the drawImage method, and can support the following image sources.
insert image description here

Therefore, as long as Echarts is converted into the above image sources, it can be drawn on the canvas. Check the Echarts official website documentation, the documentation says that you can directly use the canvas element as a container, and generally we use div to initialize echarts.
insert image description here
So, try to use the created canvas to initialize Echarts.

let cvs = document.createElement("canvas"); //创建canvas元素
cvs.width = 400;
cvs.height = 400;
let myChart = echarts.init(cvs); //直接使用canvas元素作为容器

And the dom node of the ECharts instance container can be obtained through the getDom method, which is currently the canvas element.
insert image description here
Then you can use the drawImage method to draw echarts onto the canvas you created.

the code

<template>
  <canvas width="400px;" height="400px" id="canvas"></canvas>
</template>

<script>
import * as echarts from "echarts";
export default {
      
      
  data() {
      
      
    return {
      
      };
  },
  methods: {
      
      
    myEcharts() {
      
      
      let option = {
      
      
        xAxis: {
      
      
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
      
      
          type: "value",
        },
        series: [
          {
      
      
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };
      let cvs = document.createElement("canvas"); //创建canvas元素
      cvs.width = 400;
      cvs.height = 400;
      let myChart = echarts.init(cvs); //直接使用canvas元素作为容器
      myChart.setOption(option);
      let canvasDom = myChart.getDom(); //获取 ECharts 实例容器的 dom 节点，当前即为canvas元素
      setTimeout(function () {
      
      
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        ctx.drawImage(canvasDom, 0, 0); //绘制到画布上
      }, 500);
    },
  },
  mounted() {
      
      
    this.myEcharts();
  },
};
</script>

<style scoped></style>

Effect

Realize drawing echarts on its own canvas.
insert image description here