Vue ECharts直角坐標(biāo)系配置詳細(xì)講解
前言
本篇來學(xué)習(xí)下直角坐標(biāo)系的常用配置
直角坐標(biāo)系
直角坐標(biāo)系的圖表指的是帶有x軸和y軸的圖表, 常見的直角坐標(biāo)系的圖表有: 柱狀圖 折線圖 散點(diǎn)圖
常用配置
網(wǎng)格
grid:是用來控制直角坐標(biāo)系的布局和大小, x軸和y軸就是在grid的基礎(chǔ)上進(jìn)行繪制的
var option = { grid: { show: true, // 顯示grid borderWidth: 10, // grid的邊框?qū)挾? borderColor: 'red', // grid的邊框顏色 left: 100, // grid的位置 top: 100, width: 300, // grid的大小 height: 150 } }
完整代碼
<!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>直角坐標(biāo)系常用配置-grid</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> var mCharts = echarts.init(document.getElementById("app")) var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺(tái)'] var yDataArr = [88, 92, 63, 77, 94, 80] var option = { grid: { // 坐標(biāo)軸容器 show: true, // 是否可見 borderWidth: 3, // 邊框的寬度 borderColor: 'green', // 邊框的顏色 left: 100, // 邊框的位置 左邊距 top: 120, // 頂部距離 width: 500, // 邊框?qū)挾? height: 250 // 邊框高度 }, xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, series: [ { name: '語文', type: 'bar', markPoint: { data: [ { type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] }, label: { show: true, rotate: 60, // 數(shù)值旋轉(zhuǎn)角度 position: 'top' // 頂部顯示數(shù)值 }, barWidth: '30%', // 柱寬度 data: yDataArr } ] } mCharts.setOption(option) </script> </body> </html>
效果
坐標(biāo)軸
axis:坐標(biāo)軸分為x軸和y軸, 一個(gè) grid 中最多有兩種位置的 x 軸和 y 軸
坐標(biāo)軸類型 type
- value : 數(shù)值軸, 自動(dòng)會(huì)從目標(biāo)數(shù)據(jù)中讀取數(shù)據(jù)
- category : 類目軸, 該類型必須通過 data 設(shè)置類目數(shù)據(jù)
坐標(biāo)軸位置
- xAxis : 可取值為 top 或者 bottom
- yAxis : 可取值為 left 或者 right
var option = { xAxis: { type: 'category', data: xDataArr, position: 'top' }, yAxis: { type: 'value', position: 'right' } }
完整代碼
<!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>直角坐標(biāo)系常用配置-axis</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> var mCharts = echarts.init(document.getElementById("app")) var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺(tái)'] var yDataArr = [88, 92, 63, 77, 94, 80] var option = { grid: { show: true, borderColor: 'red', }, xAxis: { type: 'category', data: xDataArr, position: 'top' // 控制坐標(biāo)軸的位置 可取值為 top 或者 bottom }, yAxis: { type: 'value', position: 'right' // 控制坐標(biāo)軸的位置 可取值為 left 或者 right }, series: [ { name: '語文', type: 'bar', markPoint: { data: [ { type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] }, label: { show: true, rotate: 60, position: 'top' }, barWidth: '30%', data: yDataArr } ] } mCharts.setOption(option) </script> </body> </html>
效果
區(qū)域縮放
dataZoom :用于區(qū)域縮放, 對(duì)數(shù)據(jù)范圍過濾, x軸和y軸都可以擁有
區(qū)域縮放類型 type
- slider : 滑塊
- inside : 內(nèi)置, 依靠鼠標(biāo)滾輪或者雙指縮放
產(chǎn)生作用的軸
- xAxisIndex :設(shè)置縮放組件控制的是哪個(gè) x 軸, 一般寫0即可
- yAxisIndex :設(shè)置縮放組件控制的是哪個(gè) y 軸, 一般寫0即可
指明初始狀態(tài)的縮放情況
- start : 數(shù)據(jù)窗口范圍的起始百分比
- end : 數(shù)據(jù)窗口范圍的結(jié)束百分比
var option = { xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, dataZoom: [ { type: 'slider', xAxisIndex: 0 }, { type: 'slider', yAxisIndex: 0, start: 0, end: 80 } ] }
完整代碼
<!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>直角坐標(biāo)系常用配置-dateZoom</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> var mCharts = echarts.init(document.getElementById("app")) var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺(tái)'] var yDataArr = [88, 100, 63, 77, 94, 80] var option = { dataZoom: [ // 控制區(qū)域縮放效果的實(shí)現(xiàn) { type: 'slider', // 縮放的類型 slide代表滑塊 inside代表依靠鼠標(biāo)滾輪 // type: 'inside' xAxisIndex: 0 // 控制的是哪個(gè)x軸(多個(gè)x軸情況,一般寫0即可) }, { type: 'slider', yAxisIndex: 0, start: 0, // 渲染完成后, 數(shù)據(jù)篩選的初始值, 百分比 end: 95 // 渲染完成后, 數(shù)據(jù)篩選的結(jié)束值, 百分比 } ], toolbox: { feature: { dataZoom: {} } }, grid: { show: true, borderColor: 'red', }, xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, series: [ { name: '語文', type: 'bar', markPoint: { data: [ { type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] }, label: { show: true, rotate: 60, position: 'top' }, barWidth: '30%', data: yDataArr } ] } mCharts.setOption(option) </script> </body> </html>
效果
到此這篇關(guān)于Vue ECharts直角坐標(biāo)系配置詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue ECharts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用echarts圖表自適應(yīng)的幾種解決方案
這篇文章主要給大家介紹了關(guān)于vue使用echarts圖表自適應(yīng)的幾種解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置
這篇文章主要介紹了vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue?@scroll監(jiān)聽滾動(dòng)條事件方式
這篇文章主要介紹了vue?@scroll監(jiān)聽滾動(dòng)條事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法
下面小編就為大家分享一篇vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02詳解vue的數(shù)據(jù)劫持以及操作數(shù)組的坑
這篇文章主要介紹了vue的數(shù)據(jù)劫持以及操作數(shù)組的坑,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Vue導(dǎo)出el-table表格為Excel文件的兩種方式
在開發(fā)過程中,我們經(jīng)常需要將表格數(shù)據(jù)導(dǎo)出為 Excel 文件,大多數(shù)情況下,由后端處理即可,但是當(dāng)數(shù)據(jù)量不大、需要快速響應(yīng)用戶操作、或者數(shù)據(jù)已經(jīng)在前端進(jìn)行處理和展示時(shí),前端該如何實(shí)現(xiàn)呢,本文將介紹兩種方法,需要的朋友可以參考下2024-09-09Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法
這篇文章主要介紹了Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04Vue系列:通過vue-router如何傳遞參數(shù)示例
本篇文章主要介紹了Vue系列:通過vue-router如何傳遞參數(shù)示例,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01