容器大小和主题
原创...大约 2 分钟
容器大小
通常来说,需要在 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);
};
},
};
Powered by Waline v2.15.7