Echarts面积折线图

转自于：https://www.pianshen.com/article/792649196/

  1. <!DOCTYPE html>
  2.  
    <html>
  3.  
     
  4.  
    <head>
  5.  
    <meta charset="utf-8">
  6.  
    <title>echarts面积折线图</title>
  7.  
    <style>
  8.  
    .centerItem {
  9.  
    856px;
  10.  
    height: 640px;
  11.  
    /* */
  12.  
    border: 1px solid #ccc;
  13.  
    margin: 110px auto 0 auto;
  14.  
    }
  15.  
    </style>
  16.  
    </head>
  17.  
     
  18.  
    <body>
  19.  
    <!-- 折线展示 -->
  20.  
    <div id="mjBox" class="centerItem"></div>
  21.  
     
  22.  
    <!-- 引入相关文件 -->
  23.  
    <script src="js/jquery-3.2.1.min.js"></script>
  24.  
    <!-- 引入 ECharts 文件 -->
  25.  
    <script src="js/echarts.js"></script>
  26.  
     
  27.  
    <script>
  28.  
    // 基于准备好的dom，初始化echarts实例
  29.  
    var mjBoxEchart = echarts.init(document.getElementById('mjBox'));
  30.  
    // 指定相关的配置项和数据
  31.  
    var mjBoxOption = {
  32.  
    legend: {
  33.  
    data: ['吃饭', '睡觉', '打豆豆'],
  34.  
    icon: 'rect',
  35.  
    top: 22,
  36.  
    right: 24,
  37.  
    itemGap: 15,
  38.  
    itemWidth: 10,
  39.  
    itemHeight: 10,
  40.  
    textStyle: {
  41.  
    // padding: [0, 0, 0, 5],
  42.  
    color: 'rgba(0,0,0,0.87)'
  43.  
    }
  44.  
    },
  45.  
    color: ['#289df5', '#fbc01b', '#ff5050'],
  46.  
    grid: {
  47.  
    left: 24,
  48.  
    right: '6%',
  49.  
    bottom: '30',
  50.  
    containLabel: true
  51.  
    },
  52.  
    xAxis: {
  53.  
    type: 'category',
  54.  
    axisLine: {
  55.  
    show: false
  56.  
    },
  57.  
    axisTick: {
  58.  
    length: 0
  59.  
    },
  60.  
    axisLabel: {
  61.  
    interval: 0,
  62.  
    textStyle: {
  63.  
    color: '#00c5d7'
  64.  
    }
  65.  
    },
  66.  
    name: '(月)',
  67.  
    nameTextStyle: {
  68.  
    padding: [24, 0, 0, 0],
  69.  
    color: '#00c5d7'
  70.  
    },
  71.  
    nameGap: 0,
  72.  
    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
  73.  
    },
  74.  
    yAxis: {
  75.  
    type: 'value',
  76.  
    axisLine: {
  77.  
    show: false
  78.  
    },
  79.  
    axisTick: {
  80.  
    length: 0 // 刻度线的长度
  81.  
    },
  82.  
    splitLine: {
  83.  
    lineStyle: {
  84.  
    color: ["#051d5f"],
  85.  
    1,
  86.  
    type: 'solid'
  87.  
    }
  88.  
    },
  89.  
    axisLabel: {
  90.  
    textStyle: {
  91.  
    color: '#a3a4b2'
  92.  
    }
  93.  
    }
  94.  
    },
  95.  
    series: [{
  96.  
    name: '吃饭',
  97.  
    type: 'line',
  98.  
    smooth: true,
  99.  
    symbol: 'circle', // 拐点类型
  100.  
    symbolSize: 0, // 拐点圆的大小
  101.  
    itemStyle: {
  102.  
    normal: {
  103.  
    color: '#289df5', // 折线条的颜色
  104.  
    borderColor: '#289df5', // 拐点边框颜色
  105.  
    areaStyle: {
  106.  
    type: 'default',
  107.  
    opacity: 0.1
  108.  
    }
  109.  
    }
  110.  
    },
  111.  
    data: [310, 212, 221, 154, 260, 430, 310, 110, 120, 210, 124, 60]
  112.  
    }, {
  113.  
    name: '睡觉',
  114.  
    type: 'line',
  115.  
    smooth: true,
  116.  
    symbol: 'circle',
  117.  
    symbolSize: 0,
  118.  
    itemStyle: {
  119.  
    normal: {
  120.  
    color: '#fbc01b',
  121.  
    borderColor: '#fbc01b',
  122.  
    areaStyle: {
  123.  
    type: 'default',
  124.  
    opacity: 0.1
  125.  
    }
  126.  
    }
  127.  
    },
  128.  
    data: [151, 282, 151, 120, 120, 80, 130, 182, 234, 191, 90, 30]
  129.  
    }, {
  130.  
    name: '打豆豆',
  131.  
    type: 'line',
  132.  
    smooth: true,
  133.  
    symbol: 'circle',
  134.  
    symbolSize: 0,
  135.  
    itemStyle: {
  136.  
    normal: {
  137.  
    color: '#ff5050',
  138.  
    borderColor: '#ff5050',
  139.  
    areaStyle: {
  140.  
    type: 'default',
  141.  
    opacity: 0.1
  142.  
    }
  143.  
    }
  144.  
    },
  145.  
    data: [120, 132, 70, 34, 60, 59, 140, 210, 124, 112, 23, 20]
  146.  
    }]
  147.  
    };
  148.  
    // 使用制定的配置项和数据显示图表
  149.  
    mjBoxEchart.setOption(mjBoxOption);
  150.  
    // echart图表自适应
  151.  
    window.addEventListener("resize", function() {
  152.  
    zxBoxEchart.resize();
  153.  
    });
  154.  
    </script>
  155.  
     
  156.  
    </body>
  157.  
     
  158.  
    </html>

效果如下：

 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Ao-min/p/14637972.html