关于EChats的基础知识,看完快速做出一个好看的图表(全流程配链接版本,任何属性都可以点击直接跳转API文档)

Echarts的简单基础知识


一、最基础的图表

1.1 基础图表知识

1.1.1 必要三种属性
  1. xAxis:直角坐标系下的x轴
  2. yAsix:直角坐标系下单y轴
  3. series:系列列表,通过type决定自己的图表类型

1.1.2 引入ECharts的基本步骤
  • 步骤1:引入echarts.js文件
  • 步骤2:准备一个呈现图表的盒子
  • 步骤3:初始化echarts实例对象
  • 步骤4:准备配置项
  • 步骤5:将配置项设置给echarts实例对象
<head>
  <!-- 步骤1:引入echarts.js文件 -->
  <script src="lib/echarts.js"></script>
</head>
<body>
  <!-- 步骤2:准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3:初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    document.getElementsByClassName
    // 步骤4:准备配置项
    var option = {
      xAxis: {
        type: 'category',
        data: ['张三', '李四', '王五']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '身高',
          type: 'bar',
          data: [183, 162, 171]
        }
      ]
    }
    // 步骤5:将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>

1.2 xAxis的一些常用属性

​ 直角坐标系 grid 中的 x 轴,一般情况下单个grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

  1. show:是否显示 x 轴。 默认为显示。
  2. position:x 轴的位置。 可选项有'top'和'bottom'
  3. type:坐标轴类型。

    1. 'value' 数值轴,适用于连续数据。
    2. 'category' 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。
    3. 'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
    4. 'log' 对数轴。适用于对数数据。
  4. name:坐标轴名称。 实际上不显示。

  5. silent:坐标轴是否是静态无法交互。

  6. axisLine:坐标轴轴线相关设置。

  7. axisTick:坐标轴刻度相关设置。

  8. data:类目数据,在类目轴(type: 'category')中有效。如果没有设置 type,但是设置了 axis.data,则认为 type'category'

二、ECharts的常用配置属性

2.1 title的属性

  1. show:是否显示标题组件。boolean
  2. text:主标题文本,支持使用 \n 换行。string
  3. link:主标题文本超链接。string
  4. textStyle:主标题样式。Object
    1. color:主标题文字的颜色。Color
    2. fontWeight:主标题文字字体的粗细。string number
    3. fontSize:主标题文字的字体大小。number
  5. subtext:副标题文本,支持使用 \n 换行。string
  6. subtextStyle:副标题样式。同主标题Object
  7. textAlign:整体(包括 text 和 subtext)的水平对齐。可选值:'auto''left''right''center'
  8. left,top,right,bottom:距离容器的距离。string number
  9. borderColor:标题的边框颜色。支持的颜色格式同 backgroundColor。Color
  10. borderWidth:标题的边框线宽。number

2.2 tooltip的属性

提示框组件可以设置在多种地方:

  • 可以设置在全局,即 tooltip
  • 可以设置在坐标系中,即 grid.tooltip、polar.tooltip、single.tooltip
  • 可以设置在系列中,即 series.tooltip
  • 可以设置在系列的每个数据项中,即 series.data.tooltip
  1. show:是否显示提示框组件。包括提示框浮层和 axisPointer。boolean
  2. trigger:触发类型。
    1. 'item':数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
    2. 'axis':坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
    3. 'none':什么都不触发。
  3. triggerOn:提示框触发的条件,可选:
    1. 'mousemove':鼠标移动时触发。
    2. 'click':鼠标点击时触发。
    3. 'mousemove|click':同时鼠标移动和点击时触发。
  4. formatter:提示框浮层内容格式器,支持字符串模板和回调函数两种形式。具体查看API文档。

2.3 legend的属性

​ 图例组件。图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。

  1. type:图例的类型。可选值:

    1. 'plain':普通图例。缺省就是普通图例。
    2. 'scroll':可滚动翻页的图例。当图例数量较多时可以使用。
  2. show:显示boolean

  3. left,top,right,bottom:距离容器的距离。

  4. width,height:宽和高。string number

  5. padding:图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。

  6. itemGap:图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。

  7. itemWidth,itemHeight:图例标记的图形宽度和高度。number

  8. itemStyle:图例的图形样式。其属性的取值为 'inherit' 时,表示继承系列中的属性值。Object

  9. selectedMode:图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭。

  10. data:图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name(如果是饼图,也可以是饼图单个数据的 name)。图例组件会自动根据对应系列的图形标记(symbol)来绘制自己的颜色和标记,特殊字符串 ''(空字符串)或者 '\n'(换行字符串)用于图例的换行。

    如果 data 没有被指定,会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。

    如果要设置单独一项的样式,也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name

    legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
        data: ['身高', '体重']
    },
        series: [
            {
                name: '身高',
                type: 'bar',
                data: data1
            },
            {
                name: '体重',
                type: 'bar',
                data: data2
            }
        ]
    

三、柱状图bar的一些常用属性

  1. name:系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

  2. showBackground:是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。

  3. markPoint:图表标注。

    1. symbol:标记的图形。ECharts 提供的标记类型包括:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'(默认是pin)可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI

    2. symbolSize:标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

    3. data:标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。

      通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。
      用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'
      直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
      当多个属性同时存在时,优先级按上述的顺序。

      markPoint: { // 标记点
          data: [
              {
                  type: 'max', name: '最大值'
              }, {
                  type: 'min', name: '最小值'
              }
          ]
      }
      
  4. markLine:图表标线。

    1. data:标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
    2. 用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'
    3. lineStyle:标线的样式。具体查看详细文档
markLine: { // 标记线
  data: [
    {
      type: 'average', name: '平均值'
    }
  ]
},
  1. label:图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。

    1. show:是否显示标签。boolean
    2. rotate:标签旋转。从 -90 度到 90 度。正值是逆时针。number
    3. offset:是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40Array
    4. color:文字的颜色。Color
    5. fontWeight:文字字体的粗细。string number
    6. fontSize:文字的字体大小。number
    7. position:文字标签的位置。支持:top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight。 具体效果可以查看API文档.
  2. barWidth:柱条的宽度,不设时自适应。可以是绝对值例如 40 或者百分数例如 '60%'。百分数基于自动计算出的每一类目的宽度。在同一坐标系上,此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效,并且是对此坐标系中所有 'bar' 系列生效。

你可能感兴趣的:(前端,java,echarts)