zoukankan      html  css  js  c++  java

  • 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>

    效果如下：

     
  • 相关阅读:
    问题-第三方控件卸载与安装错误指南(运行期错误)
    版本号规则
    WCF入门学习3-配置文件与部署iis
    在Unity3D中连接WCF服务端
    WCF入门学习2-控制台做为宿主
    WCF入门学习1-最简单的一次通信
    闭包一个容易忽视的小问题及解决方法
    Vector3.Set的正确使用
    string.format的用途联想
    Unity的旋转-四元数,欧拉角用法简介
  • 原文地址：https://www.cnblogs.com/Ao-min/p/14637972.html
Copyright © 2011-2022 走看看