Echarts笔记——折线图（1）折线图标记区间

最新推荐文章于 2024-05-21 20:58:30 发布

寧三一

最新推荐文章于 2024-05-21 20:58:30 发布

阅读量3.2k

点赞数 2

分类专栏： echarts 文章标签：数据可视化 echarts js

本文链接：https://blog.csdn.net/weixin_51967583/article/details/115335277

版权

echarts 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

Echarts笔记——折线图（1）折线图标记区间

1.折线图类型（ line ）。

2.markPoint : 图表标注（最大值，最小值）。

3.markLine : 图表标线（平均线）。

4.markArea ：图表标域（标记区间）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width:1200px;height:800px;"></div>

<script type="text/javascript">
    line_Data2 = [3324, 2352, 4522, 1469, 6379, 5315, 2793, 4324]
    line_Data1 = [2312, 3145, 6754, 8712, 3157, 1023, 5623, 8324]
    x_Data = ['a部门', 'b部门', 'c部门', 'd部门', 'e部门', 'f部门', 'g部门', 'h部门']

     // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main'))
    $(function (ec) {
        var option = {
            title: {
                text: 'a公司一季度各部门销量(主标题）',
                left: '30%',
                textStyle: {
                    color: 'red',
                    fontSize: 30  }
            },
            xAxis: {
                name: '部门',
                type: 'category',
                data: x_Data,
                axisLabel: {        // x轴标签样式
                    textStyle: { fontSize: 20 }
                },
                nameTextStyle: {     // 坐标轴名字样式
                    fontSize: 20 },
            },
            yAxis: {
                name: '销量（件）',
                type: 'value',
                min: 0,
                axisLabel: {            // 坐标轴标签样式设置
                    textStyle: { fontSize: 20 },
                    formatter: '{value} 件',     // 给坐标轴标签加单位
                },
                nameTextStyle: { fontSize: 20 },
            },
            tooltip: { trigger: 'axis', },
            legend: { right: '5%' },
            series: [
                {
                    name: '销量折线图',
                    type: 'line',
                    data: line_Data1,
                    smooth: true,       // 折线图线条光滑
                    markPoint: {        // 标记
                        data: [
                            {name: '最小值', type: 'min'},
                            {name: '最大值', type: 'max'}
                        ],
                        symbolSize: 80,      //标记的大小
                        label: {        // 标记单位
                            formatter: '{c}件'//单位
                        }
                    },
                    markLine:{
                      data:[
                          {name:'平均数',type:'average'}
                      ]
                    },
                    markArea: {         //  提示图表标域，常用于标记图表中某个范围的数据
                        itemStyle: {
                            color: 'rgba(255, 173, 177, 0.4)'
                        },
                        data: [
                            [{xAxis: 'c部门'}
                                , {xAxis: 'e部门'}]
                        ]
                    },
                    areaStyle:{       // 填充样式
                      color:'#bbd3ea'
                    },
                    lineStyle:{
                        type:'dashed',  // 'dashed'虚线  ， 'dotted'有斑点的;
                        color:'blue'
                    }
                }
            ]
        };
        myChart1.setOption(option)
    })

</script>
</body>
</html>

寧三一

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts笔记——折线图（1）折线图标记区间

Echarts笔记——折线图（1）折线图标记区间1.折线图类型（ line ）。2.markPoint : 图表标注（最大值，最小值）。3.markLine : 图表标线（平均线）。4.markArea ：图表标域（标记区间）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</...
复制链接

扫一扫