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

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

1.效果如下

 2.代码讲解如下

首先下载echarts

npm install echarts@4.9.0 -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.完整代码如下

<template>
    <div class="content-box">
        <div class="container">
            <div id="echartsData"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {};
    },
    mounted() {
        this.lineEcharts();
    },
    methods: {
        lineEcharts() {
            const option = {
                xAxis: {
                    name: '',
                    // type: "",
                    position: 'bottom',
                    offset: 0,
                    axisLabel: {
                        color: '#0000000',
                        fontSize: 10
                    },
                    data: ['5-20', '5-21', '5-22', '5-23', '5-24', '5-25', '5-26', '5-27'],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#59924d',
                            type: 'solid',
                            width: 0.8
                        }
                    },
                    zlevel: 9,
                    axisTick: {
                        show: true,
                        inside: false
                    },
                    axisLine: {
                        show: true,
                        onZero: false,
                        lineStyle: {
                            color: '#333'
                        }
                    }
                },
                // 内置区域缩放
                dataZoom: [
                    {
                        xAxisIndex: [0],
                        type: 'inside',
                        filterMode: 'none'
                    },
                    {
                        yAxisIndex: [0],
                        type: 'inside',
                        filterMode: 'none'
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    transitionDuration: 0 // 让toolltip紧跟鼠标，防止抖动
                },
                legend: {
                    data: ['红色','蓝色','绿色']
                },
                yAxis: [
                    {
                        name: '',
                        type: 'value',
                        show: true,
                        axisLabel: {
                            boundaryGap: false,
                            color: '#000000',
                            fontSize: 10,
                            interval: 0
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#59924d',
                                type: 'dashed',
                                width: 0.8
                            }
                        },
                        zlevel: 9,
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true,
                            onZero: false,
                            lineStyle: {
                                color: '#333'
                            }
                        }
                    }
                ],
                grid: {
                    top: '10%',
                    left: '10%',
                    right: '5%',
                    bottom: '15%'
                },
                series: [
                    {
                        name: '红色',
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line',
                        symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
                        symbolSize: 5, //小圆点的大小
                        markArea: {
                            data: [
                                [
                                    {
                                        yAxis: '0', //开始
                                        itemStyle: {
                                            //  看这里，加了这个属性
                                            color: '#87c6fe',
                                            //   borderWidth: 1,
                                            //   borderType: "dashed",
                                            opacity: 0.8
                                        }
                                    },
                                    {
                                        yAxis: '200'
                                    }
                                ],
                                [
                                    {
                                        yAxis: '200', //结束
                                        itemStyle: {
                                            //  看这里，加了这个属性
                                            color: '#ece6b2',
                                            //   borderWidth: 1,
                                            //   borderType: "solid",
                                            opacity: 0.5
                                        }
                                    },
                                    {
                                        yAxis: '250'
                                    }
                                ],
                                [
                                    {
                                        yAxis: '250',
                                        itemStyle: {
                                            //  看这里，加了这个属性
                                            color: '#ffbf9c',
                                            opacity: 0.6
                                        }
                                    },
                                    {
                                        yAxis: '300'
                                    }
                                ]
                                //  如果有多种颜色，就继续在这里写区间数组，复制上面的下来改颜色
                            ]
                        }
                    },
                    {
                        name: '蓝色',
                        data: [58, 42, 152, 110, 135, 120, 280],
                        type: 'line',
                        symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
                        symbolSize: 5 //小圆点的大小
                    },
                    {
                        name: '绿色',
                        data: [48, 75, 52, 240, 11, 70, 33],
                        type: 'line',
                        symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
                        symbolSize: 5 //小圆点的大小
                    }
                ]
            };
            const myChart = echarts.init(document.getElementById('echartsData'));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    }
};
</script>

<style lang="scss" scoped>
#echartsData {
    height: 500px;
    width: 100%;
}
</style>

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