使用echarts遇到的问题及解决

Love The Way You Lie 2023-10-11 17:22 82阅读 0赞

#### 使用echarts遇到的问题及解决 ####

*   *  1.绘图区与容器有间隔
     *  2.空值
     *  3.刻度线与标签不对齐
     *  4.柱状图y轴从负值开始（即不从0开始）
     *  5.将Echarts绘制到自己的canvas上

### 1.绘图区与容器有间隔 ###

**问题**：绘图区和容器有很大间隔  
![在这里插入图片描述][eccc5b8f671b4354b68525c10a2dd17e.png]  
**解决**：通过grid组件的top，left，right，bottom设置grid在容器中的位置，grid组件就是直角坐标系内绘图网格

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.空值 ###

**问题**：当某数据不存在时（不同于值为0的情况）。  
**解决**：官方文档中说明了可以用 ‘-’ 或者 null 或者 undefined 或者 NaN 表示。  
如：Mon的数据不存在，使用"-"代替。

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",
        },
      ],
    });

![在这里插入图片描述][9f5dabb60e5648bcb01a098dfd3b079d.png]

### 3.刻度线与标签不对齐 ###

**问题**：默认的标签在两个刻度线之间，与刻度值没有对齐。  
![在这里插入图片描述][b71935e2f0154078a7a2c196b7b85a1c.png]

**解决**：设置boundaryGap: true，alignWithLabel:true，使得刻度线和标签对齐。

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",
         },
       ],
    });

![在这里插入图片描述][1a84adc0415846e482d15344cd202469.png]

### 4.柱状图y轴从负值开始（即不从0开始） ###

**问题**：默认当出现负值时，以0轴为分割线，正值向上显示，负值向下显示，如下图所示：  
![在这里插入图片描述][449d0cc0e369424fbfd229b5f1963a19.png]

有时候我们需要坐标轴从负数开始，即正负值都向上显示。  
**解决**：设置xAxis.axisLine.onZero为false（默认为true），默认为true，代表轴线在0刻度上。

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",
        },
      ],
    };

效果如下，出现负值时坐标轴从负值开始。  
![在这里插入图片描述][04fd9d54e96d4685a976d69c2096a711.png]

**注意**：当echarts版本为4.0.0及以下时有效，当版本高于4.0.0时，就无效。

### 5.将Echarts绘制到自己的canvas上 ###

Echarts是使用canvas进行绘制的，有时候需要将echarts绘制到自己的canvas上。

canvas上绘制图像是通过drawImage方法实现的，并且可以支持如下的图像源。  
![在这里插入图片描述][d4ee7e075e4041f2b70a4f96f3559dce.png]

因此，只要将Echarts转化成如上几个图像源就可以绘制到画布上。查看了Echarts官网文档，文档说可以直接使用canvas元素作为容器，而一般我们都是使用div来初始化echarts的。  
![在这里插入图片描述][6483024f56f8437080c4a72bed8ac0aa.png]  
于是，尝试使用创建的canvas来初始化Echarts。

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

并且可以通过getDom方法来获取ECharts 实例容器的 dom 节点，当前即为canvas元素。  
![在这里插入图片描述][3e39941074ad4d7fbd8ac107dceb6309.png]  
然后就可以通过drawImage方法将echarts绘制到自己创建的canvas上。

*  代码

<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>

*  效果

实现把echarts绘制到自己的canvas上。  
![在这里插入图片描述][2ad6bf960c6040b695c566661ab35ce8.png]

[eccc5b8f671b4354b68525c10a2dd17e.png]: https://img-blog.csdnimg.cn/eccc5b8f671b4354b68525c10a2dd17e.png
[9f5dabb60e5648bcb01a098dfd3b079d.png]: https://img-blog.csdnimg.cn/9f5dabb60e5648bcb01a098dfd3b079d.png
[b71935e2f0154078a7a2c196b7b85a1c.png]: https://img-blog.csdnimg.cn/b71935e2f0154078a7a2c196b7b85a1c.png
[1a84adc0415846e482d15344cd202469.png]: https://img-blog.csdnimg.cn/1a84adc0415846e482d15344cd202469.png
[449d0cc0e369424fbfd229b5f1963a19.png]: https://img-blog.csdnimg.cn/449d0cc0e369424fbfd229b5f1963a19.png
[04fd9d54e96d4685a976d69c2096a711.png]: https://img-blog.csdnimg.cn/04fd9d54e96d4685a976d69c2096a711.png
[d4ee7e075e4041f2b70a4f96f3559dce.png]: https://img-blog.csdnimg.cn/d4ee7e075e4041f2b70a4f96f3559dce.png
[6483024f56f8437080c4a72bed8ac0aa.png]: https://img-blog.csdnimg.cn/6483024f56f8437080c4a72bed8ac0aa.png
[3e39941074ad4d7fbd8ac107dceb6309.png]: https://img-blog.csdnimg.cn/3e39941074ad4d7fbd8ac107dceb6309.png
[2ad6bf960c6040b695c566661ab35ce8.png]: https://img-blog.csdnimg.cn/2ad6bf960c6040b695c566661ab35ce8.png