28-ECharts of Vue-line chart

Language 2023-12-17 21:13:29 views: null

ECharts-line chart

Preface

  • In this article, we will learn how to implement a line chart

Line chart features

  • Line charts are more commonly used to present data trends over time

Line chart implementation steps

  1. The most basic code structure of ECharts
  2. Prepare data for x-axis
  3. Prepare data for y-axis
  4. Prepare option, set the value of type in series to: line
  • Complete code
<!DOCTYPE html>
<html lang="en">

<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>ECharts-折线图</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>

<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    // 2.准备x轴数据
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '球球']
    // 3. 准备y轴数据
    var yDataArr = [88, 92, 63, 77, 94, 80, 72]
    // 4. 准备配置项
    var option = {
      
      
        xAxis: {
      
      
            type: 'category',
            data: xDataArr
        },
        yAxis: {
      
      
            type: 'value'
        },
        series: [
            {
      
      
                type: 'line',
                data: yDataArr
            }
        ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>
  • Effect
    Insert image description here

Common effects of line charts

mark
  • markPoint: maximum/minimum value
 markPoint: {
    
    
        data: [
              {
    
    
                  type: 'max',
                  name: '最大值'
              }, {
    
    
                  type: 'min',
                  name: '最小值'
              }
          ]
      }

Insert image description here

  • markLine: average
 markLine: {
    
    
        data: [
         {
    
    
            type: 'average',
            name: '平均值'
         }
       ]
     }

Insert image description here

  • markArea: mark interval
markArea: {
    
     // 标注区间
      data: [
              [{
    
    xAxis: '2月'}, {
    
    xAxis: '3月'}],
              [{
    
    xAxis: '8月'}, {
    
    xAxis: '9月'}]
          ]
      }
Line control
  • smooth: smooth lines
 var option = {
    
    
  series: [
   {
    
    
      ......
	smooth: true  // 平滑线条
   }
 ]
}

Insert image description here

  • lineStyle: line style
var option = {
    
    
  series: [
   {
    
    
      ......
      lineStyle: {
    
    
        color: 'green',   // 线条颜色
        type: 'dashed'   //可选值还有 dotted:虚线  solid：实线
     }
   }
 ]
}

Insert image description here

fill style
  • areaStyle: fill style
var option = {
    
    
  series: [
   {
    
    
      type: 'line',
      data: yDataArr,
      areaStyle: {
    
    
        color: 'pink'
     }
   }
 ]
}

Insert image description here

close to the edge
  • boundaryGap: is set to the x-axis, so that the starting point starts from the 0 coordinate of the x-axis
var option = {
    
    
  xAxis: {
    
    
    type: 'category',
    data: xDataArr,
    boundaryGap: false //  让起点从 x 轴的0坐标开始
 }
}

Insert image description here

  • Complete code
<!DOCTYPE html>
<html lang="en">

<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>ECharts-折线图</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>

<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    // 2.准备x轴数据
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
        '10月', '11月', '12月']
    // 3. 准备y轴数据
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800,
        600]
    var yDataArr1 = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005,
        3004, 3001, 3009] // 此时y轴的数据都在3000附近, 每个数之间相差不多
    // 4. 准备配置项
    var option = {
      
      
        xAxis: {
      
      
            type: 'category',
            data: xDataArr,
            boundaryGap: false  //  让起点从 x 轴的0坐标开始
        },
        yAxis: {
      
      
            type: 'value',
            scale: true  //  让其摆脱0值比例
        },
        series: [
            {
      
      
                type: 'line',
                data: yDataArr,
                scale: true,
                markPoint: {
      
        // 最大值、最小值
                    data: [
                        {
      
      
                            type: 'max',
                            name: '最大值'
                        }, {
      
      
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
      
       // 平均值
                    data: [
                        {
      
      
                            type: 'average',
                            name: '平均值'
                        }
                    ]
                },
                markArea: {
      
       // 标注区间
                    data: [
                        [{
      
      xAxis: '2月'}, {
      
      xAxis: '3月'}],
                        [{
      
      xAxis: '8月'}, {
      
      xAxis: '9月'}]
                    ]
                },
                smooth: true,  // 平滑线条
                lineStyle: {
      
      
                    color: 'green',  // 线条颜色
                    type: 'dashed' // 可选值还有 dotted:虚线  solid：实线
                },
                areaStyle: {
      
        // 填充风格
                    color: 'pink'
                }
            }
        ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>
Scale, get out of 0 value scale
  • If the difference between each set of data is small and much larger than 0, then this may happen.
  • scale: should be configured for the y-axis
var option = {
    
    
  yAxis: {
    
    
    type: 'value',
    scale: true
 }
}

<!DOCTYPE html>
<html lang="en">

<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>ECharts-折线图</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>

<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    // 2.准备x轴数据
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
        '10月', '11月', '12月']
    // 3. 准备y轴数据
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800,
        600]
    var yDataArr1 = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005,
        3004, 3001, 3009] // 此时y轴的数据都在3000附近, 每个数之间相差不多
    // 4. 准备配置项
    var option = {
      
      
        xAxis: {
      
      
            type: 'category',
            data: xDataArr,
            boundaryGap: false  //  让起点从 x 轴的0坐标开始
        },
        yAxis: {
      
      
            type: 'value',
            scale: true  //  让其摆脱0值比例
        },
        series: [
            {
      
      
                type: 'line',
                data: yDataArr1,
                smooth: true,  // 平滑线条
            }
        ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>
  • Effect
    Insert image description here
stacked chart
  • The stacked chart means that after the series on the same category axis are configured with the same stack value, the value of the latter series will be added to the value of the previous series
    < /span>
var option = {
    
    
  series: [
   {
    
    
      type: 'line',
      data: yDataArr1,
      stack: 'all'  // series中的每一个对象配置相同的stack值, 这个all替换为任意值

   },
   {
    
    
      type: 'line',
      data: yDataArr2,
      stack: 'all' // 与上面保持一致即可
   }
 ]
}
  • Effect
    Insert image description here
  • Complete code
<!DOCTYPE html>
<html lang="en">

<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>ECharts-折线图</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>

<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
    var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
    //  准备配置项
    var option = {
      
      
        xAxis: {
      
      
            type: 'category',
            data: xDataArr
        },
        yAxis: {
      
      
            type: 'value',
            scale: true
        },
        series: [
            {
      
      
                type: 'line',
                data: yDataArr1,
                stack: 'all', // series中的每一个对象配置相同的stack值, 这个值可以任意写
                areaStyle: {
      
        // 填充风格
                    color: 'pink'
                }
            },
            {
      
      
                type: 'line',
                data: yDataArr2,
                stack: 'all',  // 与上面的保持一致
                areaStyle: {
      
      
                    color: 'blue'
                }
            }
        ]
    }
    myCharts.setOption(option)
    // 将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>

Guess you like

Origin blog.csdn.net/IT_heima/article/details/128288666
Recommended
Ranking
[Algorithm] greedy _ program scheduling issues
Spring 控制反转（IOC）
Data structure-6.6 figure
Indicates that the class or member method has abstract properties
Huawei v5 server installed Linux operating system
Postgresql source code analysis - creating ordinary tables
Chapter 10 Evaluation Classification Results
Cloud service Ubuntu 20.04 version uses Nginx to deploy static web pages
Java Exercise 17.1
Solve the problem that git cannot automatically push submission in IDEA Push failed: Failed with error: Could not read from remote repository.
Daily
More
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)

Code World

© 2018 codetd.com