echarts实现一个波频图
2021-01-03 本文已影响0人
明眸yh
记录工作中遇到的问题，以及解决方案，让坚持成为习惯
今天记录一个echarts实现波拼图，并可以放大，负数在x轴上方
效果图
pic.gif
实现代码
废话不多说直接粘贴代码，假数据数据量太大，这里就不展示了，需要的可以去我的github下载
下面实例，少量数据只做参考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>波形图</title>
<style>
* {
margin: 0;
padding: 0;
background-color: #fff;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:503px;overflow: hidden;"></div>
<script type="text/javascript">
function showLine2(str) {
console.log(str)
var edata = JSON.parse(str)
var myChart = echarts.init(document.getElementById('main'));
// 图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
show: false,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
onZero: false,
color: '#666669',
lineStyle: {
type: 'solid',
color: '#666669',//左边线的颜色
width:'1'//坐标线的宽度
}
},
name: '秒',
axisLabel: {
formatter: '{value} ',
color: '#666669'
},
data: edata.arr1
},
yAxis: {
name: 'mm/s',
type: 'value',
axisLabel: {
formatter: '{value} ',
color: '#666669'
},
splitLine: {
lineStyle: {
color: "#EEEEF1"
}
},
axisLine: {
color: '#666669',
lineStyle: {
type: 'solid',
color: '#666669',//左边线的颜色
width:'1'//坐标线的宽度
}
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: '#FF4A4A'
}, {
gt: 6,
lte: 8,
color: '#FF4A4A'
}, {
gt: 8,
lte: 14,
color: '#FF4A4A'
}, {
gt: 14,
lte: 17,
color: '#FF4A4A'
}, {
gt: 17,
color: '#FF4A4A'
}]
},
dataZoom: [{
show: true,
type: 'inside',
filterMode: 'none',
// xAxisIndex: [0],
// startValue: -20,
// endValue: 20
}, {
show: true,
type: 'inside',
filterMode: 'none',
// yAxisIndex: [0],
// startValue: -20,
// endValue: 20
}],
series: [{
itemStyle : {
normal : {
lineStyle:{
color:'#FF4A4A'
}
}
},
name: '秒',
type: 'line',
smooth: true,
data: edata.arr2,
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on('click', function (params) {
console.log(params)
let data = {
x: params.name,
y: params.value
}
console.log(data)
alert(JSON.stringify(data))
// window.webkit.messageHandlers.iOSObj.postMessage(data)
});
}
let data = {
arr1: [
0.0,4.0E-5,0.00184,0.00188,0.00191,0.00223,0.00371,0.00379,0.00383,0.00492
],
arr2: [
0.0,-0.3,13.6,11.0,12.5,13.2,2.8,2.8,3.2,-2.6
]
}
let str = JSON.stringify(data)
showLine2(str)
</script>
</body>
</html>
效果图
