echart-数据可视化

可视化面板介绍

​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。

01-使用技术

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

  • div + css 布局
  • flex 布局
  • Less
  • 原生js + jquery 使用
  • rem适配
  • echarts基础

02- 案例适配方案

  • 设计稿是1920px

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

    2. cssrem 插件的基准值是 80px

      插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。

      但是别忘记重启vscode软件保证生效

03-基础设置

  • body 设置背景图 ,缩放为 100% , 行高1.15
  • css初始化

04-header 布局

  • 高度为100px
  • 背景图,在容器内显示
  • 缩放比例为 100%
  • h1 标题部分 白色 38像素 居中显示 行高为 80像素
  • 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为:rgba(255, 255, 255, 0.7) 而文字大小为 20像素
// 格式: 当前时间:2020年3月17-0时54分14秒
<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>
  • header部分css样式
header {
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
  h1 {
    font-size: 0.475rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
  }
  .showTime {
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
  }
}

05-mainbox 主体模块

  • 需要一个上左右的10px 的内边距

  • column 列容器,分三列,占比 3:5:3

css样式:

.mainbox {
  padding: 0.125rem 0.125rem 0;
  display: flex;
  .column {
    flex: 3;
  }
  &:nth-child(2) {
    flex: 5;
  }
}

06-公共面板模块 panel

  • 高度为 310px
  • 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框
  • 有line.jpg 背景图片
  • padding为 上为 0 左右 15px 下为 40px
  • 下外边距是 15px
  • 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
  • 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px
.panel {
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line\(1\).png);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }
}

07-柱形图 bar 模块(布局)

  • 标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px

  • 图标内容模块 chart 高度 240px

  • 以上可以作为panel公共样式部分

  h2 {
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
  }
  .chart {
    height: 3rem;
    background-color: pink;
  }

09-Echarts-介绍

常见的数据可视化库:

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

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

大白话:

10-Echarts-体验

官方教程:[五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)

  • 下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0

使用步骤:

  1. 引入echarts dist/echarts.min.js
  2. 准备一个具备大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
  1. 初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
  1. 指定配置项和数据(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'
    }]
};
  1. 将配置项设置给echarts实例对象
myChart.setOption(option);

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

12- 柱状图图表

  • 官网找到类似实例, 适当分析,并且引入到HTML页面中
  • 根据需求定制图表
  1. 引入到html页面中
// 柱状图1模块
(function() {
  // 实例化对象
  let myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  let option = {
    color: ["#3398DB"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器,坐标轴触发有效
        type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };

  // 把配置给实例对象
  myChart.setOption(option);
})();
  1. 根据需求定制

    • 修改图表柱形颜色 #2f89cf

    • 修改图表大小 top 为 10px bottom 为 4% grid决定我们的柱状图的大小

    color: ["#2f89cf"],
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    
    • X轴相关设置 xAxis
      • 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
      • X轴线的样式 不显示
    // 设置x轴标签文字样式
    

// x轴的文字颜色和大小
axisLabel: {
color: “rgba(255,255,255,.6)”,
fontSize: “12”
},
// x轴样式不显示
axisLine: {
show: false
// 如果想要设置单独的线条样式
// lineStyle: {
// color: “rgba(255,255,255,.1)”,
// width: 1,
// type: “solid”
}
}


- Y 轴相关定制
  - 文本颜色设置为   rgba(255,255,255,.6)   字体大小为 12px
  - Y 轴线条样式 更改为  1像素的  rgba(255,255,255,.1) 边框
  - 分隔线的颜色修饰为  1像素的  rgba(255,255,255,.1)   

~~~JavaScript
// y 轴文字标签样式
axisLabel: {
   textStyle: {
      color: "rgba(255,255,255,.6)",
       fontSize: "12"
   }
},
 // y轴线条样式
 axisLine: {
      lineStyle: {
         color: "rgba(255,255,255,.1)",
         // width: 1,
         // type: "solid"
      }
5232},
 // y 轴分隔线样式
splitLine: {
    lineStyle: {
       color: "rgba(255,255,255,.1)"
     }
}
  • 修改柱形为圆角以及柱子宽度 series 里面设置
series: [
      {
        name: "直接访问",
        type: "bar",
        // 修改柱子宽度
        barWidth: "35%",
        data: [10, 52, 200, 334, 390, 330, 220],
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      }
    ]
  };
  • 更换对应数据
// x轴中更换data数据
 data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
// series 更换数据
 data: [200, 300, 300, 900, 1500, 1200, 600]
  • 让图表跟随屏幕自适应
  window.addEventListener("resize", function() {
    myChart.resize();
  });

中间布局

 <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>125811</li>
                        <li>104563</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>前端需求人数</li>
                        <li>市场供应人数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="chart"></div>
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
            </div>

