Echarts-数据可视化

Language 2022-02-27 18:52:32 views: null

Echarts-介绍

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

大白话：

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

Echarts-体验

官方教程：五分钟上手ECharts

自己步骤：

<div id="main" style="width: 600px;height:400px;"></div>
复制代码
  • 初始化echart实例
var myChart = echarts.init(document.getElementById('main'));
复制代码
  • 指定图表的配置项和数据 (根据文档提供示例找到option)
var 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);
复制代码

Echarts-基础配置

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

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

演示代码：

var 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']
};
复制代码

Echarts-饼图

步骤分析

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

第一步：echarts基本步骤

function pieChart() {
  let myChart = echarts.init(document.querySelector('.pie'));
	let option = {};
	myChart.setOption(option);
}
复制代码

第二步：参照官方示例

（官方示例：echarts.apache.org/examples/zh…

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

第三步：自定义配置

  • 增加标题，标题颜色 #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: '辽宁' }
      ]
    }
  ]
};
复制代码

image.png

Echarts-折线图

步骤分析

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

第一步：echarts基本步骤

function lineChart() {
  let myChart = echarts.init(document.querySelector('.line'));
  let option = {};
  myChart.setOption(option);
}
复制代码

第二步：参照官方示例

（官方示例：echarts.apache.org/examples/zh…

  • tooltip -- 输入移入的提示
  • title -- 标题
  • xAxis -- x轴
  • yAxis -- y轴
  • dataZoom -- 数据缩放组件
  • series -- 系列数据

以上配置项留下，其他删除

第三步：自定义配置

  • 将官方示例中除了option之外的其他代码删除，并自己添加X轴数据和series中的数据。

  • 系列数据

    • 增加一条线
    • 修改 name 为 '期望薪资' 和 '实际薪资'
    • 线的拐点为平滑拐点
    • 线条和X轴对齐位置，无特殊标记 symbol: 'none'

  • 分析数据缩放组件 dataZoom

  • 增加标题，标题颜色 #6d767e

  • 分析tooltip（官方示例已带）。

  • 增加图例，距离顶部20px。

  • 分析坐标轴留白策略 boundaryGap

完成后的配置项 option 如下：

