echarts之折线图实现

最新推荐文章于 2024-03-16 16:21:42 发布

红色的苏里南苦樱桃

最新推荐文章于 2024-03-16 16:21:42 发布

阅读量131

点赞数

分类专栏： Echarts

本文链接：https://blog.csdn.net/weixin_44962808/article/details/104008908

版权

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里我只对折线图做了简单的实现，更多的参数配置请参考官方配置手册 官方文档

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
</head>
<body>
    <div id="echarts02" style="width: 600px;height: 400px;background-color: dimgrey;"></div>
</body>
<script src="../lib/jquery.1.11.3.min.js"></script>
<script src="../lib/echarts.min.js"></script>
<script>
    var mountainFb = echarts.init(document.getElementById('echarts02'));
    var option02 = {
        //设置触碰焦点显示
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        color: "#f4842e",
        xAxis: {
            type: 'category',
            name:'月份',
            boundaryGap: false,
            nameTextStyle:{
                fontSize:18,// X轴箭头文字大小
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
                lineStyle: {
                    // 设置x轴颜色
                    color: '#fff'
                },
                symbol: ['none', 'arrow'],
                symbolSize: [5, 12], //---箭头大小
                symbolOffset: [0, 11],
            },
            axisLabel:{
                interval:0,
                //rotate:-30,
                textStyle:{
                    fontSize:14,//X轴刻度文字大小
                },
                margin:20,
            },
            splitLine:{//隐藏网格线
                show: false,
            },
        },
        yAxis: {
            name: '单位/个',
            type: "value",
            max: 30,
            nameTextStyle:{
                fontSize:18,
            },
            axisLabel:{
                textStyle:{
                    fontSize:14,//X轴刻度文字大小
                },
                margin:20,
            },
            axisLine: {
                lineStyle: {
                    color: "#fff"
                },
                symbol: ['none', 'arrow'],//箭头
                symbolSize: [5, 12], //---箭头大小
                symbolOffset: [0, 11],
            },
            //网格样式
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#173f80'],
                    width: 1,
                    type: 'solid'
                }
            },
            splitLine:{//隐藏网格线
                show: false,
            }
        },
        series: [{
            data: [15,18,16,14,12,13,14,12,9,5,8,14],
            type: 'line',
            smooth: true,
            symbol: "none",//是否显示拐点
            areaStyle: {
                color: '#3e1914',
                origin: 'start',
                opacity: 0.5,
            },
        }]
    }
    mountainFb.setOption(option02)
</script>
</html>

在这里插入图片描述