中间样式

/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
  .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      top: 0;
      left: 0;
    }
    &::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      right: 0;
      bottom: 0;
    }
    ul {
      display: flex;
      li {
        position: relative;
        flex: 1;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.875rem;
        color: #ffeb7b;
        padding: 0.05rem 0;
        font-family: electronicFont;
        font-weight: bold;
        &:first-child::after {
          content: "";
          position: absolute;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
          right: 0;
          top: 25%;
        }
      }
    }
  }
  .no-bd ul {
    display: flex;
    li {
      flex: 1;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      font-size: 0.225rem;
      color: rgba(255, 255, 255, 0.7);
      padding-top: 0.125rem;
    }
  }
}
.map {
  position: relative;
  height: 10.125rem;
  .chart {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 10.125rem;
    width: 100%;
  }
  .map1,
  .map2,
  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.475rem;
    height: 6.475rem;
    background: url(../images/map.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2 {
    width: 8.0375rem;
    height: 8.0375rem;
    background-image: url(../images/lbx.png);
    opacity: 0.6;
    animation: rotate 15s linear infinite;
    z-index: 2;
  }
  .map3 {
    width: 7.075rem;
    height: 7.075rem;
    background-image: url(../images/jt.png);
    animation: rotate1 10s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}

13-Echarts-社区介绍

社区就是一些,活跃的echart使用者,交流和贡献定制好的图表的地方。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4EhSQXCY-1654325734155)(docs/media/1576664444951.png)]

  • 在这里可以找到一些基于echart的高度定制好的图表,相当于基于jquery开发的插件,这里是基于echarts开发的第三方的图表。

14-Echarts-map使用(扩展)

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

实现步骤:

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

需要修改:

  • 去掉图例组件和标题组件
  • 去掉背景颜色
  • 修改地图省份背景 #142957
  • 地图放大通过 zoom 设置为1.2即可
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#142957',
          borderColor: '#0692a4'
        },
        emphasis: {
          areaColor: '#0b1c2d'
        }
      }
    },

总结:这例子是扩展案例,大家以后可以多看看社区里面的案例。

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920) {
  html {
    font-size: 80px !important;
  }
}

echarts案例

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: ECharts中的wordcloud(词云)是一种可视化图表,它会将多个文本值的重要词语以可视化方式呈现出来。每个词语的字体大小展示了它们的重要性。字体越大的词语代表它在文本中的出现频率越高。 使用ECharts制作词云图表非常简单,只需要几行JavaScript代码就可以生成词云。在数据处理方面,ECharts提供了多种处理选项,例如自动合并同义词、设置最大词语数量、规定颜色范围等。 除此之外,ECharts的词云图表还支持交互功能。在鼠标滑过时,会在词云图表中心显示该词语在文本中的出现次数以及占比,并且可以通过点击词语实现联动跳转。 总的来说,ECharts的wordcloud是一个非常直观、美观的可视化图表,并且支持多种数据处理和交互功能,可以用于各种场合的数据展示和分析。 ### 回答2: Echarts是一款用于数据可视化JavaScript库,它支持多种图表类型,例如折线图、柱状图、散点图等。其中,Echarts中的词云图(Word Cloud)模块被称为“Echart-worldcloud”。 Echart-worldcloud能够将一些拥有权重的文本数据进行可视化呈现,通常用于展示某个领域内相关关键词的热度或重要性。在Word Cloud的图表中,文本的大小和颜色都能够反映该词的权重,更大或者更鲜艳的颜色代表该内容更加重要或是热度更高。用户可以通过调整不同的参数设置数据可视化的效果,如需要将重要性更高的内容展示出来可以调整Weightage属性。 Echart-worldcloud在可视化展示方面极为灵活,美观,方便用户自定义,如通过调整颜色、字体、布局和图例等等,定制符合自身需求的词云图表。因此,Echart-worldcloud在文本数据处理、分析和比较等方面有着极大的应用前景,特别是对于教育、商业、媒体等行业的数据分析和展示非常有用。 ### 回答3: ECharts是一款由百度大数据团队开发的前端可视化库,支持多种图表类型和数据格式。其中,ECharts提供了wordcloud(词云)图表类型,用于展示文本数据中词汇的词频和重要性。使用ECharts制作worldcloud,用户可以通过调整布局、颜色和字体等参数,更直观地展示文本数据的重要词汇,从而更快速、准确地了解文本数据的重点内容。同时,词云图表还可以和其他图表类型相互配合,在分析文本数据时提供更详细、深入的视角。ECharts-wordcloud不仅是一种直观易懂的数据可视化表达方式,也能满足多种领域、应用场景的需求,如市场分析、舆情监控、新闻报道等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值