数据可视化ECharts

最新推荐文章于 2024-05-15 20:51:13 发布

豆浆-plus

最新推荐文章于 2024-05-15 20:51:13 发布

阅读量422

点赞数 3

文章标签：信息可视化 echarts 数据分析

本文链接：https://blog.csdn.net/m0_66052129/article/details/136025402

版权

1.什么是数据可视化

1.1 数据可视化

数据可视化主要目的:借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

1.2 数据可视化的场景

目前互联网公司通常有这么几大类的可视化需求:

1.3 常见的数据可视化库

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

2.ECharts简介

官网地址:https://echarts.apache.org/zh/index.html 多看文档

3.ECharts的基本使用

3.1 ECharts 使用五步曲

>步骤1:下载并引入echarts.js文件 ----->图表依赖这个is库
>步骤2:准备一个具备大小的DOM容器 ------>生成的图表会放入这个容器内
>步骤3:初始化echarts实例对象-------->实例化echarts对象
>步骤4:指定配置项和数据(option)-------->根据具体需求修改配置选项
>步骤5:将配置项设置给echarts实例对象---------->让echarts对象根据修改好的配置生效

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1 -->
  <script src="echarts.min.js"></script>
  <style>
    /* 2 */
    .box {
      height: 400px;
      width: 400px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script>
    //3
    var myecharts = echarts.init(document.querySelector('.box'));
    // 4指定图表的配置项和数据
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };

    // 5使用刚指定的配置项和数据显示图表。
    myecharts.setOption(option);
  </script>
</body>

</html>