Echart折线图

酷到无边99

已于 2022-03-09 15:22:17 修改

阅读量500

点赞数 1

分类专栏： echarts 文章标签： Echarts 数据可视化水库监测 PH值线图

于 2022-02-10 16:32:11 首次发布

本文链接：https://blog.csdn.net/m0_47697572/article/details/122863689

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初始化echart

//**初始化echart

var myChart = echarts.init(document.getElementById('main'));

option = {

title: {

Text: '水库'

},

tooltip: {

trigger: 'axis'

},

legend: {

data: ['PH值', '浊度', '余氯', '温度']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

// 横坐标

xAxis: {

type: 'category',

boundaryGap: false,

data: 'Create_time'

},

//纵坐标

yAxis: {

type: 'value'

},

series: [{

name: 'PH值',

type: 'line',

stack: 'Total',

data: [17, 18, 19, 11, 10]

},

{

name: '浊度',

type: 'line',

stack: 'Total',

data: [18.1, 17.6, 19.2, 19.2, 19.2]

},

{

name: '余氯',

type: 'line',

stack: 'Total',

data: [6, 10, 9, 9, 9]

},

{

name: '温度',

type: 'line',

stack: 'Total',

data: [30, 10, 20, 20, 10]

}

]

};

// 使用刚指定的配置项和数据显示图表。

option && myChart.setOption(option);

// 使用刚指定的配置项和数据显示图表。

option && myChart.setOption(option);