数据可视化v2.0

本文介绍了Echarts的使用步骤,包括下载引入、DOM容器准备、实例化、配置项设置等,并展示了配置项如标题、提示框、图例的详细说明。此外,还探讨了项目中的适配方案,如宽高等比例适配和rem单位的使用,以及实战中的技巧,如边框图片、字体图标、立即执行函数、Tab切换、订单区域动态切换和销售统计图表的切换效果。最后,提到了ES6模板字符的运用和Echarts地图的使用。

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

温馨提示,图片未转存加载,建议看后面的PDF文件

数据可视化

使用场景:通用报表 ,移动端图表,大屏可视化,图编辑分析,地理可视化

常见的JS库D3,js(入手难)、echarts.js(WPS)、highcharts.js(OFFICE)

承上启下的作用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oTKcDiNn-1626595121658)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713095741495.png)]

一、使用五部曲

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

​ 浏览器下载

​ npm下载

​ 在线定制

2、装备一个具备大小的DOM容器——生成的图标会放到这个容器中

3、初始化实例对象——实例化echarts对象

4、指定配置项和数据

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

以下是一个上手示例

<!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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <title>Echarts体验</title>
  <style>
  .box{
    width: 500px;
    height: 500px;
    background-color: rgb(172, 153, 153);
  }
  </style>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <div class="box"></div>
  <script>
    var myChart = echarts.init(document.querySelector('.box'));//实例化echarts对象
    // 指定图表的配置项和数据
    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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKaZIsF9-1626595121660)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713103341532.png)]

二、配置项相关说明

title 标题

tooltip 提示框组件

legend 图例组件

toolbox 工具栏

grid 网格containlabel是刻度

xAxis x轴

yAxis y轴

color 调色盘

color:[ ' pink','blue',‘green ',' skyblue', 'red'],

serise 系列列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zja1OItr-1626595121661)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713141505635.png)]

type 类型

line线 bar柱 pie饼

name 系列名字

data 数据的一个数组(相关说明)

stack 数据堆叠

​ 第二个=第一个+第二个

​ 第三个=第一个+第二个 +第三个

未涉及属性找文档

三、项目阶段

1、目标项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gsvNcsvQ-1626595121662)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713143118487.png)]

2、项目适配方案

宽高等比例适配1024-1920px---------flexble.js (插件)+rem单位(配合cssrem插件)+flex布局

●设计稿是1920px
●PC端适配:宽度在1024-1920之间页面元素宽高自适应

  1. flexible.js 把屏幕分为24等份

  2. cssrem插件的基准值是80px
    插件-配置按钮–配置扩展设置–Root Font Size里面设置。
    但是别忘记重启vscode软件保证生效

  3. 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;
}
}

3、实战中的知识点

3.1边框图片border-image

盒子大小不一,但是边框样式相同,此时就需要边框图片来完成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-klSWpESY-1626595121662)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713194739596.png)]

border-image-source 边框图片的路径

border-image-slice 边框图片向内偏移(裁剪的尺寸)上右下左(一定不要加单位)

border-image-width 边框图片的宽度(要加单位)并不等于边框的宽度,不会挤压框内文字

border-image-repeat 边框图片是否平铺repeat、铺满round、拉伸stretch(默认)

3.2通过类名调用字体图标

1、引入css文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Wa4QE7h-1626595121663)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713215556564.png)]

2、标签直接调用图标对应的类名

3.3立即执行函数用法

为了防止变量污染,采用立即执行函数策略

(function(){})();

多个立即执行函数之间必须加上逗号分隔

3.4 Tab栏切换

功能实现步骤:

  • 绑定 标签页点击 事件
  • 当前容器加active其他容器移除active
  • index对应的内容容器显示其他容器隐藏
  // 切换
 $(".monitor .tabs").on("click", "a", function() {
    $(this).addClass("active").siblings("a").removeClass("active");
    // console.log($(this).index());
    //   选取对应索引号的content
    $(".monitor .content").eq($(this).index()).show().siblings(".content").hide();
  });

动画功能:

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

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

3.5订单区域(order)-效果

实现步骤:

  • 提前准备数据
  • 点击后切tab激活样式
  • 点击后切换数据内容
  • 开启定时器动态切换数据
