前言
大家好,我是南木元元,热衷分享有趣实用的文章。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上。
结语
🔥如果此文对你有帮助的话,欢迎💗关注、👍点赞、⭐收藏、✍️评论,支持一下博主~