echarts|CMS项目数据可视化-echarts的使用前端|javascript

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

初始化echart实例
let myChart = echarts.init(document.getElementById('main'));
【echarts|CMS项目数据可视化-echarts的使用】
指定图表的配置项和数据 (根据文档提供示例找到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步骤分析

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

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}
{b} {c}人占比{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: '辽宁' }
]
}
]
};