1、ECharts介绍
1.1、什么是ECharts
ECharts是一款由百度开发并开源的数据可视化图表库，旨在帮助开发者通过简单易用的方式实现复杂的数据展示和分析需求。它完全基于 JavaScript 开发，利用 HTML5 的 Canvas 技术进行图形渲染，这使得它能够在现代浏览器中高效地展示各种类型的图表。底层依赖矢量图形库 ZRender（二维可视化库），提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 的起源可以追溯到2013年，最初由百度前端技术部推出。作为开源项目，它采用了模块化的设计理念，开发者可以根据需要引入和使用各种功能模块，例如不同类型的图表、主题定制、工具箱等。
ECharts 适用于几乎所有现代主流的网页浏览器，包括但不限于以下几种：
- Google Chrome（谷歌）
- Mozilla Firefox（火狐）
- Microsoft Edge（Edge）
- Safari（苹果）
- Opera
这些浏览器对 HTML5 和 Canvas 的支持非常良好，而 ECharts 利用 HTML5 的 Canvas 技术进行图形渲染，因此能在这些浏览器上提供高效的数据可视化体验。
1.2、ECharts的特点
ECharts 的特点包括：
- 灵活性：支持丰富的图表类型和自定义配置。
- 交互性：提供良好的用户交互体验，可以实现缩放、拖拽等功能。
- 高性能：适合处理大规模数据，渲染速度快。
- 易于集成：可以与各种前端框架（如 Vue、React）无缝结合。
ECharts 被广泛应用于数据分析、商业智能、仪表盘等领域。
2、ECharts应用场景
ECharts 的应用场景非常广泛，主要包括以下几个方面：
- 数据分析和可视化：ECharts 提供了丰富的图表类型和灵活的配置选项，可以帮助用户将复杂的数据转化为直观的图表和图形，从而更好地理解和分析数据。
- 实时监控和仪表盘：由于 ECharts 支持实时更新和动态数据展示，因此在实时监控、仪表盘和数据驱动的应用中得到广泛应用，如企业运营监控、物联网设备监控等。
- BI（商业智能）应用：ECharts 可以帮助企业构建各种类型的报表和数据分析工具，支持复杂的数据呈现和交互式探索，是商业智能系统中不可或缺的一部分。
- 地理信息可视化：通过 ECharts 提供的地图功能，可以实现地理信息数据的可视化展示，包括热力图、地图标记等，适用于位置相关的数据分析和展示。
- 大屏展示和数据报告：ECharts 的高性能和良好的用户交互体验使其成为大屏展示和数据报告制作的理想工具，如会议展示、公共信息展示等场景。
总体来说，ECharts 不仅适用于网页和移动端的数据可视化需求，还可以根据具体应用场景进行定制和扩展，是开发人员和数据分析师在数据展示方面的重要选择之一
ECharts 之所以在这些领域中如此受欢迎，其优势和适用性在于以下几点：
- 丰富多样的图表类型：ECharts 支持多种图表类型，能够满足不同场合下对图表形式的需求。
- 高度定制和配置：可以通过配置项实现图表的自定义，适用于各种特殊需求和品牌一致性的要求。
- 良好的扩展性和集成性：ECharts 的设计允许用户扩展和集成到多种前端技术栈中，包括但不仅限于 React, Vue, Angular 等现代前端框架，并能够支持服务端渲染。
- 高效交互性和直观的数据探索：ECharts 支持鼠标悬停、点击、缩放、平移等交互操作，用户可以直观地探索数据背后的故事。
- 出色的性能表现：ECharts 在处理大量数据时的渲染速度和稳定性表现出色，能够适应实时数据变化的环境。
综合上述特点，ECharts 成为了许多企业和开发者进行数据可视化的首选工具之一。
3、初步了解ECharts
3.1、快速上手
3.1.1.获取 Apache ECharts
在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
如下：
随后ctrl+s保存文件即可
3.1.2、案列演示
步骤一：引入 ECharts 库
首先，您需要在项目中引入 ECharts 库文件。可以通过 CDN 或者下载到本地使用。
<html>
<head>
<title>ECharts入门</title>
<script src="echarts.js"></script>
</head>
<body>
</body>
</html>
步骤二：创建图表容器
在页面中创建一个容器 <div> 作为图表的显示区域，指定其宽度和高度。
<div id="chart" style="width: 600px; height: 400px;"></div>
步骤三：编写 JavaScript 代码生成图表
使用 JavaScript 编写代码来生成和配置 ECharts 图表。
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
示例说明
- 初始化 ECharts 实例：使用
echarts.init()方法初始化一个 ECharts 实例，传入要绑定的 DOM 元素。 - 配置项 option：这是一个 JavaScript 对象，包含了图表的各种配置项，例如标题、坐标轴、数据系列等。详细配置可以参考 ECharts 官方文档。
- 数据填充：在
series中配置具体的图表类型（例如柱状图'bar'），以及相应的数据。 - 显示图表：通过
myChart.setOption(option)将配置项应用到图表实例中，从而显示出柱状图。
3.2、相关配置项详解
基于
option = {
//标题
title: {
text: '标题'
},
//提示框组件
tooltip: {
//触发方式
trigger: 'item',
//坐标轴指示器配置项
axisPointer: {
type: 'cross',
label: {
backgroundColor: 'red'
}
}
},
//图列组件 当series中存在数据的时候，data可以省略
legend: {
// data: ['邮箱', '阿迪达斯', 'Video Ads', 'Direct', 'Search Engine']
},
//工具栏
toolbox: {
feature: {
//可下载为图片
saveAsImage: {},
//显示详细数据
dataView:{}
}
},
//直角坐标系内绘图网格
grid: {
left: '2%',
right: '4%',
bottom: '3%',
//防止溢出
containLabel: true
},
//直角坐标系grid的x轴
xAxis: [
{
//类目轴
type: 'category',
//留白策略
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '邮箱',
//数据展示类型
type: 'line',
stack: 'Total',
// 区域填充样式
areaStyle: {
color:"red"
},
emphasis: {
// 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 340]
},
{
name: '阿迪达斯',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
4、Vue整合ECharts
4.1、版本兼容性
对于 Vue 2.x 版本，通常建议使用 ECharts 4.x 版本。ECharts 4.x 提供了对 Vue 2.x 的良好支持，能够无缝集成并与 Vue 组件进行交互。在使用过程中，您可以直接通过 vue-echarts 或者手动引入 ECharts 实例来与 Vue 2.x 配合使用。
如果您使用的是 Vue 3.x，可以考虑使用 ECharts 5.x 版本，它进一步优化了对 Vue 3.x 的支持，并提供了更多新特性和改进。
4.2、基础案列
当您需要在 Vue 项目中整合 ECharts（图表库）时，以下是一个基本的示例案例，展示如何在 Vue 组件中使用 ECharts 来展示数据图表。
步骤一：安装 ECharts
首先，确保您的项目已经集成了 Vue，并安装 ECharts。可以通过 npm 或 yarn 进行安装：
npm install echarts@4.2.1 -S
或者
yarn add echarts
步骤二：创建 Vue 组件
假设您已经有一个 Vue 项目，现在创建一个简单的 Vue 组件来展示 ECharts 图表。
<template>
<div class="dashboard">
<div class="chart" ref="lineChart" style="height: 400px;"></div>
<div class="chart" ref="barChart" style="height: 400px;"></div>
<div class="chart" ref="pieChart" style="height: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
this.initLineChart();
this.initBarChart();
this.initPieChart();
},
methods: {
initLineChart() {
const lineChart = echarts.init(this.$refs.lineChart);
const option = {
title: { text: '折线图示例' },
tooltip: {},
legend: { data: ['销量'] },
xAxis: { data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
};
lineChart.setOption(option);
},
initBarChart() {
const barChart = echarts.init(this.$refs.barChart);
const option = {
title: { text: '柱状图示例' },
tooltip: {},
legend: { data: ['销售量'] },
xAxis: { data: ['A', 'B', 'C', 'D', 'E', 'F'] },
yAxis: {},
series: [{
name: '销售量',
type: 'bar',
data: [30, 40, 50, 60, 70, 80]
}]
};
barChart.setOption(option);
},
initPieChart() {
const pieChart = echarts.init(this.$refs.pieChart);
const option = {
title: { text: '饼图示例', subtext: '数据来源网络', left: 'center' },
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', left: 'left' },
series: [{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}]
};
pieChart.setOption(option);
}
}
};
</script>
<style scoped>
.dashboard {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.chart {
width: 30%;
margin: 1%;
}
</style>
步骤三：解析示例
- 模板 (template): 在模板中，使用一个
<div>元素作为图表的容器，通过ref="chart"来引用这个 div。 - 脚本 (script):
- 引入 ECharts 库，并在
data中定义了一个简单的chartData对象，用于存放图表的数据。 - 在
mounted钩子中调用initChart方法，初始化 ECharts 实例并生成图表。
- 引入 ECharts 库，并在
- 方法 (methods):
initChart方法负责初始化图表，配置图表的基本信息和数据，并将图表渲染到之前定义的<div>中。
- 样式 (style): 可以根据需要添加样式来调整图表的外观和布局。
步骤四：使用示例
将上述 Vue 组件集成到您的 Vue 项目中，并根据具体需求修改图表的配置和样式。这个示例展示了一个简单的柱状图，您可以根据 ECharts 的文档进一步探索更多图表类型和配置选项，以及如何与实际数据集成。
这样，您就可以在 Vue 项目中使用 ECharts 创建和展示各种数据可视化图表了。
