<div id="chart1" class="charts"></div>
data(){
return{
dataY: [
820,
932,
901,
934,
1290,
1330,
1320,
820,
932,
901,
934,
1290,
1330,
1320,
820,
932,
901,
934,
1290,
1330,
1320,
820
],
dataX: [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23
]
}
}
methods: {
initData() {
let that = this;
var option1 = {
xAxis: {
name: "时",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#d8d8d8" // x坐标轴的轴线颜色
}
},
axisLabel: {
show: true, //这行代码控制着坐标轴x轴的文字是否显示
textStyle: {
color: "#707070", //x轴上的字体颜色
fontSize: "12" // x轴字体大小
}
},
type: "category",
data: this.dataX
},
yAxis: {
name: "℃",
type: "value",
nameTextStyle: {
fontSize: 16
},
splitLine: {
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: "#edeeed"
}
},
axisLine: {
lineStyle: {
color: "#d8d8d8" // x坐标轴的轴线颜色
}
},
axisTick: { show: false },
axisLabel: {
textStyle: {
align: "left",
color: "#707070", //x轴上的字体颜色
fontSize: "12" // x轴字体大小
},
formatter: "{value}",
interval: 0,
margin: 40
}
},
series: [
{
data:this.dataY,
type: "line",
smooth: true,
symbol: "none",
itemStyle: {
normal: {
color: "#5a60c7",
lineStyle: {
color: "#5a60c7"
}
}
}
}
]
};
that.chart1 = that.echarts.init(document.getElementById("chart1")); //定义
that.chart1.clear();
that.chart1.setOption(option1); //展示
that.chart1.resize(); //刷新画布
},
}
mounted() {
let that = this;
that.initData();
window.addEventListener("resize", () => {
this.resize(); //监听屏幕大小,来刷新画布
});
}复制代码
vue使用echarts实现折线图
<div id="chart1" class="charts"></div>data(){return{dataY: [820,932,901,934,1290,1330,1320,820,932,901,...
·
更多推荐
已为社区贡献893条内容
所有评论(0)