當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Apache Echarts常用图表之折线图

發布時間：2024/1/1 编程问答 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 Apache Echarts常用图表之折线图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

Echarts常用圖表
- 折線圖
- - 1. 折線圖的實現步驟
  - 2. 折線圖的常見效果
  - - - 最大值\最小值 `markPoint`
      - 平均值 `markLine`
      - 標注區間 `markArea`
      - 數值顯示 `label`
      - 平滑線條`smooth`
      - 線條樣式`linestyle`
      - 填充風格 `areaStyle`
      - 緊挨邊緣`boundaryGap`
    - 配置縮放比例 `scale`
    - 堆疊圖
  - 3. 通用配置
  - - - 標題：`title`
      - 提示框：`tooltip`
      - 工具按鈕：`toolbox`
      - 圖例：`legend`

Echarts常用圖表

每個圖表均配有對應的源代碼以及知識點~~~~
詳情可點開對應的圖表學習！
各類常用圖表總結在此！配合使用更方便~
https://blog.csdn.net/diviner_s/article/details/116072584
官方對應文件工具，有更詳細的工具使用方法：
https://echarts.apache.org/zh/option.html

折線圖

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

1. 折線圖的實現步驟

1.先上Echarts經典基本代碼框架~~

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script src="echarts.min.js"></script> # 自己找文件位置 </head> <body><div style="width: 600px;height: 400px"></div><script>var mCharts = echarts.init(document.querySelector("div"))var option = {}mCharts.setOption(option)</script> </body> </html>

此時option對象是空的。

2.準備數據：

x軸：

var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

y軸：

var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]

準備option，將series中的type的值設置為：line（區別于柱狀圖，柱狀圖為bar）

var option = {xAxis:{type:'category',data:xDataArr},yAxis:{type:'value'},series:[{type:'line',data:yDataArr}]}

最終效果圖如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script src="echarts.min.js"></script> </head> <body> <div style="width: 600px;height: 400px"></div> <script>var mCharts = echarts.init(document.querySelector("div"))var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]var option = {xAxis:{type:'category',data:xDataArr},yAxis:{type:'value'},series:[{type:'line',data:yDataArr}]}mCharts.setOption(option) </script> </body> </html>

2. 折線圖的常見效果

最大值\最小值 markPoint

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

平均值 markLine

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

標注區間 markArea

var option = {series: [{......markArea: {data: [[{xAxis: '1月'}, {xAxis: '2月'}],[{xAxis: '7月'}, {xAxis: '8月'}]]}}]}

數值顯示 label

series: [{......label: {show: true, // 是否可見rotate: 0 // 旋轉角度}} ]

平滑線條smooth

series: [{......smooth:true} ]

線條樣式linestyle

var option = {series:[{......smooth: true,lineStyle:{color: 'green',type: 'dashed'//可選值還有 dotted solid}}]}

填充風格 areaStyle

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

緊挨邊緣boundaryGap

boundaryGap 是設置給 x 軸的, 讓起點從 x 軸的0坐標開始

var option = {xAxis: {type: 'category',data: xDataArr,boundaryGap: false} }

配置縮放比例 scale

如果每一組數據之間相差較少，并且都比0大很多，那么可能存在下種情況。

var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005, 3004, 3001, 3009] // 此時y軸的數據都在3000附近, 每個數之間相差不多 var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{type: 'line',data: yDataArr}] }

為此我們使用scale，擺脫從零開始。
將scale配置給y軸，控制比例

var option = {yAxis: {type: 'value',scale: true} }

堆疊圖

堆疊圖指的是, 同個類目軸上系列配置相同的 stack 值后，后一個系列的值會在前一個系列的值上相加
如果在一個圖表中有兩個或者多個折線圖, 在沒有使用堆疊配置的時候, 效果如下:

3. 通用配置

使用 ECharts 繪制出來的圖表, 自帶一些功能, 這些功能是每一個圖表都具備的, 我們可以通過配置, 對這些功能進行設置.

使用了堆疊圖后：

var option = {series: [{type: 'line',data: yDataArr1,stack: 'all' // series中的每一個對象配置相同的stack值, 這個all可以任意寫},{type: 'line',data: yDataArr2,stack: 'all' // series中的每一個對象配置相同的stack值, 這個all可以任意寫}] }

藍色這條線的y軸起點, 不再是y軸, 而是紅色這條線對應的點. 所以相當于藍色是在紅色這條線的基礎之上進行繪制. 基于前一個圖表進行堆疊。

標題：title

var option = {title: { // 標題設置text: '成績展示', // 標題文字textStyle: { // 標題文字樣式設置color: 'red'},borderWidth: 5, // 標題邊框寬度borderColor: 'blue', // 標題邊框顏色borderRadius: 5, // 標題邊框圓角left: 50, // 標題距離左邊的距離top: 10 // 標題距離頂部的距離}}

提示框：tooltip

tooltip指的是當鼠標移入到圖表或者點擊圖表是，展示出的提示框

觸發類型：tigger
可選值有item\axis
觸發時機：triggerOn
可選值有 mouseOver\click
格式化顯示：formatter
- 字符串模板

var option = {tooltip: {trigger: 'item',triggerOn: 'click',formatter: '{b}:{c}'} } 這個{b} 和 {c} 所代表的含義不需要去記, 在官方文檔中有詳細的描述

回調函數

var option = {tooltip: {trigger: 'item',triggerOn: 'click',formatter: function (arg) {return arg.name + ':' + arg.data}} }

工具按鈕：toolbox

toolbox 是ECharts提供的工具欄，內置有導出圖片，數據視圖, 重置, 數據區域縮放, 動態類型切換五個工具

工具欄的按鈕是配置在 feature 的節點之下

var option = {toolbox: {feature: {saveAsImage: {}, // 將圖表保存為圖片dataView: {}, // 是否顯示出原始數據restore: {}, // 還原圖表dataZoom: {}, // 數據縮放magicType: { // 將圖表在不同類型之間切換,圖表的轉換需要數據的支持type: ['bar', 'line']}}} }

圖例：legend

legend是圖例，用于篩選類別，需要和series配合使用

legend中的data是一個數組
legend 中的data的值需要和series數組中的某組數據的name值一致

聲明：學習內容來自黑馬程序員，為學習筆記。僅供學習交流。

總結

以上是生活随笔為你收集整理的Apache Echarts常用图表之折线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：全国计算机等级考试可以一级二级一起考吗,
下一篇：如何锁定计算机mac,如何不用第三方软件