ECharts 入门

最新推荐文章于 2023-09-21 10:57:59 发布

Good luck。

最新推荐文章于 2023-09-21 10:57:59 发布

阅读量149

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_73758209/article/details/128939334

版权

1：介绍：ECharts 是一个基于 JavaScript 的开源可视化图表库。

2：特性：

丰富的图表类型：提供开箱即用的 20 多种图表和十几种组件，并且支持各种图表以及组件的任意组合。
强劲的渲染引擎：Canvas、SVG 双引擎一键切换，增量渲染、流加载等技术实现千万级数据的流畅交互。
专业的数据分析：通过数据集管理数据，支持数据过滤、聚类、回归，帮助实现同一份数据的多维度分析。
优雅的可视化设计：默认设计遵从可视化原则，支持响应式设计，并且提供了灵活的配置项方便开发者定制。
健康的开源社区：活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求。
友好的无障碍访问：智能生成的图表描述和贴花图案，帮助视力障碍人士了解图表内容，读懂图表背后的故事。

3：从CDN获取：

从从 BootCDN 引入 ECharts：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>图表</title>
	</head>
	<body>

		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/i18n/langZH.js"></script>
	</body>
</html>

4：柱状图示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>图表</title>
		<style>
            * {
				margin: 0;
				padding: 0;
			}
            
			html,
			body {
				width: 100%;
				height: 100%;
			}

			#main {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/i18n/langZH.js"></script>
		<script>
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option = {
				xAxis: {
					type: 'category',
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [120, 200, 150, 80, 70, 110, 130],
					type: 'bar'
				}]
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

效果：

5：样式

5.1：颜色主题（最简单的更改全局样式的方式，是直接采用颜色主题（theme））。

ECharts 除了一贯的默认主题外，还内置了 dark 主题。可以像这样切换成深色模式：

var chart = echarts.init(dom, 'dark');

5.2：调色盘

调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

示例：

option = {
  // 全局调色盘。
  color: [
    '#c23531',
    '#2f4554',
    '#61a0a8',
    '#d48265',
    '#91c7ae',
    '#749f83',
    '#ca8622',
    '#bda29a',
    '#6e7074',
    '#546570',
    '#c4ccd3'
  ],
  series: [
    {
      type: 'bar',
      // 此系列自己的调色盘。
      color: [
        '#dd6b66',
        '#759aa0',
        '#e69d87',
        '#8dc1a9',
        '#ea7e53',
        '#eedd78',
        '#73a373',
        '#73b9bc',
        '#7289ab',
        '#91ca8c',
        '#f49f42'
      ]
      // ...
    },
    {
      type: 'pie',
      // 此系列自己的调色盘。
      color: [
        '#37A2DA',
        '#32C5E9',
        '#67E0E3',
        '#9FE6B8',
        '#FFDB5C',
        '#ff9f7f',
        '#fb7293',
        '#E062AE',
        '#E690D1',
        '#e7bcf3',
        '#9d96f5',
        '#8378EA',
        '#96BFFF'
      ]
      // ...
    }
  ]
};

5.3：数据集

数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行“数据和其他配置”分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

5.3.1：在数据中设置数据

示例：

option = {
  xAxis: {
    type: 'category',
    data: ['抹茶拿铁', '奶茶', '芝士可可', '核桃布朗尼']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
};

效果：

这种方式的优点是，适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。

5.3.2：在数据集中设置数据

而数据设置在数据集（dataset）中，会有这些好处：

能够贴近数据可视化常见思维方式：（Ⅰ）提供数据，（Ⅱ）指定数据到视觉的映射，从而形成图表。
数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

示例：

option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ['产品', '2015', '2016', '2017'],
      ['抹茶拿铁', 43.3, 85.8, 93.7],
      ['奶茶', 83.1, 73.4, 55.1],
      ['芝士可可', 86.4, 65.2, 82.5],
      ['核桃布朗尼', 72.4, 53.9, 39.1]
    ]
  },
  // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
  xAxis: { type: 'category' },
  // 声明一个 Y 轴，数值轴。
  yAxis: {},
  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

效果：