容器大小和主题

容器大小

通常来说，需要在 HTML 中先定义一个 <div> 容器，并且通过 CSS 使得该容器具有宽度和高度。初始化的时候，传入该容器，图表的大小默认即为该容器的大小

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

注意

需要注意的是，使用这种方法在调用 echarts.init 时需保证容器已经有宽度和高度了

如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小

提示

echarts.init()有三个参数，分别是容器 dom,主题,图表大小对象

var myChart = echarts.init(chartDom, null as any, { width: 300, height: 300 });

也可以重新设置图表大小

var myChart = echarts.init(chartDom, null as any, { width: 300, height: 300 });
myChart.resize({
  width: 800,
  height: 400,
});

当页面尺寸发生变化时，我们可以让图表大小跟着变化

var myChart = echarts.init(chartDom, null as any, { width: 300, height: 300 });
window.addEventListener("resize", () => {
  myChart.resize({
    width: window.innerWidth / 2,
    height: window.innerHeight / 2,
  });
});

这样，你的页面宽度和高度无论怎么变化，始终占据页面宽高的一半

主题设置

最简单的更改全局样式的方式，是直接采用颜色主题（theme）,ECharts5 除了一贯的默认主题外，还内置了'dark'主题

var myChart = echarts.init(chartDom, "dark", { width: 300, height: 300 });

内置的主题可能无法满足你的需求，因此 ECharts 提供了主题编辑器,
可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用

主题文件分为 js 文件和 json 文件

• 如果主题保存为 JSON 文件，则需要自行加载和注册 (在项目中推荐使用)
• 如果保存为 UMD 格式的 JS 文件，文件内部已经做了自注册，直接引入 JS 即可

import * as echarts from "echarts";
import wonderland from "../assets/json/wonderland.json";
export default {
  install: (app: any) => {
    app.config.globalProperties.$bar = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      echarts.registerTheme("themeus", wonderland);
      var myChart = echarts.init(chartDom, "themeus", {
        width: 300,
        height: 300,
      });
      window.addEventListener("resize", () => {
        myChart.resize({
          width: window.innerWidth / 2,
          height: window.innerHeight / 2,
        });
      });
      const option = {
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};