Echarts使用文档

Nie_XiaoGang

已于 2024-04-22 09:17:14 修改

阅读量460

点赞数 3

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

于 2024-02-21 17:05:14 首次发布

本文链接：https://blog.csdn.net/Nie_XiaoGang/article/details/136210827

版权

常用插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Echarts使用文档

安装引入

从 npm 获取，并在项目中引入

// 通过npm下载
npm install echarts --save

// 引入Echarts
import * as echarts from 'echarts';

从CDN下载js文件，并引入

在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

初始化

定义一个具有宽高的容器，初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 opts.width 或 opts.height 将其覆盖。

<div id="my-echart" style="width: 600px;height:400px;"></div>

通过init()初始化实例对象，添加配置项，通过setOption()为实例添加配置项及数据

// 引入Echarts
import * as echarts from 'echarts';

// 初始化实例
const myChart = echarts.init(documnet.querySelector('#my-echart'))
// 添加图标配置
const option = {}
// 为实例添加配置项
option && myChart.setOption(option)

实例销毁与重建

在容器节点被销毁时，总是应调用echartsInstance.dispose以销毁实例释放资源，避免内存泄漏。

echarts.init(document.querySelector('#my-echart')).dispose()

常用配置项

// 添加图标配置
const option = {
    // 调色盘,支持rgb、rgba、十六进制
    color: []
	// 数据集
    dataset: {}
	// 图例
	legend: {},
    // 提示框组件
    tooltip: {},
    // 网格
    grid: {},
    // X轴
    xAxis: {},
    // Y轴
    yAxis: {},
    // 用于区域缩放
    dataZoom: {
    	type: 'slider'
    },
    // 系列
    series: [{}]
}

常用事件

鼠标事件

所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象
myChart.on(eventName, query, handler); 使用 query 只对指定的组件的图形元素的触发回调：

// 给实例添加点击事件
myChart.on('click', (params) => {
    console.log(params, '===legendselectchanged')
});

// 给实例中的series组件添加点击事件
myChart.on('click', 'series', (params) => {
    console.log(params, '===legendselectchanged')
});

组件交互事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件

// 图例组件选中状态改变时触发
myChart.on('legendselectchanged', (params) => {
	console.log(params, '===legendselectchanged')
})

监听“空白处”的事件
zrender 事件和 echarts 事件

myChart.getZr().on('click', function(event) {
  // 该监听器正在监听一个`zrender 事件`，鼠标点击容器中任何地方都会触发。
});
myChart.on('click', function(event) {
  // 该监听器正在监听一个`echarts 事件`，鼠标点击图形元素时才会触发。
});

实现监听空白处事件

myChart.getZr().on('click', function(event) {
  // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
  if (!event.target) {
    // 点击在了空白处，做些什么。
  }
})

重要概念

数据集

https://echarts.apache.org/handbook/zh/concepts/dataset/#%E7%BB%B4%E5%BA%A6%EF%BC%88dimension%EF%BC%89

数据集（dataset）是专门用来管理数据的组件，实现将数据与其他配置分开管理

option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据集
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
  xAxis: { type: 'category' },
  // 声明一个 Y 轴，数值轴。
  yAxis: {},
  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
  // 可以通过series.seriesLayoutBy配置系列对应dataset的row还是column
  series: [
      { type: 'bar', seriesLayoutBy: 'row' },
      { type: 'bar', seriesLayoutBy: 'row' },
      { type: 'bar', seriesLayoutBy: 'row' }
  ]
}