// 订单功能
(function(){
  // 1. 准备数据
  var data = {
    day365: { orders: '20,301,987', amount: '99834' },
    day90: { orders: '301,987', amount: '9834' },
    day30: { orders: '1,987', amount: '3834' },
    day1: { orders: '987', amount: '834' }
  }
  // 获取显示 订单数量 容器
  var $h4Orders = $('.order h4:eq(0)')
  // 获取显示 金额数量 容器
  var $h4Amount = $('.order h4:eq(1)')
  $('.order').on('click','.filter a',function(){
    // 2. 点击切换激活样式
    $(this).addClass('active').siblings().removeClass('active')
    // 3. 点击切换数据
    var currdata = data[this.dataset.type]
    $h4Orders.html(currdata.orders)
    $h4Amount.html(currdata.amount)
  })
  // 4. 开启定时器切换数据
  var index = 0
  var $allTab = $('.order .filter a')
  setInterval(function(){
    index ++ 
    if (index >= 4) index = 0
    $allTab.eq(index).click()
  },5000)
})();

注意啊:::为了获取自定义属性的值,必须要用xx.dataset.type//不可用xx.dataset.set你已经被坑过了

为了再次强调上述过程,接下来更加详细……

3.6销售统计( sales )-切换效果

实现步骤:

    1. 准备切换需要依赖的数据 4组
    1. 绑定点击事件
    • 切换激活 tab 的样式
    • 切换图表依赖的数据(重新渲染图表)
    1. 开启定时器,进行切换, 鼠标经过sales停止定时器,离开开启定时器

第一步:准备数据,使用数据

  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
    ]
  }
    series: [{
      name:'预期销售额',
      data: data.year[0],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#00f2f1'
      }
    },{
      name:'实际销售额',
      data: data.year[1],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#ed3f35'
      }
    }]

第二步:点击后切换

  // 切换  $('.sales').on('click', '.caption a', function(){    // 样式    $(this).addClass('active').siblings().removeClass('active')    // currData 当前对应的数据      // this.dataset.type 标签上的data-type属性值,对应data中的属性                      var currData = data[this.dataset.type]    // 修改图表1的数据    option.series[0].data = currData[0]    // 修改图表2的数据                      option.series[1].data = currData[1]    // 重新设置数据  让图标重新渲染                      myChart.setOption(option)  })

第三步:tab栏自动切换效果

  • 开启定时器每隔3s,自动让a触发点击事件即可
  • 鼠标经过sales,关闭定时器,离开开启定时器
var as = $(".sales .caption a");  var index = 0;  var timer = setInterval(function() {    index++;    if (index >= 4) index = 0;    as.eq(index).click();  }, 1000);  // 鼠标经过sales,关闭定时器,离开开启定时器  $(".sales").hover(    function() {      clearInterval(timer);    },    function() {      clearInterval(timer);      timer = setInterval(function() {        index++;        if (index >= 4) index = 0;        as.eq(index).click();      }, 1000);    }  );

自动缩放

 // 当我们浏览器缩放的时候,图表也等比例缩放  window.addEventListener("resize", function() {    // 让我们的图表调用 resize这个方法    myChart.resize();  });

3.7 ES6中的模板字符

//   ES6 模板字符写法console.log(`我的名字是${star.name}我的年龄是${star.age}`);console.log(`<span>${star.name}</span><span>${star.age}</span>`);

根据数据渲染各省热销 sup 模块内容

  • 删掉原先自带小li
  • 遍历数据 $.each()
  • 拼接字符串把数据渲染到 li 的span 里面
  • 追加给 .sup 盒子
 var supHTML = "";  $.each(hotData, function(index, item) {    // console.log(item);    supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=    ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;  });  $(".sup").html(supHTML);

3.8Echarts-map使用(中国地图等)

参考社区的例子

实现步骤:

  • 第一需要下载china.js提供中国地图的js文件
  • 第二个因为这种地图样式的代码比较多,我们新建一个新的js文件 myMap.js 引入
  • 使用并修改社区提供的配置即可。

3.9 一些总结图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wo2x62Hl-1626595121664)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210714214600035.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvIo7RNI-1626595121665)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210715115430115.png)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

痞子三分冷ゾジ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值