百度echarts折线图美化 填充颜色，波浪，分类圆点

 

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
    <!-- 引入 ECharts 文件 -->
    <script src="plug-in/eCharts/echarts.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '病历导入情况',
                left:'80px'
            },
            color: ['#FFA200', '#0ACAE2', '#FF3E43', '#32FF00'],//圆点颜色
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:[
                    {
                        name:'手动录入',
                        itemHeight:9,//改变圆圈大小
                        icon: 'circle'//设置为圆点
                    },
                    {
                        name:'自动录入',
                        itemHeight:9,//改变圆圈大小
                        icon: 'circle'
                    },
                    {
                        name:'待审核',
                        itemHeight:9,//改变圆圈大小
                        icon: 'circle'
                    },
                    {
                        name:'审核通过',
                        itemHeight:9,//改变圆圈大小
                        icon: 'circle'
                    }
                ]
            },
            xAxis: {
                boundaryGap: false,
                data: ["2018-11-1", "2018-11-2", "2018-11-3", "2018-11-4", "2018-11-5", "2018-11-6"]
            },
            yAxis: {},
            series: [{
                name: '手动录入',
                type: 'line',//线型
                smooth:0.3,//波浪
                symbol: 'none',//去掉折点形状
                itemStyle : {
                    normal : {
                        lineStyle:{
                            width:0//线条宽度设置为0
                        }
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#FFA54F'//线条填充颜色
                        }])
                    }
                },
                data: [100, 20, 37, 50, 87, 10]
            },{
                name: '自动录入',
                type: 'line',
                smooth:0.3,
                symbol: 'none',
                itemStyle : {
                    normal : {
                        lineStyle:{
                            width:0
                        }
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#40E0D0'
                        }])
                    }
                },
                data: [6, 46, 87, 34, 67, 23]
            },{
                name: '待审核',
                type: 'line',
                smooth:0.3,
                symbol: 'none',
                itemStyle : {
                    normal : {
                        lineStyle:{
                            width:0
                        }
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#FF4040'
                        }])
                    }
                },
                data: [7, 97, 39, 12, 89, 24]
            },{
                name: '审核通过',
                type: 'line',
                smooth:0.3,
                symbol: 'none',
                itemStyle : {
                    normal : {
                        lineStyle:{
                            width:0
                        }
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#7FFF00'
                        }])
                    }
                },
                data: [8, 56, 40, 100, 13, 45]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>