单个vue echarts页面

<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%;

}

</style>

相关推荐
颜进强3 小时前
Vector Store 入门:什么是向量数据库,主流产品如何选择
前端·后端·ai编程
方方洛4 小时前
AI 教程系列-TUI 应用开发教程14-技能系统与可扩展性
前端·javascript·typescript
方方洛4 小时前
AI 教程系列-TUI 应用开发教程05-大模型对话界面设计
前端·javascript·typescript
方方洛4 小时前
AI 教程系列-TUI 应用开发教程08-流式响应与动画
前端·javascript·typescript
方方洛4 小时前
AI 教程系列-TUI 应用开发教程04-第一个 TUI 应用
前端·javascript·typescript
cooldream20094 小时前
AI 时代,前端工程师的“新学习路线“—— 从“学框架“到“用 AI“
前端·人工智能·学习
明日清晨4 小时前
printf(“%p\n“,&((struct A *)NULL)->m_float)的原理
linux·服务器·前端
周全全4 小时前
2kol七月限时彩蛋开源领取
javascript
kingwebo'sZone5 小时前
C#事件声明办法
java·前端·c#
战场小包5 小时前
世界杯结束了,我用 AI 造了平行宇宙,这次结局你写
前端·人工智能·ai编程