可视化数据——Echarts

windy青烟书双
110 阅读5分钟

数据可视化

一、 什么是数据可视化

1、 概念

数据可视化主要的目的：借助图形化手段，清晰有效地传递与沟通信息

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理

2、 常见的数据可视化库

  • D3：目前 Web 评价最高的 JS 可视化工具库（入手难）
  • ECharts：百度出品的一个开源 JS 数据可视化库
  • Highcharts：国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
  • AntV：蚂蚁金服全新一代数据可视化解决方案

3、 小结

数据可视化主要目的：借助图形化手段，清晰有效地传达与沟通信息

数据可视化在互联网公司中经常用于通用数据报表、移动端图表、大屏可视化、图编辑等

数据可视化库有很多，这里主要学习 ECharts

二、 ECharts

  • 1、 ECharts 简介 ECharts 是一个使用 JS 实现的开源可可视化库，可以流畅的运行在 PC 端和移动端上面，兼容当前绝大多数浏览器，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表

  • 优点：

丰富的可视化类型
多种数据格式支持
流数据的支持
移动端优化
跨平台使用
绚丽的特效
详细的文档说明\

ECharts 能满足绝大多数可视化图标实现，使用方便，功能强大，是实现数据可视化的最优选择之一

  • 2、 ECharts 基本使用
  • 2.1 使用五部曲

1、下载并引入 echarts.js 文件 --> 图表依赖库

下载文件地址：cdn.staticfile.org/echarts/4.7…

<script src="./dist/js/echarts.js"></script>

2、准备一个具备大小的 DOM 容器 – > 生成的图片会放入这个容器内

<div id="main" style="width: 600px; height: 400px;background-color: pink;"></div>

3、初始化 echarts 实例对象 --> 实例化 echarts 对象

// 初始化 echarts 实例化对象
var myChart = echarts.init(document.querySelector("#main"));

4、指定配置项和数据 --> 根据具体需求修改配置选项

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

5、将配置项设置给 echarts 实例对象 --> 让 echarts 对象根据修好的配置生效

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

2.2 选择不同类型的图表

步骤：

官网 -> 实例 -> 官方实例

只需要把配置数据修改过来就行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入文件 -->
    <script src="./dist/js/echarts.js"></script>
</head>

<body>
    <!-- 准备盒子 -->
    <div id="main" style="width: 600px; height: 400px;background-color: pink;"></div>
    <script>
        // 实例化对象
        var mychart = echarts.init(document.querySelector("#main"));
        // 配置数据
        var option = {
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        { value: 40, name: 'rose 1' },
                        { value: 38, name: 'rose 2' },
                        { value: 32, name: 'rose 3' },
                        { value: 30, name: 'rose 4' },
                        { value: 28, name: 'rose 5' },
                        { value: 26, name: 'rose 6' },
                        { value: 22, name: 'rose 7' },
                        { value: 18, name: 'rose 8' }
                    ]
                }
            ]
        };
        mychart.setOption(option);
    </script>
</body>
</html>

如果需要制作类似的图表，只需要修改相关配置数据

2.3 相关配置

title: 标题组件
tooltip: 提示框组件
legend: 图例组件
toolbox: 工具栏
grid: 直角坐标系内绘制网格
xAxis: 直角坐标系 grid 中的 X 轴
yAxis: 直角坐标系 grid 中的 y 轴
series: 系列列表，每个系列通过 type 决定自己的图表类型
color: 调色盘颜色列表

2.4 系列列表 series：系列列表

参数：

type：图表类型

name：系列名称，用于 tooltip显示，lengend 的图例筛选变化

stack：数据堆叠，如果设置相同值，则会数据堆叠

数据堆叠：第二个数据值 = 第一个数据值 + 第二个数据值

​ 第三个数据值 = 第二个数据值 + 第三个数据值

​ 依次叠加

如果给 stack 指定不同值或者去掉这个属性则不会发生数据堆叠

data：添加的数据

三、 样式处理

  • 1、 边框图片
  • 1.1 使用场景 盒子大小不一，但是边框样式相同，此时就需要边框图片来完成

为了实现丰富多彩的边框效果，在 C3 中，新增了 border-image 属性，这个新增属性允许指定一副图像作为元素的边框

  • 1.2 边框图片切图 把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕

按照顺时针顺序切图

  • 1.3 边框图片语法
属性	描述
border-image-source	用在边框的图片路径
border-image-slice	图片内边框向内偏移（剪裁的尺寸，不要加单位）
border-image-width	图片边框的宽度（需要加单位）（不是边框宽度而是边框图片宽度）
border-image-repeat	图片边框是否应铺平（repeat）、铺满（round）、拉伸（stretch）默认拉伸

案例：

  • 折线图：一周未来的气温变化
option = {
  title: {
    text: 'Temperature Change in the Coming Week'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      markPoint: {
        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [            {              symbol: 'none',              x: '90%',              yAxis: 'max'            },            {              symbol: 'circle',              label: {                position: 'start',                formatter: 'Max'              },              type: 'max',              name: '最高点'            }          ]
        ]
      }
    }
  ]
};

image.png

  • 柱状图
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

image.png

  • 饼状图
option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

image.png 最常用的南丁格尔图

option = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
};

image.png

总结

前端小白掌握基本的这三种类型的图片就可以了，会使用echarts在官网上查询基本的用法，拷贝模板即可，会可视化数据也是面试前端工作的一个加分项。

avatar
文章
阅读
粉丝