06-ECharts

最新推荐文章于 2024-05-31 22:21:30 发布

人俗� 话不多

最新推荐文章于 2024-05-31 22:21:30 发布

阅读量1.4k

点赞数

分类专栏： Echarts 文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/slf13754951386/article/details/123315758

版权

可视化项目

Apache ECharts

数据可视化

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。
数据可视化在我们互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑等
ECharts.js 百度出品的一个开源 Javascript 数据可视化库

使用技术

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

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

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

ECharts的基本使用

ECharts 使用五步曲

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

文档菜单—配置项手册学echarts关键在于学会查阅文档，根据需求修改配置

Echarts-体验

自己步骤：

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

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

初始化echarts实例对象

echarts.init () 是一个方法

echarts.init () = new Obj( )

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实例对象

setoption 设置

myChart.setOption(option);

Echarts-基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。

代码演示 :

var option = {
   
            color: ['pink', 'blue', 'green', 'skyblue', 'red'],
            title: {
   
                text: '我的折线图'
            },
            tooltip: {
   
                trigger: 'axis'
            },
            legend: {
   
                data: ['直播营销', '联盟广告', '视频广告', '直接访问']
            },
            grid: {
   
                left: '3%',
                right: '3%',
                bottom: '3%',
                // 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签
                // 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签
                containLabel: true
            },
            toolbox: {
   
                feature: {
   
                    saveAsImage: {
   }
                }
            },
            xAxis: {
   
                type: 'category',
                // 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
                boundaryGap: false,
                data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
   
                type: 'value'
            },
            series: [
                {
   
                    name: '直播营销',
                    // 图表类型是线形图
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
   
                    name: '联盟广告',
                    type: 'line',

                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
   
                    name: '视频广告',
                    type: 'line',

                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
   
                    name: '直接访问',
                    type: 'line',

                    data: [320, 332, 301, 334, 390, 330, 320]
                }
            ]
        };

grid

如果 left right 为0% , 刻度标签就溢出了 , 此时决定了是否显示刻度标签

  grid: {
   
    containLabel: true
  },

xAxis

默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

boundaryGap: false // 刻度显示

color

线条颜色 , 后面跟数组类型

 legend: {
   
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  }
  
   series: [
    {
   
      name: 'Email', // name 和 legend 里面的数据对应显示, 包括修改和删除 
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    }
    ]

stack : 数据堆叠

如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠
如果要直观的显示数据可以直接删除掉
后期要显示数据可以给stack 设置不同的值

01-数据可视化项目适配方案

REM适配

设计稿是1920px
PC端适配：宽度在 1024~1920之间页面元素宽高自适应
1. flexible.js 把屏幕分为 24 等份
2. cssrem 插件的基准值是 80px , 按最大设计稿尺寸划分 (1920)
  
  插件-配置按钮—配置扩展设置–Root Font Size 里面设置。
  
  但是别忘记重启vscode软件保证生效
3. 要把屏幕宽度约束在1024~1920之间有适配，实现代码：

// 实现rem适配
@media screen and (max-width: 1024px) {
   
     html {
   
         font-size: 42.66px !important;
     }
 }

 @media screen and (min-width: 1920px) {
   
     html {
   
         font-size: 80px !important;
     }
 }

02-项目搭建(初始化)

新建相关文件夹
引入相关文件

03-基础布局

效果图： 1920px * 1078px
body 设置背景图，行高1.15
viewport 主体容器，限制最小宽度1024px，与最大宽度1920px，最小高度780px。
- 需要居中显示
- 使用logo.png做为背景图，在容器内显示
- 内间距 88px 20px 0
column 列容器，分三列，占比 3：4：3
- 中间容器外间距 32px 20px 0

04-边框图片

边框图片切割原理：（重要）
把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。

组合写法：

border-image: url("images/border.jpg") 167/20px round;
// 路径 , 裁剪的尺寸 , 图片边框 , 图片边框平铺

拆分写法：

border-image-source: url("images/border.jpg"); 
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;

要设置边框图片需要设置边框大小

边框图片的宽度，默认边框的宽度。

border-image-width 需要加单位 ; border-image-slice 不需要加单位

border: 15px solid pink;

05-设置公共面板样式

inner 里的内容会显示边框下面 , 为了让inner 显示在panel 中间 , inner 盒子采用定位负的 left top bottom right 的值撑大盒子 , 给一个上下左右内边距隔开

面板 .panel

