Echarts

Happy_Lzy

已于 2023-03-03 10:39:13 修改

阅读量353

点赞数

文章标签： echarts

于 2023-02-11 15:06:38 首次发布

本文链接：https://blog.youkuaiyun.com/m0_57902652/article/details/121891880

版权

本文介绍了如何引入和使用Echarts库来创建柱状图和折线图，包括基本步骤、配置项设置如xAxis、yAxis、图例、series，以及柱状图的特殊效果如标记、平均值显示和横向柱状图。同时，文章还提到了折线图的实现及线条控制等，并讨论了通用配置如标题、提示框、工具箱和图例的功能和配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、如何引入Echarts?

2.准备容器

使用Echarts绘制图表前需要先有一个有宽高的DOM容器

3.绘制柱状图

接着通过使用echarts.init方法来初始化一个echarts实例和使用setOption方法生成一个简单的柱状图。

基本步骤：

（1）引入echarts.js文件

（2）准备一个呈现图表的盒子

（3）初始化echarts实例对象

（4）准备配置项

（5）将配置项设置成echarts实例对象

配置项的相关说明：

xAxis
直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
呈现
yAxis
直角坐标系中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
series 下找数据进行图表的绘制

图例组件：展现不同系列的标记（symbol），颜色和名字。可以通过点击图例控制那些系列不显示。

series
系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于
配置项的学习, 大家可以不用死记硬背, 需要的时候查一查官方文档即可. 网址:
https://echarts.apache.org/zh/option.html , 常用的配置项多用几次, 你自然而然就记下了

title中的各种配置：

title: {
  show: true,
  text: '标题',
  link: 'http://www.itcast.cn',
  textStyle: {
    color: 'red'
 }
}

图表1 柱状图

柱状图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
<script>
 var mCharts = echarts.init(document.querySelector("div"))
 var option = {}
 mCharts.setOption(option)
</script>
</body>
</html>

此时 option 是一个空空如也的对象

步骤2 准备x轴的数据

步骤3 准备 y 轴的数据

步骤4 准备 option , 将 series 中的 type 的值设置为: bar

注意: 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type
属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,
那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制

柱状图的常见效果

标记:

最大值\最小值 markPoint

series: [
 {
    ......
    markPoint: {
      data: [
       {
          type: 'max', name: '最大值'
       },
       {
          type: 'min', name: '最小值'
       }
     ]
   }
 }
]

平均值 markLine

series: [
 {
    ......
    markLine: {
      data: [
       {
          type: 'average', name: '平均值'
       }
     ]
   }
 }
]

显示

数值显示 label

series: [
 {
    ......
    label: {
      show: true, // 是否可见
      rotate: 60 // 旋转角度
   }
 }
]

柱宽度 barWidth

series: [
 {
    ......
    barWidth: '30%' // 柱的宽度
 }
]

横向柱状图

所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为
value , yAxis 的 type 设置为 category , 并且设置 data 即可

var option = {
  xAxis: {
    type: 'value'
 },
  yAxis: {
    type: 'category',
    data: xDataArr
 },
  series: [
   {
      type: 'bar',
      data: yDataArr
   }
 ]
}

柱状图特点

柱状图描述的是分类数据，呈现的是每一个分类中『有多少？』, 图表所表达出来的含义在于不同类别数据的排名\对比情况

通用配置

使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置.

标题: title

var option = {
  title: {
    text: "成绩",  // 标题文字
    textStyle: {
      color: 'red' // 文字颜色
   },
    borderWidth: 5,  // 标题边框
    borderColor: 'green', // 标题边框颜色
    borderRadius: 5,  // 标题边框圆角
    left: 20, // 标题的位置
    top: 20 // 标题的位置
 }
}

提示框: tooltip

tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框

触发类型: trigger

可选值有item\axis

触发时机: triggerOn

可选值有 mouseOver\click

格式化显示: formatter

字符串模板

var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: '{b}:{c}'
 }
}

这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述

回调函数

var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: function (arg) {
      return arg.name + ':' + arg.data
   }
 }
}

工具按钮: toolbox

toolbox 是 ECharts 提供的工具栏, 内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切
换五个工具
工具栏的按钮是配置在 feature 的节点之下

var option = {
  toolbox: {
    feature: {
      saveAsImage: {}, // 将图表保存为图片
      dataView: {}, // 是否显示出原始数据
      restore: {}, // 还原图表
      dataZoom: {}, // 数据缩放
      magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
        type: ['bar', 'line']
     }
   }
 }
}

图例: legend

legend 是图例,用于筛选类别,需要和 series 配合使用
legend 中的 data 是一个数组
legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致

图表2 折线图

折线图的实现步骤：基本和柱状图差不多，只需要将 series 中的 type 的值设置为: line

折线图的常见效果

标记

标注区间 markArea

var option = {
  series: [
   {
      ......
markArea: {
       data: [
       [
        {
          xAxis: '1月'
        }, {
          xAxis: '2月'
        }
       ],
       [
        {
          xAxis: '7月'
        }, {
          xAxis: '8月'
        }
       ]
      ]
     }
   }
 ]
}

线条控制

平滑线条 smooth

var option = {
  series: [
   {
      ......
smooth: true
   }
 ]
}

线条样式 lineStyle

var option = {
  series: [
   {
      ......
      smooth: true,
      lineStyle: {
        color: 'green',
        type: 'dashed' // 可选值还有 dotted  solid
     }
   }
 ]
}

填充风格 areaStyle

var option = {
  series: [
   {
      type: 'line',
      data: yDataArr,
      areaStyle: {
        color: 'pink'
     }
   }
 ]

紧挨边缘 boundaryGap

boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始

var option = {
  xAxis: {
    type: 'category',
    data: xDataArr,
    boundaryGap: false
 }
}

缩放, 脱离0值比例

如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

scale 配置

scale 应该配置给 y 轴

var option = {
  yAxis: {
    type: 'value',
    scale: true
 }
}

堆叠图

堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上
相加