<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>折线图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{border: 0;margin: 0;}.not-show{display: none;}.center{text-align: center;}
#main{width:100vw;height:80vh;margin-top:10vh;}
.back{position:fixed;z-index:10;top:30px;left:10px;line-height:30px;font-size:12px;}
.fresh{position:fixed;z-index:20;top:30px;right:10px;line-height:30px;font-size:12px;}
.meng-bg{position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.6);z-index:1000;}
.tip-close{position: absolute;top: 2%;right: 25%;width: 8%;height: 14%;cursor: pointer;z-index: 10;}
.tip-content{
height: 85vh;width: calc(85vh*1.8);
position: absolute;top: 50%;left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
font-size: 3.2vh;background-color: #FFF;
}
.input-bg{height: 45%;padding-top: 18%;}
</style>
</head>
<body>
<!-- <div onclick="close_win()" class="back">返回</div>-->
<!-- <div onclick="fresh_win()" class="fresh">刷新</div>-->
<div id="main"></div>
<!-- <div class="center"><button onclick="show()">维护数据</button></div>-->
<!-- <div class="tip-show meng-bg not-show">-->
<!-- <div class="tip-content">-->
<!-- <div class="tip-close" onclick="mengClose()">×</div>-->
<!-- <div class="center input-bg"><input type="text" placeholder="请输入数据"></div>-->
<!-- <div class="center"><button onclick="save()">提交</button></div>-->
<!-- </div>-->
<!-- </div>-->
<script src="jquery-1.8.3.min.js" ></script>
<script src="echarts.min.js"></script>
<script type="text/javascript">
function show(){
$(‘.tip-show‘).show();
}
function mengClose() {
$(‘.tip-show‘).hide();
}
function save(){
alert(2222);
}
//localStorage存取数据
var dateList = [‘2021-01-16‘,‘2021-01-17‘, ‘2021-01-18‘, ‘2021-01-19‘, ‘2021-01-20‘, ‘2021-01-21‘]; //日期
var valueList = [36.5,36.9,36.3,36.5,36.5,36.6]; //数值
// if(!localStorage.getItem(‘valueList‘)){
// localStorage.setItem(‘dateList‘,JSON.stringify(dateList));
// localStorage.setItem(‘valueList‘,JSON.stringify(valueList));
// }else{
// dateList = JSON.parse(localStorage.getItem(‘dateList‘));
// valueList = JSON.parse(localStorage.getItem(‘valueList‘));
// }
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main‘));
// 指定图表的配置项和数据
option = {
animation: false,
title: {
text: ‘ 温度记录‘
},
legend: {
data: [‘温度‘]
},
tooltip: {},
xAxis: [{
name: ‘日期‘,
type: ‘category‘, // type:坐标轴类型。// [ default: ‘category‘ ]
/*可选： 1.‘value‘ 数值轴，适用于连续数据； 2.‘category‘ 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据； 3.‘time‘
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，
例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度； 4.‘log‘ 对数轴。适用于对数数据。*/
data: dateList, //x轴下面的数据
axisTick: {
show: true, //是否显示网状线 默认为true
alignWithLabel: true
}, //用于设置x下面的字体
axisLabel: {
show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
interval:0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
textStyle: { //textStyle里面写x轴下的字体的样式
color: ‘#333‘,
fontSize: 13
}
},
axisLine: {
show: true, //这里的show用于设置是否显示x轴那一条线 默认为true
lineStyle: { //lineStyle里面写x轴那一条线的样式
color: ‘#6FC6F3‘,
width: 2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
}
}
}],
yAxis:[{
min:35, //y轴的最小值
max:38, //y轴最大值
interval:0.5, //值之间的间隔
//上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值
type:‘value‘,
/* type坐标轴类型:[ default: ‘value‘ ]
可选：1.‘value‘ 数值轴，适用于连续数据。
2.‘category‘ 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
3.‘time‘ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
4.‘log‘ 对数轴。适用于对数数据。*/
splitLine:{
show:true
}, //去除网状线 默认为true
//用于设置y轴的字体
axisLabel:{
show:true, //这里的show用于设置是否显示y轴下的字体 默认为true
textStyle:{ //textStyle里面写y轴下的字体的样式
color:‘#333‘,
fontSize:13
}
},
//用于设置y轴的那一条线
axisLine:{
show:true, //这里的show用于设置是否显示y轴那一条线 默认为true
lineStyle:{ //lineStyle里面写y轴那一条线的样式
color:‘#6FC6F3‘,
width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
}
}
}],
series: [{
name: ‘温度‘,
data: valueList,
itemStyle: {
normal: {
opacity: 0.8,
label : {show: true}
}
},
type: ‘line‘
// type: ‘bar‘：柱状/条形图
// type: ‘line‘：折线/面积图
// type: ‘pie‘：饼图
// type: ‘scatter‘：散点（气泡）图
// type: ‘effectScatter‘：带有涟漪特效动画的散点（气泡）
// type: ‘radar‘：雷达图
// type: ‘tree‘：树型图
// type: ‘treemap‘：树型图
// type: ‘sunburst‘：旭日图
// type: ‘boxplot‘：箱形图
// type: ‘candlestick‘：K线图
// type: ‘heatmap‘：热力图
// type: ‘map‘：地图
// type: ‘parallel‘：平行坐标系的系列
// type: ‘lines‘：线图
// type: ‘graph‘：关系图
// type: ‘sankey‘：桑基图
// type: ‘funnel‘：漏斗图
// type: ‘gauge‘：仪表盘
// type: ‘pictorialBar‘：象形柱图
// type: ‘themeRiver‘：主题河流
// type: ‘custom‘：自定义系列
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
原文：https://www.cnblogs.com/hujavy/p/14308032.html