首頁 > 軟體

Vue匯入Echarts實現折線圖

2022-12-17 14:00:25

前言

本篇來學習下折線圖的實現

折線圖特點

折線圖更多的使用來呈現資料隨時間的變化趨勢

折線圖實現步驟

  • ECharts 最基本的程式碼結構
  • 準備x軸的資料
  • 準備 y 軸的資料
  • 準備 option , 將 series 中的 type 的值設定為: 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>
<!-- 準備一個呈現圖表的盒子 -->
<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: 'bar',
                data: yDataArr
            }
        ]
    }
    // 步驟5：將設定項設定給echarts範例物件
    myCharts.setOption(option)
</script>
</body>
</html>

效果

折線圖常見效果

標記

markPoint：最大值/最小值

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

markLine：平均值

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

markArea：標註區間

markArea: { // 標註區間
      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：實線
     }
   }
 ]
}

填充風格

areaStyle：填充風格

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

緊挨邊緣

boundaryGap：是設定給 x 軸的, 讓起點從 x 軸的0座標開始

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr,
    boundaryGap: false //  讓起點從 x 軸的0座標開始
 }
}

完整程式碼

<!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>
<!-- 準備一個呈現圖表的盒子 -->
<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>

縮放-脫離0值比例

  • 如果每一組資料之間相差較少, 且都比0大很多, 那麼有可能會出現這種情況
  • scale :應該設定給 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>
<!-- 準備一個呈現圖表的盒子 -->
<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>

效果

堆疊圖

堆疊圖指的是, 同個類目軸上系列設定相同的 stack 值後，後一個系列的值會在前一個系列的值上

相加

var option = {
  series: [
   {
      type: 'line',
      data: yDataArr1,
      stack: 'all'  // series中的每一個物件設定相同的stack值, 這個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>
<!-- 準備一個呈現圖表的盒子 -->
<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>

到此這篇關於Vue匯入Echarts實現折線圖的文章就介紹到這了,更多相關Vue折線圖內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com