数据可视化项目

最新推荐文章于 2025-03-09 07:30:29 发布

小新没蜡笔m

最新推荐文章于 2025-03-09 07:30:29 发布

阅读量517

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_66506641/article/details/126810886

版权

本文介绍了数据可视化的基本概念，强调了其在传达信息中的作用，并列举了常见的数据可视化库，如D3.js、ECharts等。重点讲述了ECharts，这是一个高性能的JavaScript库，适合PC和移动设备。通过实例展示了ECharts的使用步骤，包括如何初始化实例、配置图表选项等。文章还提及ECharts的基础配置，如series、xAxis、yAxis等，适合初学者掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是数据可视化

1.1 数据可视化

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

1.2 数据可视化的场景

1.3 常见的数据可视化库

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

1.4 小结

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息
数据可视化在我们互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑等
数据可视化库有很多，接下来我们重点学习ECharts

2.数据可视化项目概述

完成该项目需要具备以下知识：

- div + css 布局
- flex 布局
- css3动画
- css3渐变
- css3边框图片
- 原生js + jquery 使用
- rem适配
- **echarts基础**

粗略代码统计：

- css 580行
- html 450行
- js 400行 (有效)

3.ECharts简介

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

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

4.ECharts的基本使用

自己步骤：

- 下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
- 引入echarts `dist/echarts.min.js`
- 准备一个具备大小的DOM容器

html
<div id="main" style="width: 600px;height:400px;"></div>
初始化echarts实例对象

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'
    }]
};

将配置项设置给echarts实例对象

myChart.setOption(option);


<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="echarts.min.js"></script>

    <style>
           .box {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
       

     //    3.初始化echarts 实例对象    
      var myChart =  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. 将配置项和数据(option) 设置给 实例对象(myChart)
         myChart.setOption(option);
    </script>
</body>
</html>