容器大小和主题

容器大小

通常来说，需要在 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)
    }
  },
}

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。