如何让网页中折线图的折线变得平滑

首先这边我们在网页中做折线图这类带有数据的东西，还是使用一些成型产品会比较好点，你可以站在巨人肩膀上对吧。
这边我们使用一个基于JavaScript的开源可视化图表库——ECharts，这样我们就不需要在从HTML里从头学习，或者说推荐大家要先学习一下canvas元素中CanvasRenderingContext2D对象提供的相关方法，也就是通过使用坐标表换。那么我们就别繁琐地计算每个点的坐标,只要对坐标系整体表换即可。
当我们制作折线图的时候，可能会有很多个折线点，那样看起来可能曲曲折折的，没那么丝滑，咋办？

其实ECharts已经自带了一些参数可以进行设置，以最简单的方式直接给大家列出来。
放出这一段代码即可：

1
2
3
symbol:'none',

//如果这边代码注释掉，或者删掉

那就恢复到常规折线图形态

这样是不是很丝滑的折线了？

然后还有一些其他的参数，其实大家慢慢看也能理解了。例如：

1
2
3
4
lineStyle:{

     type:'dotted'

//设置网格线类型 dotted：虚线 solid:实线

     },

线条太细了，想把折线的线条变粗点呢？

1
2
3
4
 lineStyle: {

     width: 4,

//折线的宽度

         }

当然还有更多功能，甚至可以针对性开发，就不在此赘述。

原文链接：https://letus.top/archives/589.html，转载请注明出处 来自[徐伟轩博客]。