Echarts 常用的基础总结

各个配置概念 术语速查手册

原图出处

公用的配置

• title text, subtext, left, top, right, bottom, textStyle, ...

• legend data, selectedMode, orient, left, top, right, bottom, width, height, textStyle, icon, ...

  a. selectedMode： 禁止点击legend显示隐藏对应列

  b. data 为 Array ,对应 serise 中每个数据的 name

  c. orient: horizontal vertical 水平或垂直

  d. type: scroll 可滚动翻页的图例

• tooltip trigger, formatter, textStyle, ...

  formatter 字符串模板

• grid left, top, right, bottom, containLabel, ...

  containLabel： 表示 grid 区域是否包含坐标轴的刻度标签

• series 动画(鼠标移入效果)

series[i].nimation: false, // 去掉动画效果
series[i].silent: true, // 不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件

• dataZoom Echarts文档 点击缩放Demo

dataZoom: [
    { 
        type: 'inside'， // silder
        throttle: 1000/60 // 视图刷新频率，单位ms
    }
]

a. dataZoom 可以是 Object 表示单个，或者是 Array 表示多个

b. 只要有 dataZoom 属性就会开启缩放功能, type: 'silder' 出现滚动条，默认是X轴

c. type: 'inside' 可让图表 隐藏滚动条， 通过鼠标滚动达到缩放且拖拽平移效果

d. silder 滚动条样式修改 Echats文档

• 滚动条
  borderRadius: [上，右，下，左] 滚动条外层边框圆角
  borderColor: 外层边框颜色
  backgroundColor: 滚动条背景色
  left, top, right, top: 滚动条位置
  width, height: 滚动条总体宽高

• 滑块
  filterColor: 滑块颜色
  handleIcon: 滑块两端的图形
  handleSize: 滑块两端的图形大小
  handleStyle: 滑块的具体样式
  zoomLock: 设置为 true 即固定滑块的大小，也就是说，只能平移，不能缩放

柱状图 Bar

1. 修改 X,Y轴字体样式

xAxis.axisLabel.textStyle
yAxis.axisLabel.textStyle

• 或者 也是修改柱子值显示的样式的属性 series[i].label.property

• 或者使用 rich 和 formatter 此方式适合大部分的 formatter !!!

  使用格式： {className|content}

// 在文本中，可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号:
// `{className|text content text content}` 标记样式名。
// 注意，换行仍是使用 '\n'。 
formatter: [ 
    '{a|这段文本采用样式a}', 
    '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}' 
    ].join('\n'), 
rich: { 
    a: { color: 'red', lineHeight: 10 },
    b: { backgroundColor: { image: 'xxx/xxx.jpg' }, height: 40 },
    x: { fontSize: 18, fontFamily: 'Microsoft YaHei', borderColor: '#449933', borderRadius: 4}, 
    ... 
}

2. 修改 X,Y轴文字内容 Echarts文档

xAxis.axisLabel.formatter
yAxis.axisLabel.formatter

• 使用字符串模板，模板变量为刻度默认标签 {value}
  formatter: '{value} kg'

• 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
  formatter: function (value, index) { return value + 'kg'; }

3. X轴倾斜

xAxis.axisLabel.rotate [number]

4. X轴间隔显示

xAxis.axisLabel.interval [number]

5. X,Y轴刻度

xAxis.axisTick

6. X，Y轴对应的网格线(分割线)

xAxis.splitLine.lineStyle
yAxis.splitLine.lineStyle

7. X，Y轴对应的轴线

从 v5.0.0 开始，数值轴 (type: 'value') 默认不显示轴线，需要显式配置。

xAxis.axisLine.lineStyle
yAxis.axisLine.lineStyle

8. 柱子的宽度

series[i].barWidth

9. 柱子的颜色

series[i].itemStyle

10. 柱子的背景

series[i].showBackground = true

11. 显示柱子的值

series[i].label.show  
series[i].label.position // top left right bottom inside insideLeft insideRight ...

position 所支持的完整值

12. markLine 标线(平均值，最大值，最小值)

silent: 鼠标移入效果
lineStyle: 标线样式
symbol: 标线终点的图形，默认三角箭头
data: 标线的数据数组。每个数组项可以是一个两个值的数组，分别表示线的起点和终点，每一项是一个对象，有下面几种方式指定起点或终点的位置 Echarts文档

1. 通过 x, y 属性指定相对容器的屏幕坐标，单位像素，支持百分比。
2. 用 coord 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 'min', 'max', 'average'。
3. 直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
4. 如果是笛卡尔坐标系的话，也可以通过只指定 xAxis 或者 yAxis 来实现 X 轴或者 Y 轴为某值的标线，见示例 scatter-weight

markLine: {
    data: [
        // 平均值 最大 最小 
        {
            type: 'average' // 'average', 'min', 'max' 
        },
        // Y 轴值为 100 的水平线, 如果值没有出现100，不会显示
        {
            name: 'Y 轴值为 100 的水平线',
            yAxis: 100
        },
        // 起点和终点的项会共用一个 name
        [
            {name: '最小值到最大值',type: 'min'},
            {type: 'max'}
        ],
        [
            { name: '两个坐标之间的标线', coord: [10, 20] }, { coord: [20, 30] } 
        ]，
        [
            {name: '两个屏幕坐标之间的标线', x: 100, y: 100},
            {x: 500, y: 200}
        ]
    ]
}

13. 堆叠柱状图

series[i].stack = 'Ad' // 当有多个Ad的时候就会自动堆叠展示

饼图 Pie

1. 数据格式

series[i].data = [{ name: 'A', value: 2 }]

2. 饼图大小

series[i].radius // Number, String, Array

Array ['40%', '70%']可设置为空心

3. 饼图鼠标移入样式 Echarts文档

series[i].emphasis.itemStyle

可通过itemStyle 的 borderRadius 相关属性设置圆角

4. 饼图颜色

series[i].itemStyle.normal.color // String Function

5. 饼图的线

series[i].labelLine

6. 饼图的值文字样式

series[i].data[j].label

• 或使用 formatter 修改内容，如添加百分比

formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比

7. 饼图的位置

series[i].center = [x, y]

8. 饼图的开始的角度，默认为0，从三点钟方向开始 半圆饼图案例

series[i].startAngle // 支持范围 0 ~ 360

9. 饼图的标签对齐 alignTo

series[i].data[j].label.alignTo

• 'none'（默认值）：label line 的长度为固定值，分别为 labelLine.length 及 labelLine.length2。
• 'labelLine'：label line 的末端对齐 ，其中最短的长度由 labelLine.length2 决定。
• 'edge'：文字对齐 ，文字的边距由 label.edgeDistance 决定。

折线图 Line

series: {
  data: [300, 230, 224, 218, 135, 147, 260],
  type: 'line',
  symbol: 'circle', //拐点样式
  symbolSize: 18, //拐点大小
  smooth: false, // 折线是否平滑曲线展示
  itemStyle: {
    normal: {
      lineStyle: {
        width: 3, //折线宽度
        color: '#FF0000' //折线颜色
      },
      color: 'red', //拐点颜色
      borderColor: '#000000', //拐点边框颜色
      borderWidth: 3 //拐点边框大小
    },
    emphasis: {
      color: '#000000' //hover拐点颜色定义
    }
  }
}

颜色

1. 常用

color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

2. 渐变或者纹理

线性渐变

前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [
      { offset: 0, color: 'red' }, // 0% 处的颜色
      { offset: 1, color: 'blue' } // 100% 处的颜色
  ],
  global: false // 缺省为 false
}

径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变

{
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.5,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}

纹理填充

{
  image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
  repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

3. 使用API

线性 LinearGradient

new echarts.graphic.LinearGradient(
    0, 0, 0, 1, // 渐变的起始位置，设置为从左上角到左下角
    [
        { offset: 0, color: '#2378f7' }, // 渐变的起始颜色
        { offset: 0.7, color: '#2378f7' },
        { offset: 1, color: '#83bff6' } // 渐变的结束颜色
    ]
)

径向 RadialGradient

// x和y定义圆心的坐标，r定义圆的半径，colorStops定义渐变的颜色和位置
new echarts.graphic.RadialGradient(
    x, y, r,
    colorStops
)

三角 TriangleGradient

// (x0, y0)、(x1, y1)、(x2, y2)定义三角形的三个顶点的坐标，colorStops定义渐变的颜色和位置
new echarts.graphic.TriangleGradient(
    x0, y0, x1, y1, x2, y2,
    colorStops
)

主题色

1. 下载主题

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['exports', 'echarts'], factory)
  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    // CommonJS
    factory(exports, require('echarts'))
  } else {
    // Browser globals
    factory({}, root.echarts)
  }
}(this, function (exports, echarts) {
  var log = function (msg) {
    if (typeof console !== 'undefined') {
      console && console.error && console.error(msg)
    }
  }
  if (!echarts) {
    log('ECharts is not Loaded')
    return
  }
  echarts.registerTheme('myTheme', {
    // ...
  })
}))

2. 使用

this.ECharts.init(element, themeName)

其中 themeName 对应 echarts.registerTheme 的第一个参数

应用1：在x轴下绘制表格

原文

let map = {
            销售单价: [2200.0, 4000.9, 700.0, 2003.2, 2005.6, 7006.7, 10035.6, 9602.2, 3200.6, 2000.0, 1602.4, 0],
            市场价: [2200.6, 8005.9, 900.0, 2006.4, 2008.7, 7000.7, 10075.6, 10082.2, 4800.7, 1008.8, 600.0, 0],
            拨入量: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 10.3, 13.4, 13.0, 16.5, 12.0, 0, 87.5],
            销售量: [1.0, 2.2, 4.3, 4.5, 7.3, 10.2, 11.3, 15.4, 18.0, 18.5, 12.0, 0, 104.7]
          };

 option = {
        title: {
          text: "2021年1-12月xxx量价对比图"
        },
        darkMode: true,
        grid: {
          x: 150,
          // y:45,
          x2: 50,
          y2: 210
          // borderWidth:1
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 当鼠标移入的时候显示对应的x和y轴对应的值
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          align: "right",
          itemGap: 30,
          orient: "vertical",
          textStyle: { color: "#000" },
          bottom: 10,
          left: 0,
          data: ["拨入量", "销售量", "销售单价", "平均单价"]
        },
        xAxis: [
          {
            type: "category",
            max: 12,
            interval: Math.ceil(12) / 12,
            // axisTick: {
            //   interval: 12/12
            // },
            axisLabel: {
              fontWeight: "bold",
              show: true,
              textStyle: {
                // color: "#f4f4f4",
                fontSize: "14px"
              }
            },
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月", "1-12月\n累计"],
            axisPointer: {
              type: "shadow"
            }
          },
          {
            // 此x轴当作左右边框
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部 相当于左右边框位置，需要配合 axisTick
            offset: 45, // 向下偏移，使分组文字显示位置不与原x轴重叠
            // axisLine: {
            //   show: false // 隐藏分组x轴的轴线
            // },
            axisTick: {
              // 相当于左右边框
              length: -200, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
              // interval: function(index, value) {
              //   return index === 0 || index === 2 || index === 5; // 在0、5、6处各画一条刻度线
              // }
              // interval: 1,
            },
            // min: -30,
            max: 12,
            interval: 1,
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            },
            data: [""]
          },
          {
            // 此X轴相当于图表的左右y轴线以及第一个x轴的底部边框
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 36, // 向下偏移，使分组文字显示位置不与原x轴重叠
            max: 12,
            interval: Math.ceil(12) / 12,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
            },
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            }
          },
          {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 75, // 向下偏移，使分组文字显示位置不与原x轴重叠
            max: 12,
            interval: 1,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
            },
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            },
            data: [11.5, 25.8, 13.1, 17.2, 10.88, 14.21, 47.2, 90, 6, 12.2, 25.34, 0, 273.43]
          },
          {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 120, // 向下偏移，使分组文字显示位置不与原x轴重叠
            max: 12, // 边框的数量
            interval: Math.ceil(12) / 12,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
            },
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            },
            data: [11.5, 25.8, 13.1, 17.2, 10.88, 14.21, 47.2, 90, 6, 12.2, 25.34, 0, 273.43]
          },
          {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 160, // 向下偏移，使分组文字显示位置不与原x轴重叠
            max: 12, 
            interval: 1,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
            },
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            },
            data: [137850.1, 145620.3, 154562.6, 165230.2, 175623.2, 185620.7, 196523.5, 201520.9, 215230.6, 220325.7, 236520.7, 0]
          },
          {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 200, // 向下偏移，使分组文字显示位置不与原x轴重叠
            max: 12,
            interval: 1,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
            },
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            },
            data: [137850.1, 145620.3, 154562.6, 165230.2, 175623.2, 185620.7, 196523.5, 201520.9, 215230.6, 220325.7, 236520.7, 0]
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量：吨",
            // min: 0,
            max: Math.ceil(115),
            interval: Math.ceil(115) / 5,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                // color: "#f4f4f4",
                fontSize: "14px"
              }
            }
          },
          {
            type: "value",
            name: "价格：元/吨",
            // min: 0,
            max: Math.ceil(22500),
            // splitNumber: 6,
            interval: Math.ceil(22500) / 5,
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "拨入量",
            type: "bar",
            unit: "吨",
            groupName: "拨入/销售量",
            data: map["拨入量"],
            itemStyle: {
              color: "rgb(242, 143, 133)"
            }
          },
          {
            name: "销售量",
            type: "bar",
            unit: "吨",
            groupName: "拨入/销售量",
            data: map["销售量"],
            itemStyle: {
              color: "rgb(183, 222, 232)"
            }
          },
          {
            name: "销售单价",
            type: "line",
            yAxisIndex: 1,
            unit: "元/吨",
            data: map["销售单价"],
            itemStyle: {
              color: "rgb(196, 23, 23)"
            },
            lineStyle: {
              width: 5
            }
          },
          {
            name: "平均单价",
            type: "line",
            yAxisIndex: 1,
            unit: "元/吨",
            data: map["市场价"],
            itemStyle: {
              color: "rgb(0, 112, 192)"
            },
            lineStyle: {
              width: 5,
              type: [10, 10],
              dashOffset: 5
            }
          }
        ]
      };