Page 221 - 统计创新与高质量发展

第八章 统计教育与培训：构建专业能力

1. 基本使用与配置
使用 Echarts 首先需引入相关的 JavaScript 文件，可通过 CDN 链接或下载本
地文件的方式。引入后，在 HTML 页面中创建一个用于承载图表的 DOM 元素，

如 <div id="chart" ＞ </div ＞。接着，通过 JavaScript 代码初始化 Echarts 实例并
配置图表。例如创建一个简单的柱状图，代码如下：
// 基于准备好的 dom，初始化 echarts 实例
var myChart = echarts.init(document.getElementById(‘chart’));

// 配置图表参数
var option = {
xAxis: {
type: ‘category’,

data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
},
yAxis: {
type: ‘value’
},

series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: ‘bar’

}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2. 丰富的图表类型与定制
Echarts 提供了数十种图表类型，包括常见的柱状图、折线图、散点图、饼图，
还有地图、漏斗图、雷达图、桑基图等。以地图为例，可用于展示地理数据分布，
如展示各省份的人口密度，通过配置不同省份的颜色深浅来表示人口密度的高低。

在定制方面，Echarts 支持对图表的各个元素进行个性化设置，包括坐标轴的刻度、
标签样式，系列数据的颜色、形状，以及添加标题、图例、注释等。例如，可设
置柱状图柱子的圆角、阴影效果，让图表更具视觉吸引力。

213