先看效果图:
代码如下:
<div id="lineChart" style="100%;height:100%"></div>
//自适应字体大小变化 WidthAdaptive(res) { var windth = window.innerWidth; let fontSize = windth / 5280; return fontSize * res; },
myecharts() {
let myChart = this.$echarts.init(document.getElementById("lineChart"));
// 绘制图表
//myChart.setOption({
var option = {
grid: {
left: this.WidthAdaptive(90),
top: this.WidthAdaptive(80),
height: "63%",
"85%",
},
xAxis: [
{
type: "category",
data: [
"10/09",
"10/10",
"10/11",
"10/12",
"10/13",
"10/14",
"10/15",
],
boundaryGap: true,
splitLine: {
//show: true,
lineStyle: {
type: "solid",
},
},
axisLine: {
lineStyle: {
type: "solid",
color: "rgba(77, 101, 129, 0.8)",
},
symbol: ["none", "arrow"],
symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],
symbolOffset: this.WidthAdaptive(10),
},
axisTick: {
show: false,
alignWithLabel: true,
},
axisLabel: {
fontSize: this.WidthAdaptive(24),
fontFamily: "Source Han Sans CN",
fontWeight: 400,
lineHeight: this.WidthAdaptive(40),
color: "#cccccc",
margin: this.WidthAdaptive(12),
},
},
],
yAxis: {
name: "单位: 人",
type: "value",
splitLine: {
lineStyle: {
type: "dashed",
color: "rgba(105, 119, 135, 0.6)",
},
},
axisLine: {
show: true,
lineStyle: {
type: "solid",
color: "rgba(77, 101, 129, 0.8)",
},
symbol: ["none", "arrow"],
symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],
symbolOffset: this.WidthAdaptive(10),
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: this.WidthAdaptive(24),
fontFamily: "Source Han Sans CN",
fontWeight: 400,
lineHeight: this.WidthAdaptive(50),
color: "#cccccc",
margin: this.WidthAdaptive(13),
},
nameGap: this.WidthAdaptive(20),
nameTextStyle: {
fontSize: this.WidthAdaptive(24),
fontFamily: "Source Han Sans CN",
fontWeight: 400,
lineHeight: this.WidthAdaptive(50),
color: "#cccccc",
},
},
series: [
{
data: [1272, 1500, 1750, 1204, 1500, 927, 2000],
type: "line",
lineStyle: {
color: "#0095FF",
this.WidthAdaptive(6),
},
symbol: "circle",
symbolSize: this.WidthAdaptive(33),
itemStyle: {
color: "rgba(0,191,143,0)",
borderColor: "#ffffff",
borderType: "solid",
borderWidth: this.WidthAdaptive(2),
},
smooth: true,
z: 1,
},
{
type: "scatter",
data:[1272, 1500, 1750, 1204, 1500, 927, 2000],
symbolSize: this.WidthAdaptive(16),
itemStyle: {
color: "#ffffff",
opacity: 1,
},
emphasis: {
scale: false,
},
z: 2,
},
],
// });
};
myChart.setOption(option);
window.onresize = myChart.resize;
},