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

初始化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}
{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: '辽宁' }
      ]
    }
  ]
};
 

你可能感兴趣的:(echarts,javascript,前端)