[JavaScript知识库]CMS项目数据可视化-echarts的使用

1-Echarts-介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

大白话：

• 是一个JS插件
• 性能好可流畅运行PC与移动设备
• 兼容主流浏览器
• 提供很多常用图表，且可定制。

2-Echarts-体验

官方教程：五分钟上手ECharts

自己步骤：

• 下载echarts?https://echarts.apache.org/zh/download.html
• 引入echarts?dist/echarts.min.js
• 准备一个具备大小（宽高）的 DOM
• <div id="main" style="width: 600px;height:400px;"></div>

初始化echart实例

let myChart = echarts.init(document.getElementById('main'));

指定图表的配置项和数据 (根据文档提供示例找到option)

let option = {
? ? xAxis: {
? ? ? ? type: 'category',
? ? ? ? data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
? ? },
? ? yAxis: {
? ? ? ? type: 'value'
? ? },
? ? series: [{
? ? ? ? data: [820, 932, 901, 934, 1290, 1330, 1320],
? ? ? ? type: 'line'
? ? }]
};
使用刚指定的配置项和数据显示图表

myChart.setOption(option);

3-Echarts-基础配置(桌面背景图)

需要了解的主要配置：series?xAxis?yAxis?grid?tooltip?title?legend?color

• series
• • 系列列表。每个系列通过 type 决定自己的图表类型
  • 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
• xAxis：直角坐标系 grid 中的 x 轴
• yAxis：直角坐标系 grid 中的 y 轴
• grid：直角坐标系内绘图网格
• title：标题组件
• tooltip：提示框组件
• legend：图例组件
• color：调色盘颜色列表

演示代码：

let option = {
? ? xAxis: {
? ? ? ? type: 'category',
? ? ? ? data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
? ? },
? ? yAxis: {
? ? ? ? type: 'value'
? ? },
? ? series: [{
? ? ? ? data: [820, 932, 901, 934, 1290, 1330, 1320],
? ? ? ? type: 'line',
? ? ? ? name:'线形图'
? ? },
? ? {
? ? ? ? data: [22, 333, 111, 222, 444, 666, 777],
? ? ? ? type: 'bar',
? ? ? ? name:'饼状图'
? ? }],
? ? grid: {
? ? ? ? show: true
? ? },
? ? title: {
? ? ? ? text: '标题'
? ? },
? ? tooltip: {
? ? ? ? padding: 20
? ? },
? ? legend: {
? ? ? ? data: ['线形图']
? ? },
? ? color: ['red','green']
};
4-Echarts-饼图案例

4.1步骤分析

1. 封装好函数，为后续传入真实数据做准备
2. 初始化echarts
3. 设置配置项，空的 option 即可
4. 创建图表
5. 查找官方示例
6. 按需求，自定义配置图表

4.2第一步：echarts基本步骤千篇一律

function pieChart() {
? ? let myChart = echarts.init(document.querySelector('.pie'));
? ? let option = {};
? ? myChart.setOption(option);
}

4.3第二步：参照官方示例

（官方示例：https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple）

• 只留下series系列数据配置，其他全部删除。

4.4第三步：自定义配置

• 增加标题，标题颜色 #6d767e
• 增加鼠标移入提示。（比如：“各地学员分布 北京市 12人 占比6.8%”）
• 系列数据
• • 修改 name 为 '各地学员分布'
  • 饼图，内圈半径 10%，外圈半径 60%
  • 居中显示
  • 面积模式
  • 扇形轮廓圆角（4px）

完成后的配置项如下：

let option = {
? tooltip: {
? ? // {a} 表示series中的name
? ? // {b} 表示数据中的series.data中的name
? ? // {c} 表示每一项的值
? ? // {d} 表示百分比
? ? formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
? },
? title: {
? ? text: '籍贯 Hometown',
? ? textStyle: {
? ? ? color: '#6d767e' // 标题演示
? ? },
? },
? series: [
? ? {
? ? ? name: '各地学员分布',
? ? ? type: 'pie', // pie 表示饼图
? ? ? radius: ['10%', '65%'], // 内外圈的半径
? ? ? center: ['50%', '50%'], // 中心点
? ? ? roseType: 'area', // area表示面积模式，radius表示半径模式
? ? ? itemStyle: { // 每一项的设置
? ? ? ? borderRadius: 4, // 扇形边缘圆角设置
? ? ? },
? ? ? data: [
? ? ? ? { value: 40, name: '北京' },
? ? ? ? { value: 38, name: '山东' },
? ? ? ? { value: 32, name: '上海' },
? ? ? ? { value: 30, name: '江苏' },
? ? ? ? { value: 28, name: '河北' },
? ? ? ? { value: 26, name: '山西' },
? ? ? ? { value: 22, name: '河南' },
? ? ? ? { value: 18, name: '辽宁' }
? ? ? ]
? ? }
? ]
};
?