使用echarts遇到的问题及解决

前言

大家好，我是南木元元，热衷分享有趣实用的文章。echarts是目前非常流行的一个开源可视化图表库，本文就来分享一下我在使用echarts中所遇到的问题以及是如何解决的。

遇到的问题及解决

绘图区与容器有间隔

问题：绘图区和容器有很大间隔

解决：通过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",
     },
   ],
});

空值问题

问题：当某数据不存在时（不同于值为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",
    },
  ],
});

刻度线与标签不对齐

问题：默认的标签在两个刻度线之间，与刻度值没有对齐。

解决：设置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",
     },
   ],
});

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

问题：默认当出现负值时，以0轴为分割线，正值向上显示，负值向下显示，如下图所示：

有时候我们需要坐标轴从负数开始，即正负值都向上显示。
解决：设置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",
    },
  ],
};

效果如下，出现负值时坐标轴从负值开始。

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

将Echarts绘制到自己的canvas上

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

canvas上绘制图像是通过drawImage方法实现的，并且可以支持如下的图像源。

因此，只要将Echarts转化成如上几个图像源就可以绘制到画布上。查看了Echarts官网文档，文档说可以直接使用canvas元素作为容器，而一般我们都是使用div来初始化echarts的。

于是，尝试使用创建的canvas来初始化Echarts。

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

并且可以通过getDom方法来获取ECharts 实例容器的 dom 节点，当前即为canvas元素。

然后就可以通过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上。

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~