小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
本文已参与 “掘力星计划” ，赢取创作大礼包，挑战创作激励金。
折线图
项目中需要折线图，第一次接触echarts方面知识，所以将项目中用到的总结一下，方便自己看，也给其他人看看。
注意以下用到的几点知识：
1、就是我们用到的鼠标放在点上时显示的数据效果，在代码中用到的就是tooltip这个参数，其中show的默认值是true，我们可以写也可以省略，当我们不想显示悬浮提示效果，我们可以修改为false，trigger设置这个参数，效果时可以看到一个竖直的虚线，当不添加不会显示，backgroundColor是显示数据的弹窗对应的背景色，可以根据自己需要的颜色进行设置，extraCssText可以设置弹窗显示的阴影效果。
2、xAxis中的data数据的数量要与series中data数据的数量要一致，如果xAxis中的data数据只有10个，而series中data数据有20个，那么我们图中的折线图只能显示10个数据对应的点。xAxis中的type可以不设置也可以设置为category,但是不能设置为value,而yAxis中的type可以不设置也可以设置为value,但是不能设置为category,这两个别弄混了。
3、series中showSymbol是否默认展示圆点，默认为true，如果写false，那么折线图对应的点不会显示圆点，symbol默认为空心，当我们需要实心的，我们需要设置为circle,color设置的是显示的圆点的颜色，symbolSize显示的是圆点大小尺寸，type一定要设置，不能省略，不然折线图是无法显示出来的。lineStyle中是设置折线线条的参数，width是折线的宽度，color是折线的颜色。
4、放缩效果用到的就是dataZoom，这个在频谱图中提到，可以参考那个解释。最后options中的backgroundColor这个参数是设置折线图整个的背景颜色，需要什么颜色，自己更改就行。
options: {
title: {
},
// 悬浮提示
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
textStyle: { color: '#4B9BFB' },
extraCssText: 'box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);'
},
xAxis: {
// name: '1/50mm/s',
type: 'category',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
itemStyle: {
show: false
}
},
yAxis: {
type: 'value',
name: '单位：mm/s',
axisLine: {
show:true,
},
// 给y轴添加单位
// axisLabel:{formatter:'{value}mm/s'}
},
series: [{
// name: '数据',
showSymbol: true,//是否默认展示圆点
symbol: 'circle', //设定为实心点
data: [0, -245, -496, -519, -543, -479, 794, -237, -568, -514, -372, -115, -664, -745, -468, -683, -732, -208, -506, -564, -376, -537, -198, -583, -65, -465, -677, -483, -546, -422, 0, -669, -193, -657, -910, -705, -627, -630, -553, 273, -468, -807, -642, -345, -51, -609, -705, -111, -423, -462, -498, -486, -563, -332, -565, -499, -339, -428, -498, -239, -319, -409, -546, -474, -481],
color: "#4786FF",
symbolSize: 6,
type: 'line',
lineStyle: {
width: 1,
color: '#4786FF',
}
}],
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 100,
height: 8, //组件高度
left: 30, //左边的距离
right: 30, //右边的距离
bottom: 0, //右边的距离
handleColor: '#D3DCFD', //h滑动图标的颜色
handleStyle: {
borderColor: '#D3DCFD',
borderWidth: '1',
shadowBlur: 2,
background: '#D3DCFD',
shadowColor: '#D3DCFD',
},
backgroundColor: '#f4f7f9', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// xAxisIndex: [0]
},
{
type: 'inside',
realtime: true,
start: 0,
end: 5,
},
],
backgroundColor: '#fff'
}
上面的图显示的效果如下, 数据不同显示的图可以不同，自己可以尝试更改数据，效果图想看的话，可以直接复制代码到echarts的案例左侧，然后将option后面的:修改为=就可以了。：
