todo

size

推荐设置明确的宽度与高度，如

<div style="width: 600px;height:400px;"></div>

也可以在 init 时设置

echarts.init(document.getElementById("main"), null, {
  width: 600,
  height: 400,
});

当浏览器 size 发生变化，可以通过 resize 事件

window.addEventListener("resize", function () {
  myChart.resize();
});

// resize 可以指定参数
myChart.resize({
  width: 800,
  height: 400,
});

也可以通过 ResizeObserver API

Theme

自带 dark

echarts.init(dom, "dark");

也可以自己定义

import "theme/vintage.json";

echarts.init(dom, "vintage");

直接修改样式

直接修改样式，字段如 itemStyle、lineStyle、areaStyle、label 等等

高亮的样式：emphasis

调色盘

option = {
  // 全局调色盘。
  color: [
    "#c23531",
    "#2f4554",
    "#61a0a8",
    "#d48265",
    "#91c7ae",
    "#749f83",
    "#ca8622",
    "#bda29a",
    "#6e7074",
    "#546570",
    "#c4ccd3",
  ],
};

option = {
  series: [
    {
      type: "bar",
      // 此系列自己的调色盘。
      color: [
        "#dd6b66",
        "#759aa0",
        "#e69d87",
        "#8dc1a9",
        "#ea7e53",
        "#eedd78",
        "#73a373",
        "#73b9bc",
        "#7289ab",
        "#91ca8c",
        "#f49f42",
      ],
      // ...
    },
    {
      type: "pie",
      // 此系列自己的调色盘。
      color: [
        "#37A2DA",
        "#32C5E9",
        "#67E0E3",
        "#9FE6B8",
        "#FFDB5C",
        "#ff9f7f",
        "#fb7293",
        "#E062AE",
        "#E690D1",
        "#e7bcf3",
        "#9d96f5",
        "#8378EA",
        "#96BFFF",
      ],
      // ...
    },
  ],
};

tips

适当使用 echartsInstance.dispose 销毁实例释放资源，避免内存泄漏。