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

最新推荐文章于 2024-09-17 07:23:55 发布

爱蹦跶的大A阿

最新推荐文章于 2024-09-17 07:23:55 发布

阅读量1.3k

点赞数 31

分类专栏： vue 文章标签： echarts vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41152573/article/details/135246972

版权

vue 专栏收录该内容

23 篇文章 6 订阅

订阅专栏

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

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

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

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

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

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

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

学绘画的第一步是学会用铅笔画一条直线,编程的第一步是输出一个 “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 用于配置提示框组件,常用属性:

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中持续学习和创造,产出更多有价值的图表作品吧!

我们改日再会

爱蹦跶的大A阿

关注

31
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录