欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue ECharts直角坐標(biāo)系配置詳細(xì)講解

 更新時(shí)間:2022年12月15日 15:07:08   作者:愛學(xué)習(xí)de測試小白  
數(shù)據(jù)的重要性我們大家都知道,就算再小的項(xiàng)目中都可能使用幾個(gè)圖表展示,我最近在做項(xiàng)目的過程中也是需要用到圖表,最后選擇了echarts圖表庫

前言

本篇來學(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.js組件通信的幾種姿勢

    Vue.js組件通信的幾種姿勢

    組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢,感興趣的朋友一起看看吧
    2017-10-10
  • 如何解決Element UI中NavMenu折疊菜單的坑

    如何解決Element UI中NavMenu折疊菜單的坑

    這篇文章主要介紹了如何解決Element UI中NavMenu折疊菜單的坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue使用echarts圖表自適應(yīng)的幾種解決方案

    vue使用echarts圖表自適應(yīng)的幾種解決方案

    這篇文章主要給大家介紹了關(guān)于vue使用echarts圖表自適應(yīng)的幾種解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置

    vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置

    這篇文章主要介紹了vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue?@scroll監(jiān)聽滾動(dòng)條事件方式

    vue?@scroll監(jiān)聽滾動(dòng)條事件方式

    這篇文章主要介紹了vue?@scroll監(jiān)聽滾動(dòng)條事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法

    vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法

    下面小編就為大家分享一篇vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • 詳解vue的數(shù)據(jù)劫持以及操作數(shù)組的坑

    詳解vue的數(shù)據(jù)劫持以及操作數(shù)組的坑

    這篇文章主要介紹了vue的數(shù)據(jù)劫持以及操作數(shù)組的坑,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Vue導(dǎo)出el-table表格為Excel文件的兩種方式

    Vue導(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-09
  • Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法

    Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法

    這篇文章主要介紹了Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • Vue系列:通過vue-router如何傳遞參數(shù)示例

    Vue系列:通過vue-router如何傳遞參數(shù)示例

    本篇文章主要介紹了Vue系列:通過vue-router如何傳遞參數(shù)示例,具有一定的參考價(jià)值,有興趣的可以了解一下。
    2017-01-01

最新評(píng)論