《数据可视化项目 Echarts》

最新推荐文章于 2024-04-28 12:07:40 发布

upkai小蟹

最新推荐文章于 2024-04-28 12:07:40 发布

阅读量713

点赞数

文章标签： echarts 前端

本文链接：https://blog.csdn.net/m0_57443155/article/details/121098707

版权

什么是数据可视化

1、数据可视化

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

2、数据可视化的使用场景

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

3、常见的数据可视化库

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

Highcharts 和 ECharts 就像是Office 与 WPS 的关系

数据可视化项目概述

1、项目目的

市场需求：可视化图表来展示体现数据，让数据更加直观，数据特点更加突出
学习阶段需求：起承上启下的作用
承上：复习HTML、CSS、Javascript、jQuery
起下：为学习服务器编程做铺垫，如何把服务器里面的数据渲染到页面中

2、项目的技术

HTML5+CSS3 布局
CSS3 动画、渐变
jQuery 库 + 原生 JavaScript
flex 布局和 rem 适配方案
图片边框 border-image
ES6 模板字符
ECharts 可视化库等等

ECharts 简介

Echarts 就是一个 JS 文件而已，底层依赖矢量图形库 ZRender,提供直观，交互丰富，可高度个性化定制的数据可视化图表

ECharts 的基本使用

1、Echarts 使用五部曲

下载并引入echarts.js 文件，图标依赖这个js库
准备一个具备大小的DOM容器，生成的图标会放在这个容器内
初始化echarts实例对象，实例化echarts对象
指定配置项和数据（option），根据具体需求修改配置选项
将配置项设置给echarts实例对象，让echarts对象根据修改好的配置生效

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

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

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

2、相关配置讲解

title：标题组件
tooltip：提示框组件
legend：图例组件
toolbox：工具栏

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

grid区域就是上图 x 和 y 轴之间的范围，图表的整个大框是容器的范围

grid:{
    left:'3%',//离左边盒子边缘的距离
    top:'4%',
    bottom:'3%',
    containLable:true
//containLable 是控制当刻度标签溢出的时候，grid区域是否包含坐标轴的刻度标签，如果为 true ，则显示,false 则不显示，当left,right等为 0% 的时候刻度标签就会溢出

}

xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
series：系列列表。每个系列通过 type 决定自己的图表类型（什么类型的图表）

color：调色盘颜色列表

option = {

    color:['pink','blue','green','skyblue','red'];//color的用法，以列表的形式设置颜色
}

相关使用方法再我们的官网的文档下的配置项手册可以查看：Documentation - Apache ECharts

数据可视化项目适配方案

1、适配方案

upkai小蟹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
《数据可视化项目 Echarts》

什么是数据可视化1、数据可视化数据可视化的主要目的：借助于图形手段，清洗有效的传达与沟通信息数据可视化可以把数据从冰冷的数字转化成图形，揭示蕴含在数据中的规律与道理2、数据可视化的使用场景目前互联网公司通常有这么几大类的可视化需求3、常见的数据可视化库D3.js 目前Web端最高评价最高的Javascript可视化工具库（入手难） ECharts.js 百度的一个开源Javascript数据可视化库 Highcharts.js 国外的前端数据可视化库，非商用免费...
复制链接

扫一扫