1.绘图区与容器有间隔
问题：绘图区和容器有很大间隔
解决：通过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", }, ], });
3.刻度线与标签不对齐
问题：默认的标签在两个刻度线之间，与刻度值没有对齐。
解决：设置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", }, ], });
4.柱状图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时，就无效。
5.将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上。
