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

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

數(shù)據(jù)的重要性我們大家都知道，就算再小的項目中都可能使用幾個圖表展示，我最近在做項目的過程中也是需要用到圖表，最后選擇了echarts圖表庫

前言

本篇來學(xué)習(xí)下直角坐標(biāo)系的常用配置

直角坐標(biāo)系

直角坐標(biāo)系的圖表指的是帶有x軸和y軸的圖表, 常見的直角坐標(biāo)系的圖表有: 柱狀圖折線圖散點圖

常用配置

網(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 = ['張三', '李四', '王五', '閏土', '小明', '茅臺']
    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軸, 一個 grid 中最多有兩種位置的 x 軸和 y 軸

坐標(biāo)軸類型 type

value : 數(shù)值軸, 自動會從目標(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 = ['張三', '李四', '王五', '閏土', '小明', '茅臺']
    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ū)域縮放, 對數(shù)據(jù)范圍過濾, x軸和y軸都可以擁有

區(qū)域縮放類型 type

slider : 滑塊
inside : 內(nèi)置, 依靠鼠標(biāo)滾輪或者雙指縮放

產(chǎn)生作用的軸

xAxisIndex :設(shè)置縮放組件控制的是哪個 x 軸, 一般寫0即可
yAxisIndex :設(shè)置縮放組件控制的是哪個 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 = ['張三', '李四', '王五', '閏土', '小明', '茅臺']
    var yDataArr = [88, 100, 63, 77, 94, 80]
    var option = {
        dataZoom: [ // 控制區(qū)域縮放效果的實現(xiàn)
            {
                type: 'slider', // 縮放的類型  slide代表滑塊  inside代表依靠鼠標(biāo)滾輪
                // type: 'inside'
                xAxisIndex: 0    // 控制的是哪個x軸(多個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>

效果