ECharts 是一个由百度开源的基于 JavaScript 的可视化图表库，支持多种图表类型和丰富的交互功能。本教程将介绍 ECharts 的下载和基本使用方法。
下载 ECharts
可以从 ECharts 的官方网站（https://echarts.apache.org/zh/index.html）下载最新版本的 ECharts。下载后，将压缩包解压到 Web 服务器的根目录下，或者放到任何一个 Web 服务器可以访问到的目录下。
基本使用方法
- 引入 ECharts 文件
在 HTML 页面中引入 ECharts 的相关文件，包括 echarts.min.js 和 echarts.common.min.js。这两个文件分别包含 ECharts 的核心代码和通用模块。
<script src="/echarts/echarts.min.js"></script> <script src="/echarts/echarts.common.min.js"></script>
- 创建容器
在 HTML 页面中创建一个容器，用于显示图表。可以使用 <div> 元素来创建一个具有一定大小的容器，并指定它的 ID。在后面的 JavaScript 代码中，将使用这个 ID 来初始化图表。
<div id="myChart" style="width: 600px; height: 400px;"></div>
- 绘制图表
在 JavaScript 代码中，使用 echarts.init() 方法初始化图表，并使用 setOption() 方法设置图表的配置项。
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
这里创建了一个包含一个柱状图的图表，其中包含一个标题、一个提示框、一个图例、一个 x 轴、一个 y 轴和一个系列。其中，标题的文本为“ECharts 入门示例”，x 轴和系列的数据通过 JavaScript 数组指定。将这些配置项作为参数传递给 setOption() 方法，即可绘制图表。
- 查看图表
将 HTML 页面保存到 Web 服务器的根目录下，并在浏览器中访问该页面，即可看到一个包含柱状图的图表。
至此，您已经学会了如何下载 ECharts 并使用它绘制一个基本的图表。当然，ECharts 的功能远不止于此，您还可以根据自己的需要来绘制多种类型的图表，并且添加更多的交互功能。
- 绘制不同类型的图表
ECharts 提供了多种类型的图表，包括折线图、柱状图、散点图、饼图等等。下面我们以绘制一个饼图为例，来介绍如何使用 ECharts 绘制不同类型的图表。
首先，我们需要修改 HTML 页面中的容器大小，以适应饼图的显示。
<div id="myChart" style="width: 800px; height: 400px;"></div>
然后，在 JavaScript 代码中，修改图表的配置项，将其改为一个饼图的配置。
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
这里创建了一个包含一个饼图的图表，其中包含一个标题、一个提示框、一个图例、一个系列和一个饼图。其中，饼图的半径和圆心位置通过 radius 和 center 属性指定，饼图的数据通过 JavaScript 数组指定。将这些配置项作为参数传递给 setOption() 方法，即可绘制图表。
- 添加交互功能
ECharts 还支持添加多种交互功能，比如鼠标悬停提示、缩放、拖拽、切换系列、切换维度等等。下面我们以添加鼠标悬停提示为例，来介绍如何使用 ECharts 添加交互功能。
在 JavaScript 代码中，修改提示框的配置，使其在鼠标悬停在数据项上时显示。
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊
最后，将修改后的代码整合起来，就可以得到一个包含折线图和饼图，并支持鼠标悬停提示的交互式图表。
评论