echarts 曲线图

示例图

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容