本文介绍了如何在Vue项目中利用Echarts创建一个24小时的折线图，并展示了如何设置样式，包括图表的宽度、高度、颜色等。通过示例代码，展示了如何初始化数据、配置x轴和y轴、以及系列数据。
#1、单纯的界面而已，没有连接任何数据的界面。后面做数据联调的相关内容我会放在后面。
我在建立vue项目的时候就安装了echarts的插件，所以直接引用就可以了。
样式：
代码：
html：<chart :resizable="true" :option="lineData" :style="{height: '780px',width:'100%'}"></chart>
css：
js：
export default {
data() {
return {lineData: {},};},
mounted() {this.renderCharts();},
methods: {
erCharts(data) {
var opts = {
title: {
text: ""
},
legend: {
show: true,
bottom: 0
},
grid: {
left: 20,
right: 20,
top: 20,
bottom: 20,
containLabel: true
},
toolbox: {
show: false
},
tooltip: {
最低0.47元/天 解锁文章
扫一扫
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
