效果圖:
<div style="width: 462px; height: 220px" id="zhexiantu"></div>
// 自适應字型大小變化
WidthAdaptive(res) {
var windth = window.innerWidth;
let fontSize = windth / 1920;
return fontSize * res;
},
drawLine() {
// 基于準備好的dom,初始化echarts執行個體
let myChart = this.$echarts.init(document.getElementById("zhexiantu"));
let option = {
backgroundColor: "transparent",
color: ["#FFDD01"],
grid: {
left: "4%",
right: "5%",
top: "20%",
bottom: "5%",
containLabel: true,
},
xAxis: {
axisTick: { show: false },
boundaryGap: false,
axisLabel: {
margin: 10,
textStyle: { color: "#CCCCCC", fontSize: this.WidthAdaptive(14) },
},
axisLine: {
// onZero: false, // X軸脫離Y軸0刻度
lineStyle: { color: "#cccccc", type: "solid" },
},
data: ["3月", "4月", "5月", "6月", "7月", "8月"],
// data: ["2018年", "2019年", "2020年", "2021年", "2022年", "2023年"],
},
yAxis: {
name: "機關:億元",
nameTextStyle: {
color: "#CCCCCC",
fontSize: this.WidthAdaptive(12),
padding: this.WidthAdaptive(8),
},
axisTick: { show: false },
axisLabel: {
margin: this.WidthAdaptive(10),
textStyle: { color: "#CCCCCC", fontSize: this.WidthAdaptive(12) },
},
axisLine: {
show: false,
lineStyle: { color: "#cccccc", type: "solid" },
},
splitLine: {
lineStyle: {
type: "dashed",
color: "rgba(135,140,147,0.2)",
},
},
boundaryGap: [0, 0.1],
},
series: [
{
name: "地面",
type: "line",
symbolSize: this.WidthAdaptive(6),
symbol: "circle",
data: [61, 65, 96, 59, 54, 69],
areaStyle: {
//區域填充樣式
normal: {
//線性漸變,前4個參數分别是x0,y0,x2,y2(範圍0~1);相當于圖形包圍盒中的百分比。如果最後一個參數是‘true’,則該四個值是絕對像素位置。
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(255, 210, 0, 0.38)",
},
{
offset: 1,
color: "rgba(109, 126, 0, 0)",
},
],
false
),
// shadowColor: "rgba(109, 126, 0, 0.5)", //陰影顔色
shadowBlur: this.WidthAdaptive(20), //shadowBlur設圖形陰影的模糊大小。配合shadowColor,shadowOffsetX/Y, 設定圖形的陰影效果。
},
},
},
],
};
window.onresize = function () {
myChart.resize();
};
myChart.setOption(option);
},