let option = {
  // 图例
  legend: {
    top: 20,
  },
  // 鼠标移入的提示
  tooltip: {
    trigger: 'axis', // 轴触发
    position: function (pt) {
      // pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
      // 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
      return [pt[0], '10%']; 
    }
  },
  // 标题
  title: {
    text: '薪资 Salary',
    textStyle: {
      color: '#6d767e'
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false, // x轴两边的留白策略，false表示不留空白
    data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
  },
  yAxis: {
    type: 'value',
    // Y轴类型为value，则留白策略指的是对数据的延伸。
    // 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
    boundaryGap: [0, '50%'],
  },
  // 数据缩放组件
  dataZoom: [
    // {
    //   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
    //   start: 0,
    //   end: 10
    // },
    {
      type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
      start: 0, // 拖动滑块起始位置（这是一个百分比）
      end: 15 // 拖动滑块结束位置（这是一个百分比）
    }
  ],
  // 数据部分
  series: [
    {
      name: '期望薪资',
      type: 'line',
      smooth: true, // 表示使用平滑曲线
      symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
      itemStyle: { // 单独控制这条线的颜色
        color: '#ee6666'
      },
      data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
    },
    {
      name: '实际薪资',
      type: 'line',
      smooth: true,
      symbol: 'none',
      itemStyle: { // 单独控制这条线的颜色
        color: '#5470c6'
      },
      data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
    }
  ]
};
复制代码

image.png

Echarts-柱状图

步骤分析

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

第一步：echarts基本步骤

function barChart() {
  let myChart = echarts.init(document.querySelector('.barChart'));
  let option = {}
  myChart.setOption(option);
}
复制代码

第二步：参照官方示例

（官方示例：echarts.apache.org/examples/zh…

  • tooltip 提示组件
  • legend 图例
  • xAxis x轴
  • yAxis y轴
  • series 系列数据

以上几个配置项留下，其他删除。

第三步：自定义配置

  • 修改X轴及series中的数据

    ['1组', '2组', '3组', '4组', '5组', '6组', '7组']
[83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78]
[2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2]
[3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
[3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
复制代码

  • 多个Y轴

    • 第一个y轴（索引0）表示平均分，范围0~100，根据数字10，将Y轴分为10份
    • 第二个y轴（索引1）表示人数，范围0~10（根据班级情况而定），根据数字1，将y轴分为10份。

  • 系列数据

    • 增加至 4 组数据，并修改每组 name
    • 修改每个柱子的宽度为 15px
    • 让平均分使用第一个Y轴（yAxisIndex: 0），让人数使用第二个Y轴（yAxisIndex: 1）

  • 调整网格（图表的宽高）

    • 上下 30px，左右 7%

  • 分析tooltip（官方示例已带）

let option = {
  // 网格（整个图表区域设置）
  grid: {
    top: 30,
    bottom: 30,
    left: '7%',
    right: '7%'
  },
  // 鼠标移入的提示
  tooltip: {
    trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
    axisPointer: {   // 坐标轴指示器配置项
      // 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
      type: 'cross', 
      crossStyle: {
        color: '#999'
      }
    }
  },
  // 图例
  legend: {},
  // X轴
  xAxis: [
    {
      type: 'category',
      data: ['1组', '2组', '3组', '4组', '5组', '6组', '7组'],
      axisPointer: { // 坐标轴指示器为阴影，配合tooltip中的设置，组成十字准星
        type: 'shadow'
      }
    }
  ],
  // Y轴
  yAxis: [
    {
      type: 'value',
      min: 0, // y轴数据最小值
      max: 100, // y轴数据最大值
      interval: 10, // step步长，把y轴的数据分成多少份
      axisLabel: { // Y轴文字设置
        formatter: '{value}分', // Y轴文字
      }
    },
    {
      type: 'value',
      min: 0,
      max: 10,
      interval: 1,
      axisLabel: {
        formatter: '{value}人'
      }
    }
  ],
  // 数据部分（4组数据）
  series: [
    {
      name: '平均分',
      type: 'bar',
      data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78],
      barWidth: '15',
    },
    {
      name: '低于60分人数',
      type: 'bar',
      data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2],
      barWidth: '15',
      yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
    },
    {
      name: '60到80分之间',
      type: 'bar',
      yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
      barWidth: '15',
      data: [1, 4, 2, 4, 5, 2, 1, 3, 3, 2, 2, 4]
    }
    ,
    {
      name: '高于80分人数',
      type: 'bar',
      yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
      barWidth: '15',
      data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
    }
  ]
};
复制代码

image.png

Echarts社区

社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。

在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。

社区示例：www.makeapie.com/explore.htm…

Echarts-使用社区的示例

项目中使用的社区示例地址：www.makeapie.com/editor.html…

重点：

  • 使用社区示例，必须要查看示例引入了哪些外部js文件。

实现步骤：

  • 第一需要下载china.js提供中国地图的js文件
  • 导入后，直接使用社区提供的配置即可。
  • 自行修改
    • 将背景色改为 白色
    • 将 视觉映射组件（visualMap）中的 show 改为 false
    • 其他自行自愿修改。

必须知道的结论：

  • 哪些数据和哪些数据是对应的，必须一致
  • 哪些数据能多，能错
  • 哪些数据不能多，不能错

Guess you like

Origin juejin.im/post/7069320184208556062
Recommended
Rushing to the GitHub hot list——How can open source programming languages and frameworks be so cute?
Beijing Humanoid Robot Innovation Center launches Tiangong, the world's first full-size humanoid robot with purely electric drive for anthropomorphic running
Ranking
8个无需编写代码即可使用 Python 内置库的方法
Java collections interview knowledge Lite
Machine learning algorithms foundation - Introduction a (watermelon materials for the book)
(Easy) Ransom Note - LeetCode
[Five days] Qt from entry to actual combat: the second day
Remember once extremely pit father can not download Maven Jar package of issues: IDEA question
The minimum cost Shortest
OSPF study map (the most complete version)
Network Takeaways
GnuPG
Daily
More
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

Code World

© 2018 codetd.com