initEcharts() {
var chartDom = document.getElementById('echarts');
var myChart = echarts.init(chartDom);
var option;
option = {
//控制整个图表的大小 和 位置
grid:{
left: '15%',
bottom: 30,
top: '20%',
right: '5%'
},
xAxis: {
type: 'category',
boundaryGap: false, //从x轴顶格开始,
onZero: true, //未知
show: true, // 是否 展示 x轴 和 x轴标签
data: ['4日19时', '5日0时', '5日5时', '5日10时', '5日15时', '5日20时', '6日1时','6日16时', '6日21时','7日2时','7日7时', '7日12时', '7日17时'],
axisLabel:{
fontSize: 10, //['4日19时', '5日0时', '5日5时', '5日10时', '5日15时', '5日20时', '6日1时','6日16时', '6日21时','7日2时','7日7时', '7日12时', '7日17时']
}
},
yAxis: {
type: 'value',
name: '潮位:cm',
nameTextStyle: {
fontSize: 10, //潮位:cm
},
axisLabel:{
fontSize: 10, //[520, 232, 501, 134, 290, 330, -320,520, 232, 501, 134, 290, 330, -320]
}
},
series: [
{
data: [520, 232, 501, 134, 290, 330, -320,520, 232, 501, 134, 290, 330, -320],
type: 'line',
symbol: 'none', //折线上的空心圆点 不显示
smooth: true, //未知
smooth: 0.6,
lineStyle: {
color: '#3296FA',
width: 1
},
},
]
};
option && myChart.setOption(option);
}
echarts 平滑曲线图详解
最新推荐文章于 2024-06-07 10:49:07 发布