示例圖

demo3.png

<div id="chart3" style="width:600px; height: 400px;"></div>
<!-- js部分 -->
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script type="text/javascript">
    option = {
        backgroundColor: '#001848',
        xAxis: {
            type: 'category',
            axisTick:{
                show:false,
            },
            boundaryGap: false,
            axisTick:{
                show:false,
            },
            axisLabel:{
                color:'#fff'
            },
            axisLine:{
                lineStyle:{
                    color:'rgba(12,102,173,.5)',
                    width:2,
                }
            },
        },
        yAxis: {
            type: 'value',
            axisTick:{
                show:false,//不顯示刻度線
            },
            axisLabel:{
                color:'#fff'  //y軸上的字體顏色
            },
            axisLine:{
                lineStyle:{
                    width:2,
                    color:'rgba(12,102,173,.5)',//y軸的軸線的寬度和顏色
                }
            },
            splitLine: {
                show: false       
            }
        },
        series: [
            {
                type:'line',
                symbol: 'none',
                smooth:true,
                itemStyle: {
                    normal: {
                        color: '#09b0f5',
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#09b0f5'
                        }, {
                            offset: 1,
                            color: 'rgba(12,102,173,.5)'
                        }])
                    }
                },
            }
        ]
    };
    option.xAxis.data = ['01','02','03','04','05','06','07','08','09','10','11','12 (月)'];
    option.series[0].data = [21,25,27,12,22,21,25,27,12,22,42,32];
    var chart3 = echarts.init(document.getElementById('chart3'));
    chart3.setOption(option);
</script>