数据可视化

数据可视化

　　主要目的：借助于图形化的手段，清晰有效的传达与沟通信息。

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

　　应用场景：通用报表、移动端图表、大屏可视化、图编辑&图分析、地理可视化。

ECharts 基本使用

　　1、下载并引入 echarts.js 文件。

　　2、准备一个具备大小的 DOM 容器。

　　3、初始化 echarts 实例对象。

　　4、指定配置项和数据( option )。

　　5、将配置项设置给 echarts 实例对象。

复制代码
<!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>
  <style>
    div {
      width: 400px;
      height: 400px;
    }
  </style>
</head>

<body>
  <!-- 准备容器 -->
  <div></div>
</body>
<!-- 引入下载的echarts -->
<script src="./js/echarts.min.js"></script>
<script>
  // 初始化echarts实例对象
  let chart = echarts.init(document.querySelector('div'))
  // 指定配置项和数据
  let option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };
  // 将配置项设置给echarts实例对象
  chart.setOption(option)
</script>

</html>
复制代码

ECharts 相关配置

　　1、title：标题组件。

　　2、tooltip：提示框组件。

　　3、legend：图例组件。

　　4、toolbox：工具栏。

　　5、grid：直角坐标系内绘图网格。

　　6、xAxis：直角坐标系 grid 中的 x 轴。

　　7、yAxis：直角坐标系 grid 中的 y 轴。

　　8、series：系列列表。每个系列通过 type 决定自己的图标类型。

　　9、调色盘颜色列表。

posted @   守鹤  阅读(226)  评论(0)  编辑  收藏  举报
相关博文：
· vuex-基本使用
· js第一天
· JS 数据可视化
· echarts( 数据可视化) 属于h5新增内容
· Echart可视化学习（五）
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示