function fontSize(res) {
const clientWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
if (!clientWidth) return;
let fontSize = clientWidth / 750;
return res * fontSize;
}
var chartDom = document.getElementById("lineCharts");
var myChart = echarts.init(chartDom);
var option;
// 初始化options
function initOptions() {
option = {
grid: {
top: fontSize(20),
bottom: fontSize(40),
right: fontSize(5),
},
xAxis: {
type: "category",
axisLabel: {
color: "#666666",
fontSize: fontSize(22),
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#B2B2B2",
},
},
data: ["三", "四", "五", "六", "日", "一", "二"],
},
yAxis: {
type: "value",
axisLabel: {
color: "#B2B2B2",
fontSize: fontSize(24),
},
splitLine: {
lineStyle: {
color: "#E5E5E5",
},
},
},
series: [
{
data: [110, 135, 105, 156, 148, 200, 120],
type: "line",
showSymbol: false,
lineStyle: {
width: fontSize(3),
color: "#00A2FF",
},
areaStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#00A2FF33",
},
{
offset: 1,
color: "#00A2FF00",
},
],
},
},
},
},
],
};
}
initOptions();
option && myChart.setOption(option);
window.addEventListener("resize", function () {
initOptions();
option && myChart.setOption(option);
myChart.resize();
});