echart折线图背景颜色自定义，实心圆点，虚线网格等功能

需求：根据传入的值对背景进行分层颜色展示，比如y轴20-40区间颜色为蓝色，40-50为红色这种，折线图的小圆点设置为实现，实现缩放功能

1.效果如下

 2.代码讲解如下

首先下载echarts

npm install [email protected] -S

我这边吓得是4.9版本，高版本会出现一个问题，那就是如果写了背景的话，y轴线的刻度会显示不出来，只有线没有刻度了，所以我这边用的还是以前的版本。

其中onZero：X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效，如果你的值中有负数，直接把这个关了，不然效果如下，刻度线跑0度上面去了 

axisLine: {
                        show: true, //是否显示轴线
                        onZero: false, 
                        lineStyle: {
                            color: '#333'
                        }
                    }

 legend：就是最上面可以点的部分，这个data的值要和series的name值一致，不然写了不显示

  legend: {
                    data: ['红色', '蓝色', '绿色']
                },

 

 tooltip：做了个防止抖动，transitionDuration最好都加上这个，如果图例翻转的话不加一直就会一直抖动，效果也不好

 tooltip: {
                    trigger: 'axis',
                    transitionDuration: 0 // 让toolltip紧跟鼠标，防止抖动
                },

 

 背景区间色：markArea中yAxis是纵轴的范围，这边是0-200设置是蓝色

   markArea: {
                            data: [
                                [
                                    {
                                        yAxis: '0', //开始
                                        itemStyle: {
                                            //  看这里，加了这个属性
                                            color: '#87c6fe',
                                            //   borderWidth: 1,
                                            //   borderType: "dashed",
                                            opacity: 0.8
                                        }
                                    },
                                    {
                                        yAxis: '200',//结束
                                    }
                                ],
         
                                //  如果有多种颜色，就继续在这里写区间数组，复制上面的下来改颜色
                            ]
                        }

 3.完整代码如下

文章到此结束，希望对你有所帮助~