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: '辽宁' }
      ]
    }
  ]
};