栏目一：使用echarts绘制简单图形
- 前言
- 1. 在线编辑图形
- 1.1 折线图
- 1.2 柱状图
- 1.3 扇形图
- 2. 本地绘制图表
- 2.1 下载echarts.min.js
- 2.2 创建一个简单的图形
前言
Echarts是一款基于JavaScript的可视化图表库。它提供了丰富的图表类型和交互功能，可以用于在网页中展示各种数据。Echarts支持多种数据格式的转换和操作，可以轻松地将数据转换为图表所需的格式，并且可以对图表进行个性化的配置和设置。Echarts还支持响应式布局，可以根据不同的设备和屏幕大小自动调整图表的显示效果。Echarts的文档齐全，使用简便，并且具有强大的扩展性，可以满足各种复杂的数据可视化需求。
官网链接：https://echarts.apache.org/zh/index.html
快速入门：https://echarts.apache.org/handbook/zh/get-started/
本章节将从在线编辑图表和本地绘制图表两个方面进行介绍
1. 在线编辑图形
1.1 折线图
以下是官网的一个简单示例
代码介绍
// 注释说明：
// 1. 这个配置对象定义了一个简单的折线图，其中X轴是周几（‘Mon’到’Sun’），Y轴是对应的数值。
// 2. xAxis 定义了X轴的基本属性，包括轴的类型（类目轴）和轴上的数据（周一至周日）。
// 3. yAxis 定义了Y轴的基本属性，即轴的类型（数值轴）。
// 4. series 是图表的核心，定义了图表的数据和类型。这里只定义了一个系列，类型为折线图，数据为一周内每天的某个数值。
// ECharts 配置对象
option = { // X 轴配置 xAxis: { // X轴类型，'category' 表明是类目轴，适用于离散的类目数据 type: 'category', // X轴上的数据，数组项表示类目名 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // Y 轴配置 yAxis: { // Y轴类型，'value' 表明是数值轴，适用于连续数据 type: 'value' }, // 系列列表，每个系列通过 type 决定渲染成哪种图表 series: [ { // 数据数组，数组项通常为具体的数据值 data: [150, 230, 224, 218, 135, 147, 260], // 图表类型，'line' 表示折线图 type: 'line' } ]
};
1.2 柱状图
简单柱状图展示
代码介绍
// 注释说明：
// 1. 这个配置对象定义了一个简单的柱状图，其中X轴是周几（‘Mon’到’Sun’），Y轴是对应的数值。
// 2. xAxis 定义了X轴的基本属性，包括轴的类型（类目轴）和轴上的数据（周一至周日）。
// 3. yAxis 定义了Y轴的基本属性，即轴的类型（数值轴）。
// 4. series 是图表的核心，定义了图表的数据和类型。这里定义了一个系列，类型为柱状图。
// 5. 在 series 的 data 数组中，周二的数据被设置为一个对象，其中不仅包含了值（value: 200），还包含了数据点的样式（itemStyle），特别地将颜色设置为红色（#a90000）。
// 6. 其余数据点直接使用数值表示，没有额外设置样式，将使用默认的样式渲染。
// ECharts 配置对象
option = { // X 轴配置 xAxis: { // X轴类型，'category' 表明是类目轴，适用于离散的类目数据 type: 'category', // X轴上的数据，数组项表示类目名 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // Y 轴配置 yAxis: { // Y轴类型，'value' 表明是数值轴，适用于连续数据 type: 'value' }, // 系列列表，每个系列通过 type 决定渲染成哪种图表 series: [ { // 数据数组，数组项通常为具体的数据值，但也可以是包含值和样式的对象 data: [ 120, // 周一的数据 { value: 200, // 周二的数据值 itemStyle: { // 数据点的样式配置 color: '#a90000' // 将周二的数据点颜色设置为红色 } }, 150, // 周三的数据 80, // 周四的数据 70, // 周五的数据 110, // 周六的数据 130 // 周日的数据 ], // 图表类型，'bar' 表示柱状图 type: 'bar' } ]
};
1.3 扇形图
扇形图示例
代码介绍
// 注释说明：
// 1. 这个配置对象定义了一个饼图，展示了不同来源的访问量。
// 2. tooltip 组件用于在鼠标悬停时显示更详细的数据信息。
// 3. legend 组件用于显示图例，方便用户通过点击图例来筛选显示的数据系列。
// 4. series 定义了饼图的具体配置，包括名称、类型、半径范围、扇区样式、标签设置、高亮状态样式以及数据内容。
// 5. 在 series 的 data 数组中，每个对象代表一个扇区，包含数值（value）和名称（name）。
// 6. 注意：由于 label 的 show 属性被设置为 false，所以默认的标签不会显示，只有在扇区被高亮（如鼠标悬停）时，通过 emphasis 设置的标签才会显示。
// ECharts 配置对象
option = { // 提示框组件，用于展示更详细的数据信息 tooltip: { // 触发类型，'item' 表示数据项图形触发，主要在类目轴（category axis）上使用 trigger: 'item' }, // 图例组件，用于展示系列的标记（symbol）、颜色和名字 legend: { // 图例组件距离容器上边界的距离，单位可以是像素（px）或百分比（%） top: '5%', // 图例组件距离容器左边界的距离，这里设置为居中 left: 'center' }, // 系列列表，每个系列通过 type 决定渲染成哪种图表 series: [ { // 系列名称，用于 tooltip 的显示，legend 的图例筛选 name: 'Access From', // 图表类型，'pie' 表示饼图 type: 'pie', // 饼图的半径范围，数组的第一项是内半径，第二项是外半径 radius: ['40%', '70%'], // 是否启用标签的防重叠策略，这里设置为 false 表示不启用 avoidLabelOverlap: false, // 扇形的圆角角度，用于绘制圆角的扇形 padAngle: 5, // 扇形的样式设置 itemStyle: { // 扇形的边框圆角 borderRadius: 10 }, // 标签的显示设置 label: { // 是否显示标签 show: false, // 标签的位置 position: 'center' // 注意：由于 show 设置为 false，这里的位置设置实际上不会生效 }, // 高亮状态的样式设置 emphasis: { // 高亮时标签的显示设置 label: { // 是否显示标签 show: true, // 标签的字体大小 fontSize: 40, // 标签的字体粗细 fontWeight: 'bold' } }, // 是否显示扇区到标签的连线 labelLine: { show: false }, // 数据内容数组，表示每个扇区的数值和名称 data: [ { value: 1048, name: 'Search Engine' }, // 搜索引擎来源 { value: 735, name: 'Direct' }, // 直接访问 { value: 580, name: 'Email' }, // 邮件营销 { value: 484, name: 'Union Ads' }, // 联盟广告 { value: 300, name: 'Video Ads' } // 视频广告 ] } ]
};
2. 本地绘制图表
2.1 下载echarts.min.js
下载链接：https://gitee.com/hope_xi/common-js-files/blob/master/echarts.min.js#
选择echarts.min.js下载
如果觉得下载麻烦，也可以直接复制echarts.min.js代码，在本地创建echarts.min.js文件后把代码拷贝进取，保存。
2.2 创建一个简单的图形
常见一个demo.html文件，放入下方代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="../js/echarts.min.js"></script>
<script>var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,padAngle: 5,itemStyle: {borderRadius: 10},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: 40,fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]};option && myChart.setOption(option);
</script>
</html>
打开页面，便可看到echart图表
接下来就可以根据自己的项目选择合适的图表进行展示了。
具体图形设置可以观看echart配置项手册
后续我也会分享一些自己平时用到的好看的图表。