容器 .inner 内边距是上下24px 左右 36px

/* 公共面板样式  */
.panel {
   
    // 边框盒子
    position: relative;
    border: 15px solid transparent;
    border-width: .6375rem .475rem .25rem 1.65rem;
    border-image-source: url(../images/border.png);
    border-image-slice: 51 38 20 132;
    margin-bottom: .25rem;
}
.inner {
   
    // 负值撑开盒子
    position: absolute;
    top: -0.6375rem;
    left: -1.65rem;
    right: -0.475rem;
    bottom: -0.25rem;
    padding: .3rem .45rem;
   
}
.panel h3 {
   
  font-size: 0.25rem;
  color: #fff;
  font-weight: 400;
}

06-概览区域(overview)-布局

07-监控区域(monitor)-布局

监控区域 monitor 大盒子的高度是 480px

结构解释：

.tabs 标签选项加上active激活选项默认激活第一个选项
.content 切换内容加上style="display: block;"显示内容默认激活第一个内容

样式描述：

.inner 容器内间距 24px 0
.tabs 容器内间距 0 36px
- a 容器颜色： #1950c4 内间距：0 27px 字体：18px
- 第一个a容器去除左侧内间距加上右侧2px宽度边框#00f2f1
- 激活的时候颜色白色
.content容器
- 占满剩余高度 flex:1
- 默认隐藏
.head 容器
- 行高 1.05 背景 rgba(255, 255, 255, 0.1) 内间距 12px 36px 颜色 #68d8fe 字体大小 14px
row 容器
- 行高 1.05 内间距 12px 36px 颜色 #68d8ff 字体大小 12px
- .icon-dot 字体图标绝对定位左边0.2rem 透明度0
- 鼠标经过后：背景 rgba(255, 255, 255, 0.1) 透明度1
col容器
- 宽度：1rem 2.5rem 1rem
- 第二个col 一行不换行溢出省略

08-监控区域-效果

立即执行函数用法

JS文件中，会有大量的变量命名，特别是Echarts使用中，需要大量初始化Echarts对象？
为了防止变量名冲突(变量污染）我们采用立即执行函数策略：

(function(){
   })();

注意 : 多个立即执行函数中间必须加分号隔开

切换功能

绑定标签页点击事件
当前容器加active其他容器移除active
index对应的内容容器显示其他容器隐藏

动画功能：

实现思路：
- 先克隆列表，追加在后面
- marquee-view 占满剩余高度，溢出隐藏
  - 绝对定位，top 1.6rem bottom 0
  - 宽度100%，溢出隐藏
- 使用animation实现动画
- 使用 translateY 向上位移 50%
- 动画时间15s，匀速播放，循环执行。

无缝滚动原理

先克隆marquee里面所有的行（row）
通过CSS3动画滚动marquee
鼠标经过marquee 就停止动画：

animation-play-state: paused;

js代码：

  // 动画
  $(".marquee-view .marquee").each(function() {
   
    // console.log($(this));
    var rows = $(this).children().clone();
    $(this).append(rows);
  });

css代码：

/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
   
  animation: move 15s linear infinite;
}
@keyframes move {
   
  0% {
   
  }
  100% {
   
    transform: translateY(-50%);
  }
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
   
  animation-play-state: paused;
}

09-点位区域(point)-布局

复制 html 和 css
设置公共样式 h3

10-点位区域-饼图

1. HTML引入图表

// 点位分布统计模块
(function() {
   
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie"));
  // 2. 指定配置项和数据
  var option = {
   
    tooltip: {
   
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    series: [
      {
   
        name: "面积模式",
        type: "pie",
        radius: [30, 110],
        center: ["75%", "50%"],
        roseType: "area",
        data: [
          {
    value: 10, name: "rose1" },
          {
    value: 5, name: "rose2" },
          {
    value: 15, name: "rose3" },
          {
    value: 25, name: "rose4" },
          {
    value: 20, name: "rose5" },
          {
    value: 35, name: "rose6" },
          {
    value: 30, name: "rose7" },
          {
    value: 40, name: "rose8" }
        ]

最低0.47元/天解锁文章

人俗� 话不多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
06-ECharts

可视化项目Apache ECharts数据可视化数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。数据可视化在我们互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑等ECharts.js 百度出品的一个开源 Javascript 数据可视化库使用技术完成该项目需要具备以下知识：div + css 布局flex 布局css3动画css3渐变css3边框图片
复制链接

扫一扫