ECharts数据可视化项目

https://www.bilibili.com/video/BV1v7411R7mp/?spm_id_from=333.788.recommend_more_video.2

ECharts数据可视化项目-大屏数据可视化展示-echarts 图表制作-pink老师直播课更新完毕)

P1 01-直播课内容介绍

Echarts 一擦s

课程技术栈
-基于flexible.js + rem智能大屏适配
-VScode cssrem插件

Flex布局

Less 使用

基于ECharts数据可视化展示

ECharts柱状图数据设置

ECharts 地图引入

P2 02-数据可视化介绍

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

P3 03-可视化适配方案

vscode less to css plugins

flexible.js 根据屏幕大小 改变font-size大小

cssrem插件 vscode 重启设置配置

vscode .box == div.box

rem换算

设计稿是1920px
1.flexible.js 把屏幕分为24等份
2.cssrem插件的基准值是 80px插件-配置按钮一配置扩展设置-Root Font Size里面设置。
但是别忘记重启vscode软件保证生效

P4 04-可视化项目头部制作

<script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
          clearTimeout(t); //清除定时器
          dt = new Date();
          var y = dt.getFullYear();
          var mt = dt.getMonth() + 1;
          var day = dt.getDate();
          var h = dt.getHours(); //获取时
          var m = dt.getMinutes(); //获取分
          var s = dt.getSeconds(); //获取秒
          document.querySelector(".showTime").innerHTML =
            "当前时间:" +
            y +
            "年" +
            mt +
            "月" +
            day +
            "-" +
            h +
            "时" +
            m +
            "分" +
            s +
            "秒";
          t = setTimeout(time, 1000); //设定定时器,循环运行
        }
      </script>

P5 05-mainbox布局分析

P6 06-panel盒子公共面板

before after 设置边框

P7 07-panle盒子完成

P8 08-数字模块no布局制作

P9 09-no-hd模块详细布局

漂亮数字 用字体

P10 10-no-bd模块详细布局

P11 11-map1球体模块制作

xy
background-size:100% 100%; //保存背景图也可以随窗口缩放

P12 12-map2模块旋转球体制作

@keyframes rotate1{
    form{
        transform:translate(-50%,-50%) rotate(0deg)
    }
    to{
        transform:translate(-50%,-50%) rotate(360deg)
    }
}
.map2{
    animation:rotate1 15s linear infinite;
}
rotate(-360deg)逆时针

P13 13-map3模块旋箭头制作

P14 14-ECharts简介

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

官网地址:https://www.echartsjs.com/zh/index.html

P15 15-ECharts体验使用五部曲

步骤1:下载并引入echarts.js文件
步骤2:准备一个具备大小的DOM容器
步骤3:初始化echarts实例对象
步骤4:指定配置项和数据(option)
步骤5:将配置项设置给echarts实例对象

容器一定要有宽高度

https://echarts.apache.org/handbook/zh/get-started/

<!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" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script src="js/echarts.min.js"></script>
    <script>
      // 基于准备好的dom,初始化echarts实例
      let myCharts = echarts.init(document.querySelector('.box'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myCharts.setOption(option)
    </script>
  </body>
</html>

P16 16-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值后 后一个系列的值会在前一个系列的值上相加。

P17 17-ECharts基础配置(中)

P18 18-ECharts基础配置(下)

P19 19-柱状图bar引入到HTML页面中

立即执行函数妙用
为了防止变量污染,减少命名冲突,我们可以采取立即执行函数的写法。因为里面的变量都是局部变量。

echarts.init(document.querySelector('.box .children'))

P20 20-定制柱状图bar(上)

P21 21-定制柱状图bar(中)

P22 22-定制柱状图bar(下)

P23 23-EChart图表跟随屏幕缩放适配

让图表跟随屏幕自适应

window.addEventListener('resize',()=>{
    myChart.resize()
})

P24 24-学习进度柱形图2引入到html页面中

P25-P31 25-学习进度柱形图2定制1-7

P32 32-折线图1引入到html页面中

P33 33-折线图1定制grid网格

P34 34-折线图1定制x轴和y轴相关配置

P35 35-折线图1定制两条线的样式

P36 36-折线图1数据更换

P37 37-折线图1tab栏切换原理分析

P38 38-折线图tab栏切换更换数据

$('a').index()

P39 39-折线图2引入到html页面中

P40 40-折线图2定制(上)

P41 41-折线图2定制填充渐变区域

P42 42-折线图2拐点配置定制

P43 43-折线图2数据更换

P44 44-饼形图1引入到html页面中

P45 45-饼形图1图例组件定制

P46 46-饼形图1修改饼形图大小

P47 47-饼形图1更换颜色和相关数据

P48 48-饼形图2引入到html页面中

P49 49-饼形图2南丁格尔玫瑰图-配置定制(上)

P50 50-饼形图2南丁格尔玫瑰图配置定制(下)

P51 51-中国地图模拟飞行模块引入到html页面中

Echarts社区找

参考社区的例子:https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)

china.js中国地图文件

P52 52-中国地图模拟飞行模块定制

P53 53-项目完善期待下次再次相遇

posted @   KooTeam  阅读(47)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示