<template>
<div ref="history" class="echarts"></div>
</template>
<script>
export default{
data () {
return {};
},
methods: {
history(){
let myChart = this.$echarts.init(this.$refs.history);
// 绘制图表
myChart.setOption({
textStyle: {
color: '#fff' // 设置文字颜色为白色
},
title: {
text: '载重',
textStyle: {
color: '#fff' // 设置标题颜色为红色
}
},
legend: {
data: ['载重'],
textStyle: {
color: '#fff' // 设置标题颜色
}
},
tooltip: {},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
color: '#fff' // 设置 x 轴轴线颜色
}
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#fff' // 设置 x 轴轴线颜色
}
},
},
series: [
{
name:"载重",
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
color: '#ff0000', // 设置线段的颜色
smooth: true
}
]
});
},
},
mounted () {
this.history();
}
}
</script>
<style scoped>
.echarts{
width: 100%;
height: 100%;
}文章来源：https://www.toymoban.com/news/detail-732287.html
</style>文章来源地址https://www.toymoban.com/news/detail-732287.html
到了这里，关于单个vue echarts页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
![[HTML]Web前端开发技术10（HTML5、CSS3、JavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/783047-1.png)
![[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/787720-1.png)
