ECharts_line_折线图

清风不是明月

已于 2022-03-31 16:00:55 修改

阅读量303

点赞数

分类专栏：前端_Echarts 文章标签： Echarts 堆叠图折线图数据可视化 JavaScript

于 2022-02-07 20:32:47 首次发布

本文链接：https://blog.csdn.net/weixin_55806809/article/details/122814316

版权

前端_Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--一、引入echarts.js文件-->
    <script src="lib/echarts.min.js"></script>
</head>
<body>
<!--二、准备一个呈现图标的盒子(一定要有宽和高)-->
<div style="width: 600px;height: 400px"></div>
<script>
    // 三、初始化eCharts实例对象,echarts.init()方法
    let mCharts = echarts.init(document.querySelector('div'));// 参数是dom元素，决定图标最终呈现的位置
    let xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];//x轴数据
    let yDataArr1 = [98, 59, 69, 78, 98, 59, 69, 78, 98, 59, 69, 78];//y轴数据
    let yDataArr2 = [98, 67, 46, 89, 46, 35, 79, 89, 24, 67, 56, 43];//y轴数据
    // 四、准备配置项（有这个决定是说明图表）
    let option = {
        // x轴
        xAxis: {
            type: 'category',// category 类目轴
            data: xDataArr ,// x轴数据
            boundaryGap:false, // (非必须)紧挨边缘，类目数据在y轴
        },
        // y轴
        yAxis: {
            type: 'value',// value 数值轴，到series找数据
            scale:true,// (非必须)缩放,脱离0值比例,y轴不是从0开始(用于数据变化不太大的时候)
        },
        // 系列列表，通过type决定图标类型(给数值轴提供数据)
        series: [
            {
                name: '销量',
                type: 'line',
                data: yDataArr1, //y轴数据
                stack:'aaa',//(非必须,至少一对存在)堆叠图 (实现一个图表数据基于另一个图表数据，进行累加，前途是stack 的值相同的两个数据)
                // (非必须)最大值、最小值
                markPoint: {
                    data: [{type: 'max'}, {type: 'min'}]
                },
                // (非必须)平均值
                markLine: {
                    data: [{type: 'average'}]
                },
                // (非必须)标注阴影区间(可以标注多个)
                markArea: {
                    data: [
                        [{xAxis: '3月'}, {xAxis: '5月'}],//开始-结束的区间
                        [{xAxis: '7月'}, {xAxis: '8月'}]
                    ]
                },
                // (非必须)线条控制
                smooth: true, //平滑曲线
                // (非必须)线条样式
                lineStyle: {
                    color: 'red',
                    type: 'dashed'//虚线  dotted 点线；solid 实线
                },
                // (非必须)填充风格（线条与轴之间填充阴影，如果大括号中不设置属性，这默认样式）
                areaStyle: {
                    color: 'pink'
                },

            },
            // 堆叠图，series中的多个数据对象，
            {
                name: '销量',
                type: 'line',
                data: yDataArr2, //y轴数据
                stack:'aaa',//(非必须,至少一对存在)堆叠图 (实现一个图表数据基于另一个图表数据，进行累加，前途是stack 的值相同的两个数据)
            }
        ]
    }
    // 五、进配置项设置给eCharts的实例对象
    mCharts.setOption(option)
</script>
</body>
</html>