Vue導(dǎo)入Echarts實(shí)現(xiàn)折線圖

更新時(shí)間：2022年12月15日 15:33:06 作者：愛學(xué)習(xí)de測試小白

這篇文章主要給大家介紹了關(guān)于vue+echarts實(shí)現(xiàn)折線圖的方法與注意事項(xiàng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本篇來學(xué)習(xí)下折線圖的實(shí)現(xiàn)

折線圖特點(diǎn)

折線圖更多的使用來呈現(xiàn)數(shù)據(jù)隨時(shí)間的變化趨勢

折線圖實(shí)現(xiàn)步驟

ECharts 最基本的代碼結(jié)構(gòu)
準(zhǔn)備x軸的數(shù)據(jù)
準(zhǔn)備 y 軸的數(shù)據(jù)
準(zhǔn)備 option , 將 series 中的 type 的值設(shè)置為: bar

完整代碼

<!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/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts實(shí)例對(duì)象
    var myCharts = echarts.init(document.getElementById('app'))
    // 2.準(zhǔn)備x軸數(shù)據(jù)
    var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺(tái)', '球球']
    // 3. 準(zhǔn)備y軸數(shù)據(jù)
    var yDataArr = [88, 92, 63, 77, 94, 80, 72]
    // 4. 準(zhǔn)備配置項(xiàng)
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                type: 'bar',
                data: yDataArr
            }
        ]
    }
    // 步驟5：將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
    myCharts.setOption(option)
</script>
</body>
</html>

效果

折線圖常見效果

標(biāo)記

markPoint：最大值/最小值

 markPoint: {
        data: [
              {
                  type: 'max',
                  name: '最大值'
              }, {
                  type: 'min',
                  name: '最小值'
              }
          ]
      }

markLine：平均值

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

markArea：標(biāo)注區(qū)間

markArea: { // 標(biāo)注區(qū)間
      data: [
              [{xAxis: '2月'}, {xAxis: '3月'}],
              [{xAxis: '8月'}, {xAxis: '9月'}]
          ]
      }

線條控制

smooth：平滑線條

 var option = {
  series: [
   {
      ......
	smooth: true  // 平滑線條
   }
 ]
}

lineStyle：線條樣式

var option = {
  series: [
   {
      ......
      lineStyle: {
        color: 'green',   // 線條顏色
        type: 'dashed'   //可選值還有 dotted:虛線  solid：實(shí)線
     }
   }
 ]
}

填充風(fēng)格

areaStyle：填充風(fēng)格

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

緊挨邊緣

boundaryGap：是設(shè)置給 x 軸的, 讓起點(diǎn)從 x 軸的0坐標(biāo)開始

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr,
    boundaryGap: false //  讓起點(diǎn)從 x 軸的0坐標(biāo)開始
 }
}

完整代碼

<!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/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts實(shí)例對(duì)象
    var myCharts = echarts.init(document.getElementById('app'))
    // 2.準(zhǔn)備x軸數(shù)據(jù)
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
        '10月', '11月', '12月']
    // 3. 準(zhǔn)備y軸數(shù)據(jù)
    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] // 此時(shí)y軸的數(shù)據(jù)都在3000附近, 每個(gè)數(shù)之間相差不多
    // 4. 準(zhǔn)備配置項(xiàng)
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr,
            boundaryGap: false  //  讓起點(diǎn)從 x 軸的0坐標(biāo)開始
        },
        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: { // 標(biāo)注區(qū)間
                    data: [
                        [{xAxis: '2月'}, {xAxis: '3月'}],
                        [{xAxis: '8月'}, {xAxis: '9月'}]
                    ]
                },
                smooth: true,  // 平滑線條
                lineStyle: {
                    color: 'green',  // 線條顏色
                    type: 'dashed' // 可選值還有 dotted:虛線  solid：實(shí)線
                },
                areaStyle: {  // 填充風(fēng)格
                    color: 'pink'
                }
            }
        ]
    }
    // 步驟5：將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
    myCharts.setOption(option)
</script>
</body>
</html>

縮放-脫離0值比例

如果每一組數(shù)據(jù)之間相差較少, 且都比0大很多, 那么有可能會(huì)出現(xiàn)這種情況
scale :應(yīng)該配置給 y 軸

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/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts實(shí)例對(duì)象
    var myCharts = echarts.init(document.getElementById('app'))
    // 2.準(zhǔn)備x軸數(shù)據(jù)
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
        '10月', '11月', '12月']
    // 3. 準(zhǔn)備y軸數(shù)據(jù)
    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] // 此時(shí)y軸的數(shù)據(jù)都在3000附近, 每個(gè)數(shù)之間相差不多
    // 4. 準(zhǔn)備配置項(xiàng)
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr,
            boundaryGap: false  //  讓起點(diǎn)從 x 軸的0坐標(biāo)開始
        },
        yAxis: {
            type: 'value',
            scale: true  //  讓其擺脫0值比例
        },
        series: [
            {
                type: 'line',
                data: yDataArr1,
                smooth: true,  // 平滑線條
            }
        ]
    }
    // 步驟5：將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
    myCharts.setOption(option)
</script>
</body>
</html>

效果

堆疊圖

堆疊圖指的是, 同個(gè)類目軸上系列配置相同的 stack 值后，后一個(gè)系列的值會(huì)在前一個(gè)系列的值上

相加

var option = {
  series: [
   {
      type: 'line',
      data: yDataArr1,
      stack: 'all'  // series中的每一個(gè)對(duì)象配置相同的stack值, 這個(gè)all替換為任意值
   },
   {
      type: 'line',
      data: yDataArr2,
      stack: 'all' // 與上面保持一致即可
   }
 ]
}

效果

完整代碼

<!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/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts實(shí)例對(duì)象
    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]
    //  準(zhǔn)備配置項(xiàng)
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value',
            scale: true
        },
        series: [
            {
                type: 'line',
                data: yDataArr1,
                stack: 'all', // series中的每一個(gè)對(duì)象配置相同的stack值, 這個(gè)值可以任意寫
                areaStyle: {  // 填充風(fēng)格
                    color: 'pink'
                }
            },
            {
                type: 'line',
                data: yDataArr2,
                stack: 'all',  // 與上面的保持一致
                areaStyle: {
                    color: 'blue'
                }
            }
        ]
    }
    myCharts.setOption(option)
    // 將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
    myCharts.setOption(option)
</script>
</body>
</html>

到此這篇關(guān)于Vue導(dǎo)入Echarts實(shí)現(xiàn)折線圖的文章就介紹到這了,更多相關(guān)Vue折線圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: