小白也能轻松上手的ECharts 配置手册

📢?鸿蒙专栏：想学鸿蒙的，冲

📢 C语言专栏：想学C语言的，冲

📢?VUE专栏：想学VUE的，冲这里

📢?CSS专栏：想学CSS的，冲这里

📢 Krpano专栏：想学VUE的，冲这里

🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！

目录

一、基础配置

1. 图形配置

width、height

renderer

devicePixelRatio

2. 标题和图例配置

title

legend

3. 坐标轴配置

grid

xAxis、yAxis

4. 系列(Series)配置

series

5. 提示框(Tooltip)配置

tooltip

6. 视觉映射配置

visualMap

7. 事件和交互配置

dataZoom

magicType

restore

二、高级系列配置

series.encode

series.markPoint

series.markLine

高级轴配置

axis.axisLabel

axis.axisTick

axis.splitLine

高级组件配置

graphic

timeline

---

?

??

亲爱的小白用户,我来啦!

????????学绘画的第一步是学会用铅笔画一条直线,编程的第一步是输出一个 “Hello World”,使用 ECharts 的第一步,就是配置出一个最简单的柱状图。

????????什么,你还不会?别急,LETTRE 传授你独门秘笈,让你快速上手 ECharts,防止在群里被嘲讽成“啥也不会的小白”。

????????首先,你需要准备好 DOM 容器,HTML 部分我们就不多说了,直接上干货:

// 初始化 ECharts 实例
let myChart = echarts.init(document.getElementById('main'))

// 配置项
let option = {
  xAxis: {
    // ...省略坐标轴配置
  },
  yAxis: {
    // ...省略坐标轴配置
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10] 
  }]
}

// 设置配置项
myChart.setOption(option)

????????看,就是这么简单,代码量还不到 10 行,一个基础柱状图就出来了!

????????如果你还觉得有难度,不要灰心,我来手把手教你配置每个属性,保证通关无忧虑。我们一起进入 ECharts 的海洋,感受数据可视化的魅力!

一、基础配置

1. 图形配置

width、height

这两个配置项决定了图表的宽度和高度。默认情况下,ECharts 会自动获取所属 DOM 容器的宽高来设置图表尺寸。

示例:

let option = {
  width: 500, 
  height: 400
}

renderer

renderer 决定使用何种方式渲染图表,可选 'canvas' 或 'svg'。

• canvas:使用 HTML5 Canvas 渲染,能够提供更好的性能
• svg:使用 SVG 渲染,支持矢量图形,但渲染大数据量时会更吃力

示例:

let option = {
  renderer: 'svg' 
}

devicePixelRatio

这个配置项可以提高图表在高分屏下的显示效果。如果设置为 2,则表示提高像素密度,使得图形的显示更加清晰。

示例:

let option = {
  devicePixelRatio: 2
}

2. 标题和图例配置

title

title 用于设置图表的主标题,包含三个属性:

• text:主标题文本
• subtext:副标题文本
• left/right/center:标题位置

示例:

let option = {
  title: {
    text: '主标题',
    subtext: '副标题',
    left: 'left' 
  }
}

legend

legend 用于设置图例,包含的属性有:

• data:图例的数据数组
• orient:图例列表的布局朝向,'horizontal'或'vertical'
• left/right/top/bottom:图例的位置

示例:

let option = {
  legend: {
    data: ['系列1', '系列2'],
    orient: 'vertical',
    left: 'left'
  }
}

注意：

legend图例需要配合?Series 去使用

3. 坐标轴配置

grid

grid 用于设置图表的网格系统,可以通过它来调整图表区域的位置。常见属性有:

• left:网格组件离容器左侧的距离
• top:网格组件离容器上侧的距离
• width:网格组件的宽度
• height:网格组件的高度

示例:

let option = {
  grid: {
    left: '10%',
    top: 60,
    width: '80%',
    height: '60%'
  }
}

xAxis、yAxis

xAxis 和 yAxis 分别用于设置横轴和纵轴的相关配置,常见属性包括:

• type:坐标轴类型,如 'category' 或 'value'
• name:坐标轴名称
• nameLocation:坐标轴名称位置
• nameGap:坐标轴名称与轴线之间的距离

示例:

let option = {
  xAxis: {
    type: 'category',
    name: 'x 轴',
    nameLocation: 'middle',
    nameGap: 30
  },
  
  yAxis: {
    type: 'value',
    name: 'y 轴' 
  }
}

4. 系列(Series)配置

series

series 数组用于配置每个系列(数据系列)的类型、名称、数据等。通常一个图表由多个系列组成。常见属性有:

• name:系列名称
• type:系列图表类型,如 'line'、'bar' 等
• data:系列数据
• stack:是否堆叠显示(用于堆叠柱状图等)

示例:

let option = {
  series: [
    {
      name: '系列1',
      type: 'line',
      data: [5, 20, 36, 10, 10]
    },
    {
      name: '系列2',
      type: 'bar',
      data: [55, 20, 16, 20, 10]
    }
  ]
}

5. 提示框(Tooltip)配置

tooltip

tooltip 用于配置提示框组件,常用属性:

• trigger:触发提示框的行为,如 'item' 或 'axis'
• formatter:提示框文字格式器,可以自定义显示内容
• backgroundColor:提示框背景颜色等

示例:

let option = {
  tooltip: {
    trigger: 'item', 
    formatter: '{b}: {c}',
    backgroundColor: 'rgba(0,0,0,0.7)'
  }
}

6. 视觉映射配置

visualMap

visualMap 用于进行『视觉编码』,也就是将数据映射到视觉元素(如颜色)。常用属性:

• min/max:数据的最小和最大值
• inRange: 在选中范围内的视觉配置
• outOfRange: 在选中范围外的视觉配置

示例:

let option = {
  visualMap: {
    min: 0,
    max: 100,
    inRange: {
      color: ['#313695', '#4575b4'] 
    },
    outOfRange: {
      color: '#ccc' 
    }
  }
}

7. 事件和交互配置

dataZoom

dataZoom 用于设置数据区域缩放组件,实现图表数据的区域缩放。常用属性:

• type:数据缩放类型,取值 'slider' 或 'inside'
• start/end:数据窗口范围的起始和结束百分比

示例:

let option = {
  dataZoom: {
    type: 'slider',
    start: 10, 
    end: 60
  }
}

magicType

magicType 的配置可以切换图表类型,常用值包括:

• 'line' 和 'bar':切换折线图和柱状图
• 'stack':切换堆叠模式

示例:

let option = {
  // 让图表支持 line、bar 切换
  magicType: {
    type: ['line', 'bar']
  }
}

restore

restore 配置可以提供还原和重置按钮,方便用户重置为默认状态。

示例:

let option = {
  // 开启还原和重置功能
  restore: {} 
}

二、高级系列配置

series.encode

encode 可以声明数据到视觉的映射,更加灵活地配置各个数据与图形属性的关系。

series: [{
  encode: {
    x: '时间',
    y: '指数',
    tooltip: ['时间', '指数']
  }
}]

series.markPoint

用于对特定数据进行标记,常用于呈现最大值、最小值等特殊点。

series: [{
  markPoint: {
    data: [
      {name: '最大', value: 180},
      {name: '最小', value: 2} 
    ]
  }  
}]

series.markLine

用于标线,可以标注平均线、警戒线等。

series: [{
  markLine: {
    data: [{
      name: '平均线',
      yAxis: 10
    }]
  }
}]

高级轴配置

axis.axisLabel

扩展轴标签的各种设置,如:

xAxis: {
  axisLabel: {
    interval: 0, // 强制显示所有标签
    rotate: 30, // 旋转角度
    margin: 20, // 刻度标签与轴线之间的距离
  }
}

axis.axisTick

扩展轴刻度的各种设置,如:

yAxis: {
  axisTick: {
    show: false, // 不显示刻度线
  }
}

axis.splitLine

扩展轴网格线的各种设置,如:

xAxis: {
  splitLine: { 
    lineStyle: {
      color: '#ddd',
      width: 1
    }
  }
}

高级组件配置

graphic

graphic 组件用于自定义更丰富的图形,支持矩形、圆、路径、图片等。

graphic: {
  elements: [{
    type: 'rect',
    left: 20,
    top: 20,
    width: 100, 
    height: 50,
    style: {
      fill: 'red'
    }
  }]
}

timeline

timeline 组件实现时间线Controls,可以播放并对比不同时间的图表。

timeline: {
  axisType: 'category',
  autoPlay: true,
  playInterval: 1000
}

持续更新文档内容...

? 结语

????????这样,我们就基本介绍完了 ECharts 的常用配置项，后续还会在此文章中持续更新更多配置。从基础的大小设置和标题组件,到复杂的坐标轴控制和数据视觉映射,ECharts 为数据可视化提供了强大而丰富的配置能力。

????????在继续深入学习 ECharts 时,不要被琳琅满目的配置项吓到。好的绘图作品需要细致的配置结合创意,但初学者完全可以从简单的配置入手,逐步掌握。将数据变成直观的可视化表达,既考验技巧,也是一种乐趣。

????????ECharts 还在持续更新,未来必将支持更多炫酷的配置和交互。在它的世界里,我们可以给数据赋予生命,将枯燥的数字变成生动的画卷。让我们在数据可视化的process中持续学习和创造,产出更多有价值的图表作品吧!

????????我们改日再会