Echarts 5 瞎入门指南 - 6

979 阅读3分钟

本章主题-坐标轴,讲坐标轴之前必须先了解下直角坐标系

直角坐标系 - grid

- grid {left  right  top   bottom   width   height}  决定的是由坐标轴形成的矩形的尺寸和位置。
 grid = {
     //这比较适用于多个 grid 进行对齐的场景,因为往往多个 grid 对齐的时候,是依据坐标轴来对齐的。
     containLabel: false,  //不包含坐标轴标签,
     
     bottom: 0,  // 从坐标轴开始算初始位置 
 }
 grid = {
      // 这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。
      containLabel: true  //包含坐标轴标签在内,比如X轴底部有label文字描述,那grid.bottom就是从文字开始位置开始算
 }

大部分情况我还是用containLabel=true, 这样基本不用设left top等值了, 如果你设置成false, 那就得设置left 轴文字宽度, bottom轴文字高度。。

<template>
   <div id="chart"></div>
</template>

<script>
    import * as echarts from 'echarts'
    
    let myChart = null,
        grid = {
             containLabel: true, //否包含坐标轴的刻度标签。
        },
        // x轴
        xAxis= {
            data: ['王启年', '沈重', '郭宝坤', '四顾剑']
        },

        series = [
            {
                data: [10, 50, 80, 99], 
                type: 'bar', 
            }
        ],

        options = { grid, xAxis, yAxis: {}, series };
     
    ~function(){
        myChart = echarts.init(this.$refs.chart); //实际情况这里需要等dom加载完了
        myChart.setOption(options)
    }()
             
</script>

参考图
image.png

接下来正式开始讲坐标轴, echarts中坐标轴分x轴和y轴, 而在x轴y轴上又可以分类目轴与非类目轴, type有4个, 官方解释如下

  • 'value' 数值轴,适用于连续数据。
  • 'category' 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。
  • 'time' 时间轴,适用于连续的时序数据
  • 'log' 对数轴。适用于对数数据。

这里我稍微再解释下
如果xAxis.type设置成value,那么,xAxis.data里面设置的数据无效,因为xAxis.data是为category服务的。
如果没有设置 type,但是设置了 xAxis.data,则认为 type 是 'category'。
如果设置了 type 是 'category',但没有设置 xAxis.data,则 xAxis.data 的内容会自动从 series.data 中获取

轴线与刻度 - axisLine + axisTick

  xAxis = {
      ...
      axisLine: { show: false }, //不显示x轴
      axisTick: { show: false }  //不显示刻度线
  }

  yAxis = {
      ...
      // axisLine: { show: false } 这个可以不写, y轴线默认不显示,x轴线默认显示
  }  

参考图

image.png

轴名称设置(一般只设置Y轴)

    yAxis = {
        ...
        name: '战斗力',  //标识y轴数值代表战斗力
        nameGap: 20, //轴名称与轴线之间的距离
        nameTextStyle: {
            color: '#123b92',
            fontSize: 16,
            fontWeight: 'bold',
        }
    }

参考图

image.png

轴刻度标签 - axisLabel

    xAxis = {
        ...
        axisLabel: {
            margin: 20, //标签文字与轴线距离
            color: '#fff',
            fontSize: 14,
            padding: [4, 10],
            backgroundColor: '#92713D',
            interva: 0,  //0: 强制显示所有标签, n:隔n个标签显示一个标签
        }
    }
     

参考图

image.png

分割线 - splitLine

    yAxis = {
        ...
        splitLine: { //默认数值轴显示,类目轴不显示。 (所以上面的图只显示y轴分割线)
            color: 'rgba(0,0,0,0.4)',
            type: 'dashed', //虚线
        }
    }

参考图

image.png

设置坐标轴位置与方向

    xAxis = {
            show: false,
            inverse: true   //反向坐标轴。(从左到右 -->  从右到左)。
        }
        
    yAxis = [
        {
            ...
            position: 'right',  //单轴右侧显示
            data: ['亚索', '卡特', '蒙多', '阿狸', '妖姬']
        }
    ]
    
    series = [
        {
            name: '血量',
            type: 'bar',
            label: {
                normal: {
                    show: true,
                    position: 'left',
                }
            },
            data: [1500, 1200, 3000, 1200, 1500]
        }
    ],

参考图

image.png

设置双Y轴

主要代码如下

    xAxis = {
            show: false,
            type: 'value'
        }
        
    yAxis = [
        {
            type: 'category',
            splitLine: 'none',
            axisTick: 'none',
            axisLine: 'none',
            data: ['上山虎', '四顾剑', '苦何', '叶流云', '影子']
        },
        {
            axisTick: 'none',
            axisLine: 'none',
            data: [7000, 8500, 8900, 8500, 8000]
        }
    ]

    series = [
        {
            type: 'bar',
            zlevel: 2,
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: '#00C0FF',  //内图颜色
                    barBorderRadius: 50
                }
            },
            data: [7000, 8500, 8900, 8500, 8000]
        },
        {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',  //柱间距离 -100%  -> 两个系列的柱子重叠
            itemStyle: {
                normal: {
                    color: '#181F44', //底色
                    barBorderRadius: 50
                }
            },
            data: [10000, 10000, 10000, 10000, 10000]
        }
    ]
     

参考图

image.png

常见的坐标轴设置暂时就写这些吧, 下面期待以久的轻语来了...

最后的轻语

    `
                                    儿时凿壁偷了 谁家的光

                                    如今灯下闲读 红袖添香

                                    十年寒窗 不思量自难忘    
    ` 
  端午节快乐