ECharts 实战

根据数据量的大小, 动态调整 ECharts 的宽度

实现构想: 根据数据的 size 调整 div 的大小, 然后调用 ECharts 对象的 resize 方法重置柱状图的宽度:

// 图的大小动态自动调整
let compactWidth = data.size * 32;
let width = compactWidth < 1860 ? 1860 : compactWidth;
this.chartStyle.width = width + 'px';
VueVisit.visitChart.resize();

碰到的问题: 柱状图并没有动态的改变了宽度, 而是下次再调整一次才生效.

原因分析: 应该是 ECharts 渲染或者读取 div 的宽度什么的延迟了.

解决方法: 延时 100 毫秒再调用 ECharts 对象的 resize 方法:

// 图的大小动态自动调整
let compactWidth = data.size * 32;
let width = compactWidth < 1860 ? 1860 : compactWidth;
this.chartStyle.width = width + 'px';
setTimeout(function () {
  VueVisit.visitChart.resize();
}, 100);
// 需要一个延迟, resize() 才能生效

---

ECharts 多个图表大小随屏幕的大小改变自适应, ECharts 多图表自适应窗口大小, ECharts 随页面大小变化而变化;

今天在做云监控(Dashboard)时发现 ECharts 同一页面存在多个图表的时候, 只有一个生效

当页面只有一个图表的时候直接用 window.onresize = myChart.resize 就可以了

resize 用来改变图表尺寸, 在容器大小发生改变时需要手动调用.

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  title: { text: 'ECharts 入门示例' },
  tooltip: {},
  legend: { data: ['销量'] },
  xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
  yAxis: {},
  series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }],
};
// 使用刚指定的配置项和数据显示图表.
myChart.setOption(option);
window.onresize = myChart.resize;

但是如果一个页面有多个图表的时候就需要用到 addEventListener 了, 不然页面上只有一个图表会根据浏览器的变化而自适应.

var myChart = echarts.init(document.getElementById('main'));
var myChartA = echarts.init(document.getElementById('mainA'));
var myChartB = echarts.init(document.getElementById('mainB'));
// 指定图表的配置项和数据
var option = {
  title: { text: 'ECharts 入门示例' },
  tooltip: {},
  legend: { data: ['销量'] },
  xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
  yAxis: {},
  series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }],
};
// 使用刚指定的配置项和数据显示图表.
myChart.setOption(option);
myChartA.setOption(option);
myChartB.setOption(option);

window.addEventListener('resize', function () {
  myChart.resize();
  myChartA.resize();
  myChartB.resize();
});

或者

window.onresize = function () {
  myChart.resize();
  myChartA.resize();
  myChartB.resize();
};

Window: resize event

Window: resize event demo

---

🔥 ECharts 坐标轴刻度标签的显示间隔

xAxis.axisLabel.interval = 'auto';

坐标轴刻度标签的显示间隔，在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。

可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：

(index: number, value: string) => boolean;

第一个参数是类目的 index，第二个值是类目名称，如果跳过则返回 false。

ECharts 是否显示提示框组件

tooltip.show。
是否显示提示框组件。

包括提示框浮层和 axisPointer。

tooltip.show = true;

ECharts 如何禁用 legend 的点击事件

legend.selectedMode = false;

图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。

除此之外也可以设成 'single' 或者 'multiple' 使用单选或者多选模式。

ECharts 刻度标签的内容格式器不显示

yAxis.axisLabel.formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。

yAxis: [
  {
    axisLabel: {
      formatter: function () {
        return '';
      },
    },
  },
];

formatter 后面跟方法时，y 轴的显示值由方法的返回值决定

ECharts 线的颜色

线的颜色。

series-line.lineStyle.color = "#000"

ECharts 图形的颜色

series-line.itemStyle.color = "#000"

图形的颜色。 默认从全局调色盘 option.color 获取颜色

ECharts 是否显示分隔线

xAxis.splitLine.show = false;

X 轴是否显示分隔线。默认数值轴显示，类目轴不显示。

yAxis.splitLine.show = false;

Y 轴是否显示分隔线。默认数值轴显示，类目轴不显示。

🔥 ECharts X 轴不从 0 刻度开始

Y 轴同理

xAxis.boundaryGap = true;

xAxis.boundaryGap 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。

类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

非类目轴，包括时间，数值，对数轴，boundaryGap 是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：

boundaryGap: ['20%', '20%'];

🔥 Echarts 刻度标签旋转

xAxis.axisLabel.rotate;

刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

旋转的角度从 -90 度到 90 度。