// 使字体大小为自适应
function fontSize(res) {
let clientWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
var chartDom = document.getElementById("chart");
this.myChart = echarts.init(chartDom, "dark");
var option;
option = {
backgroundColor: "rgba(0,0,0,0)",
color: ["#00FFFF", "#FF8C4D"],
grid: {
show: false,
top: "9%",
right: "8%",
bottom: "30%",
left: "15%",
},
xAxis: {
type: "category",
axisLabel: {
textStyle: {
fontSize: fontSize(0.15),//自适应字体示例
},
},
data: ["9", "10", "11", "12", "13", "14", "15", "16", "17"],
},
yAxis: {
type: "value",
axisLabel: {
textStyle: {
fontSize: fontSize(0.15),
},
},
splitNumber: 10, // 坐标轴的分割段数,是一个预估值,实际显示会根据数据稍作调整。
},
legend: [
{
itemWidth: fontSize(0.15),
itemHeight: fontSize(0.15),
textStyle: {
fontSize: fontSize(0.15),
},
bottom: "7%", //调整位置
left: "25%", //调整位置
data: [{ name: "A数量", icon: "rect" }], //rect为矩形
},
{
itemWidth: fontSize(0.15),
itemHeight: fontSize(0.15),
textStyle: {
fontSize: fontSize(0.15),
},
bottom: "7%", //调整位置
right: "25%", //调整位置
data: [{ name: "B数量", icon: "rect" }], //rect为矩形
},
],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,0.5)", //设置背景图片 rgba格式
color: "#fff",
borderWidth: "1", //边框宽度设置1
borderColor: "rgba(1,27,35,0.5)", //设置边框颜色
textStyle: {
color: "#fff", //设置文字颜色
fontSize: fontSize(0.12),
},
},
series: [
{
name: "A数量",
symbol: "circle",
data: [20, 38, 91, 35, 90, 39, 13, 44, 82],
type: "line",
smooth: true,
},
{
name: "B数量",
data: [49, 32, 9, 34, 100, 30, 100, 56, 78],
type: "line",
smooth: true,
initTimer: null,
},
],
};
if (option && typeof option === "object") {
this.myChart.setOption(option);
}
window.addEventListener("resize", this.myChart.resize);
echarts图表使字体大小为自适应 fontSize函数fontSize(0.15)
最新推荐文章于 2024-06-20 09:09:51 发布