忘尘丶莫负

【05】数据可视化：02-ECharts数据可视化案例_立可得智能看板

文章目录

- DAY01-可视化项目
- - 01-项目介绍
  - 02-使用技术
  - 03-Echarts-介绍
  - 04-Echarts-体验
  - - - 初始化echarts实例对象
  - 05-Echarts-基础配置
  - 06-REM适配
  - 07-基础布局
  - 08-边框图片
  - 09-公用面板样式
  - 10-概览区域(overview)-布局
  - 11-监控区域(monitor)-布局
  - 12-监控区域-效果
  - 13-点位区域(point)-布局
  - 14-点位区域-饼图
  - - 1. HTML引入图表
    - 2. 定制需求
  - 15-地图区域 (map) -预留布局
  - 16-用户统计 (users) -布局
  - 17-用户统计 (users) -柱状图
  - 18-订单区域（order）-布局
  - 18-订单区域（order）-效果 ( 课后作业 )
  - 19-销售统计( sales )-布局
  - 19-销售统计( sales )-线形图
  - 19-销售统计( sales )-切换效果
  - 20-渠道区域&销售进度-布局
  - 21-渠道分布(channel)-雷达图
  - 22-销售进度 (quarter) -饼状图
  - 23-热销排行（top）-布局
  - 23-热销排行（top）-效果
  - 24-Echarts-社区介绍
  - 25-Echarts-map使用（扩展）
  - 26-总结
- 源代码
- - index.html
  - index.css
  - icomoon.css
  - index.js
  - flexible.js
  - myMap.js
  - china.js
  - jQuery.min.js
  - echarts.min.js
  - images

DAY01-可视化项目

01-项目介绍

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。

该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …

02-使用技术

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

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

粗略代码统计：

css 580行
html 450行
js 400行 (有效)

03-Echarts-介绍

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

大白话：

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制。
- 折线图、柱状图、散点图、饼图、K线图

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

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

myChart.setOption(option);

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

06-REM适配

设计稿是1920px
PC端适配：宽度在 1024~1920之间页面元素宽高自适应
1. flexible.js 把屏幕分为 24 等份
2. cssrem 插件的基准值是 80px
  
  插件-配置按钮—配置扩展设置–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;
     }
 }

07-基础布局

html结构：

<body>
  <div class="viewport">
  	<div class="column">
                                          
    	<div>div>
			                                    
    	<div>div> 
			                                    
    	<div>div>                                           
    div>
    <div class="column">
                                          
    	<div>div>
			                                    
    	<div>div>                                          
    div>
    <div class="column">
                                          
    	<div>div>
			                                    
    	<div>div>                                  
    	<div>
      	                                    
    		<div>div>
      	                                    
    		<div>div>
      div>
			                                    
    	<div>div>                                     
    div>                        
  div>
body>

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

css样式：

/* 基础布局 */
body{
     
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 0.5rem;
  line-height: 1.15;
  background: url(../images/bg.jpg) no-repeat 0 0 / cover;
}
h4,h3,ul{
     
  margin: 0;
  padding: 0;
  font-weight: normal;
}
ul{
     
  list-style: none;
}
a{
     
  text-decoration: none;
}
.viewport{
     
  max-width: 1920px;
  min-width: 1024px;
  margin: 0 auto;
  min-height: 780px;
  padding: 3.667rem 0.833rem 0;
  background: url(../images/logo.png) no-repeat 0 0 / contain;
  display: flex;
}
.column{
     
  flex: 3;
  position: relative;
}
.column:nth-child(2){
     
  flex: 4;
  margin: 1.333rem 0.833rem 0;
}

08-边框图片

css3中自适应边框图片运用：

组合写法：

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;

解释：

边框图片资源地址
裁剪尺寸（上右下左）单位默认px，可使用百分百。
边框图片的宽度，默认边框的宽度。
平铺方式：
- stretch 拉伸（默认）
- repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
- round 环绕，是完整的使用切割后的图片进行平铺。

DEMO代码：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框图片title>
    <style>
        ul{
      
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
      
            width: 350px;
            height: 160px;
            border: 20px solid #ccc;
            margin-top: 20px;
        }
        li:nth-child(1){
      
            /*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; 
        }
        li:nth-child(2){
      
            /*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/                                         
          border-image: url("images/border.jpg") 167/20px repeat;
        }
        li:nth-child(3){
      
            /*默认的平铺方式*/
            border-image: url("images/border.jpg") 167/20px stretch;
        }
    style>
head>
<body>
<ul>
    <li>li>
    <li>li>
    <li>li>
ul>
body>
html>

09-公用面板样式

所有的面板的基础样式是一致的，提前布局好。

切割示例图：

面板 .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;
}

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

html结构：

      <div class="overview panel">
        <div class="inner">
          <ul>
            <li>
              <h4>2,190h4>
              <span>
                <i class="icon-dot" style="color: #006cff">i>
                设备总数
              span>
            li>
            <li class="item">
              <h4>190h4>
              <span>
                <i class="icon-dot" style="color: #6acca3">i>
                季度新增
              span>
            li>
            <li>
              <h4>3,001h4>
              <span>
                <i class="icon-dot" style="color: #6acca3">i>
                运营设备
              span>
            li>
            <li>
              <h4>108h4>
              <span>
                <i class="icon-dot" style="color: #ed3f35">i>
                异常设备
              span>
            li>
            ul>
        div>
      div>

样式描述：

容器高度 110px
h4字体 28px #fff 左边距 4.8px 下间隙 8px
span字体 16px #4c9bfd

/* 概览区域 */

.overview {
     
    height: 1.375rem;
}
.overview ul {
     
    display: flex;
    justify-content: space-between;
}
.overview ul li h4 {
     
    font-size: .35rem;
    color: #fff;
    margin: 0 0 .1rem .06rem;
}
.overview ul li span {
     
    font-size: .2rem;
    color: #4c9bfd;
}

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

html结构：

      
      <div class="monitor panel">
        <div class="inner">
          <div class="tabs">
            <a href="javascript:;" class="active">故障设备监控a>
            <a href="javascript:;" >异常设备监控a>
          div>
          <div class="content">
            <div class="head">
              <span class="col">故障时间span>
              <span class="col">设备地址span>
              <span class="col">异常代码span>
            div>
            <div class="marquee-view">
              <div class="marquee">
                <div class="row">
                  <span class="col">20180701span>
                  <span class="col">11北京市昌平西路金燕龙写字楼span>
                  <span class="col">1000001span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190601span>
                  <span class="col">北京市昌平区城西路金燕龙写字楼span>
                  <span class="col">1000002span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190704span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000003span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20180701span>
                  <span class="col">北京市昌平区建路金燕龙写字楼span>
                  <span class="col">1000004span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190701span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000005span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190701span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000006span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190701span>
                  <span class="col">北京市昌平区建西路金燕龙写字楼span>
                  <span class="col">1000007span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190701span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000008span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190701span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000009span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190710span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000010span>
                  <span class="icon-dot">span>
                div>
              div>
            div>
          div>
          <div class="content">
            <div class="head">
              <span class="col">异常时间span>
              <span class="col">设备地址span>
              <span class="col">异常代码span>
            div>
            <div class="marquee-view">
              <div class="marquee">
                <div class="row">
                  <span class="col">20190701span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000001span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190701span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000002span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190703span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000002span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190704span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000002span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190705span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000002span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190706span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000002span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190707span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000002span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190708span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000002span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190709span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000002span>
                  <span class="icon-dot">span>
                div>
                <div class="row">
                  <span class="col">20190710span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                  <span class="col">1000002span>
                  <span class="icon-dot">span>
                div>
              div>
            div>
          div>
        div>
      div>

监控区域 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 一行不换行溢出省略

/* 监控区域 */
.monitor{
     
  height: 6rem;
}
.monitor .inner{
     
  padding: .3rem 0;
  display: flex;
  flex-direction: column;
}
.monitor .tabs{
     
  padding: 0 .45rem;
  margin-bottom: 0.225rem;
  display: flex;
}
.monitor .tabs a{
     
  color:#1950c4;
  font-size: 0.225rem;
  padding: 0 .3375rem;
}
.monitor .tabs a:first-child{
     
  padding-left: 0;
  border-right: 0.025rem solid #00f2f1;
}
.monitor .tabs a.active{
     
  color: #fff;
}
.monitor .content{
     
  flex: 1;
  position: relative;
  display: none;
}
.monitor .head{
     
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.45rem;
  color: #68d8fe;
  font-size: 0.175rem;
}
.monitor .marquee-view {
     
  position: absolute;
  top: 0.5rem;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
.monitor .row{
     
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  font-size: 0.15rem;
  color: #61a8ff;
  padding: 0.15rem 0.45rem;
}
.monitor .row .icon-dot{
     
  position: absolute;
  left: 0.2rem;
  opacity: 0;
}
.monitor .row:hover {
     
  background-color: rgba(255, 255, 255, 0.1);
  color: #68d8fe;
}
.monitor .row:hover .icon-dot{
     
  opacity: 1;
}
.monitor .col:first-child{
     
  width: 1rem;
}
.monitor .col:nth-child(2){
     
  width: 2.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.monitor .col:nth-child(3){
     
  width: 1rem;
}

12-监控区域-效果

切换功能：

绑定标签页点击事件
当前容器加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;
}

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

html结构：

      
      <div class="point panel">
        <div class="inner">
          <h3>点位分布统计h3>
          <div class="chart">
            <div class="pie">div>
            <div class="data">
              <div class="item">
                <h4>320,11h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35">i>
                  点位总数
                span>
              div>
              <div class="item">
                <h4>418h4>
                <span>
                  <i class="icon-dot" style="color: #eacf19">i>
                  本月新增
                span>
              div>
            div>
          div>
        div>
      div>

css样式：

point 盒子高度为 340px

/* 点位 */
.point {
     
  height: 4.25rem;
}
.point .chart {
     
  display: flex;
  margin-top: 0.3rem;
  justify-content: space-between;
}
.point .pie {
     
  width: 3.9rem;
  height: 3rem;
  margin-left: -0.125rem;
  background-color: pink;
}
.point .data {
     
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2.1rem;
  padding: .45rem .375rem;
  box-sizing: border-box;
  background-image: url(../images/rect.png);
  background-size: cover;
}
.point h4 {
     
  margin-bottom: 0.15rem;
  font-size: .35rem;
  color: #fff;
}
.point span {
     
  display: block;
  color: #4c9bfd;
  font-size: .2rem;
}

14-点位区域-饼图

ECharts图表实现步骤：

从官方示例中找到类似图表，适当修改，引入到HTML页面中。
按照产品需求，来定制图表。

1. HTML引入图表

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

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
})();

2. 定制需求

第一步：参考官方例子，熟悉里面参数具体含义

option = {
     
    // 提示框组件
    tooltip: {
     
      // trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: 'item',
      // 格式化提示内容：
      // a 代表series系列图表名称  
      // b 代表series数据名称 data 里面的name    
      // c 代表series数据值 data 里面的value   
      // d代表  当前数据/总数据的比例
      formatter: "{a} 
{b} : {c} ({d}%)"
    },
    // 控制图表
    series: [
      {
     
        // 图表名称
        name: '点位统计',
        // 图表类型
        type: 'pie',
        // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
        // 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
        radius: ['10%', '70%'],
        // 图表中心位置 left 50%  top 50%  距离图表DOM容器
        center: ['50%', '50%'],
        // radius 半径模式，另外一种是 area 面积模式
        roseType: 'radius',
        // 数据集 value 数据的值 name 数据的名称
        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'}
            ]
        }
    ]
};

第二步：按照需求定制

需求1：颜色设置

color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

需求2：修改饼形图大小 ( series对象)

radius: ['10%', '70%'],

需求3：把饼形图的显示模式改为半径模式

 roseType: "radius",

需求4：数据使用更换（series对象里面 data对象）

          {
      value: 20, name: '云南' },
          {
      value: 26, name: '北京' },
          {
      value: 24, name: '山东' },
          {
      value: 25, name: '河北' },
          {
      value: 20, name: '江苏' },
          {
      value: 25, name: '浙江' },
          {
      value: 30, name: '四川' },
          {
      value: 42, name: '湖北' }

需求5：字体略小些 10 px ( series对象里面设置 )

饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

series: [
      {
     
        name: "面积模式",
        type: "pie",
        radius: [30, 110],
        center: ["50%", "50%"],
        roseType: "radius",
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
     
          fontSize: 10
        },
      }
    ]
  };

需求6：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
- 连接图表 6 px
- 连接文字 8 px

+        // 文字调整
+        label:{
+          fontSize: 10
+        },
+        // 引导线调整
+        labelLine: {
+          // 连接扇形图线长
+          length: 6,
+          // 连接文字线长
+          length2: 8
+        } 
+      }
+    ],

需求6：浏览器缩放的时候，图表跟着自动适配。

// 监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function() {
     
    myChart.resize();
  });

点位统计完整JavaScript代码：

// 点位分布统计模块
(function() {
     
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie"));
  // 2. 指定配置项和数据
  var option = {
     
    tooltip: {
     
      trigger: "item",
      formatter: "{a} 
{b} : {c} ({d}%)"
    },
    // 注意颜色写的位置
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ],
    series: [
      {
     
        name: "点位统计",
        type: "pie",
        // 如果radius是百分比则必须加引号
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        data: [
          {
      value: 20, name: "云南" },
          {
      value: 26, name: "北京" },
          {
      value: 24, name: "山东" },
          {
      value: 25, name: "河北" },
          {
      value: 20, name: "江苏" },
          {
      value: 25, name: "浙江" },
          {
      value: 30, name: "四川" },
          {
      value: 42, name: "湖北" }
        ],
        // 修饰饼形图文字相关的样式 label对象
        label: {
     
          fontSize: 10
        },
        // 修饰引导线样式
        labelLine: {
     
          // 连接到图形的线长度
          length: 6,
          // 连接到文字的线长度
          length2: 8
        }
      }
    ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
     
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

15-地图区域 (map) -预留布局

html结构：

      
      <div class="map">
        <h3>
          <span class="icon-cube">span>
          设备数据统计
        h3>
        <div class="chart">
          <div class="geo">div>
        div>
      div>

css样式：

/* 地图  */
.map {
     
  height: 7.225rem;
  margin-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
}
.map h3 {
     
  line-height: 1;
  padding: 0.2rem 0;
  margin: 0;
  font-size: 0.25rem;
  color: #fff;
  font-weight: 400;
}
.map .icon-cube {
     
  color: #68d8fe;
}
.map .chart {
     
  flex: 1;
  background-color: rgba(255, 255, 255, 0.05);
}
.map .geo {
     
  width: 100%;
  height: 100%;
}

注意第二列（column) 有个外边距（上面 32px 左右 20px 下是 0）

.viewport .column:nth-child(2) {
     
    flex: 4;
    margin: .4rem .25rem 0;
}

16-用户统计 (users) -布局

html结构：

      
      <div class="users panel">
        <div class="inner">
          <h3>全国用户总量统计h3>
          <div class="chart">
            <div class="bar">div>
            <div class="data">
              <div class="item">
                <h4>120,899h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35">i>
                  用户总量
                span>
              div>
              <div class="item">
                <h4>248h4>
                <span>
                  <i class="icon-dot" style="color: #eacf19">i>
                  本月新增
                span>
              div>
            div>
          div>
        div>
      div>

css样式：

/* 用户模块 */
.users {
     
  height: 4.25rem;
  display: flex;
}
.users .chart {
     
  display: flex;
  margin-top: .3rem;
}
.users .bar {
     
  width: 7.35rem;
  height: 3rem;
}
.users .data {
     
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2.1rem;
  padding: .45rem .375rem;
  box-sizing: border-box;
  background-image: url(../images/rect.png);
  background-size: cover;
}
.users h4 {
     
  margin-bottom: .15rem;
  font-size: .35rem;
  color: #fff;
}
.users span {
     
  display: block;
  color: #4c9bfd;
  font-size: 0.2rem;
}

17-用户统计 (users) -柱状图

实现步骤：

从官方示例中找到最接近项目需求的例子，适当修改, 引入到HTML页面中
按照产品需求，来定制图表。

第一步：参考官方示例 + 分析

(function () {
     
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".bar"));
// 2. 指定配置和数据
var option = {
     
    // 工具提示
    tooltip: {
     
      // 触发类型  经过轴触发axis  经过轴触发item
      trigger: 'axis',
      // 轴触发提示才有效
      axisPointer: {
         
        // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果       
        type: 'shadow'        
      }
    },
    // 图表边界控制
    grid: {
     
      // 距离 上右下左 的距离
      left: '3%',
      right: '4%',
      bottom: '3%',
      // 是否包含文本
      containLabel: true
    },
    // 控制x轴
    xAxis: [
      {
     
        // 使用类目，必须有data属性
        type: 'category',
        // 使用 data 中的数据设为刻度文字
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // 刻度设置
        axisTick: {
     
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: true
        }
      }
    ],
    // 控制y轴
    yAxis: [
      {
     
        // 使用数据的值设为刻度文字
        type: 'value'
      }
    ],
    // 控制x轴
    series: [
      {
     
        // 图表数据名称
        name: '用户统计',
        // 图表类型
        type: 'bar',
        // 柱子宽度
        barWidth: '60%',
        // 数据
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };
    
  // 3. 把配置给实例对象
  myChart.setOption(option);
})();

第二步：按照需求修改

需求1：修改柱子的颜色

// 修改线性渐变色方式 1
color: new echarts.graphic.LinearGradient(
     // (x1,y2) 点到点 (x2,y2) 之间进行渐变
     0, 0, 0, 1,
     [
          {
      offset: 0, color: '#00fffb' }, // 0 起始颜色
          {
      offset: 1, color: '#0061ce' }  // 1 结束颜色
    ]
 ),
// 修改线性渐变色方式 2
color: {
     
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
     
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
     
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
},

需求2：提示框组件放到柱子上触发，没有阴影等效果

//提示框组件
tooltip: {
     
    trigger: 'item',
   // axisPointer: {            // 坐标轴指示器，坐标轴触发有效  这个模块我们此时不需要删掉即可
       // type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
   // }
},

需求3：修改柱形图表大小，以及相关网格。
- 饼形图修改图表大小是通过 series 对象里面的 radius
- 柱形图修改图标大小是通过 series 对象里面的 grid 对象 left right 等
- 显示网格 show: true，网格颜色是 borderColor

// 直角坐标系内绘图网格（区域）
grid: {
     
   top: '3%',
   right: '3%',
   bottom: '3%',
   left: '0%',
   //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
   containLabel: true,
   // 是否显示直角坐标系网格
   show: true,
   //grid 四条边框的颜色
   borderColor: 'rgba(0, 240, 255, 0.3)'
},

需求4： X 轴调整
- 柱子在刻度之间
- 剔除刻度不显示
- 刻度标签文字颜色 #4c9bfd 通过 axisLabel 对象设置
- 修改x轴线的颜色 axisLine 里面的 lineStyle

    // 控制x轴
    xAxis: [
      {
     
        // 使用类目，必须有data属性
        type: 'category',
        // 使用 data 中的数据设为刻度文字
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // 刻度设置
        axisTick: {
     
           // true意思：图形和刻度居中中间
           // false意思：图形在刻度之间
           alignWithLabel: false,
           // 不显示刻度
           show: false
        },        
        // x坐标轴文字标签样式设置
        axisLabel: {
     
          color: '#4c9bfd'
       },
       // x坐标轴颜色设置
       axisLine:{
     
          lineStyle:{
     
              color:'rgba(0, 240, 255, 0.3)',
              // width:8,  x轴线的粗细
              // opcity: 0,   如果不想显示x轴线 则改为 0
             }
        }
      }

需求5： Y 轴调整
- 剔除刻度不显示
- Y轴文字颜色 #4c9bfd 通过 axisLabel 对象设置
- Y轴分割线颜色 splitLine 对象里面 lineStyle 对象设置

    // 控制y轴
    yAxis: [
      {
     
        // 使用类目，必须有data属性
        type: 'category',
        // 使用 data 中的数据设为刻度文字
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // 刻度设置
        axisTick: {
     
           // 不显示刻度
           show: false
        },        
        // y坐标轴文字标签样式设置
        axisLabel: {
     
          color: '#4c9bfd'
       },
       // y坐标轴颜色设置
        axisLine:{
     
          lineStyle:{
     
               color:'rgba(0, 240, 255, 0.3)',
              // width:8,  x轴线的粗细
              // opcity: 0,   如果不想显示x轴线 则改为 0
             }
        },
        // y轴 分割线的样式 
         splitLine: {
     
            lineStyle: {
     
                color: 'rgba(0, 240, 255, 0.3)'
            }
         }     
    ],

需求6：调整数据，与省略图形定制

// series
data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240]

// xAxis
data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆']

省略图形

经过图形才显示提示，且省略的柱子不需要提示
图形单独设置颜色

// 中间省略的数据  准备三项
var item = {
       
    name:'',
    value: 1200,
    // 柱子颜色
    itemStyle: {
       
      color: '#254065'
    },
     // 鼠标经过柱子颜色
    emphasis: {
       
      itemStyle: {
       
        color: '#254065'
      }
    },
    // 工具提示隐藏
    tooltip: {
       
      extraCssText: 'opacity:0'
    },
  }

// series配置data选项在中使用
data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240],

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

18-订单区域（order）-布局

html结构：

      
      <div class="order panel">
        <div class="inner">
          
          <div class="filter">
            <a href="javascript:;"  class="active">365天a>
            <a href="javascript:;" >90天a>
            <a href="javascript:;" >30天a>
            <a href="javascript:;" >24小时a>
          div>
          
          <div class="data">
            <div class="item">
              <h4>20,301,987h4>
              <span>
                <i class="icon-dot" style="color: #ed3f35;">i>
                订单量
              span>
            div>
            <div class="item">
              <h4>99834h4>
              <span>
                <i class="icon-dot" style="color: #eacf19;">i>
                销售额(万元)
              span>
            div>
          div>
        div>
      div>

css样式：

/* 订单 */
.order {
     
  height: 1.875rem;
}
.order .filter {
     
  display: flex;
}
.order .filter a {
     
  display: block;
  height: 0.225rem;
  line-height: 1;
  padding: 0 0.225rem;
  color: #1950c4;
  font-size: 0.225rem;
  border-right: 0.025rem solid #00f2f1;
}
.order .filter a:first-child {
     
  padding-left: 0;
}
.order .filter a:last-child {
     
  border-right: none;
}
.order .filter a.active {
     
  color: #fff;
  font-size: 0.25rem;
}
.order .data {
     
  display: flex;
  margin-top: 0.25rem;
}
.order .item {
     
  width: 50%;
}
.order h4 {
     
  font-size: 0.35rem;
  color: #fff;
  margin-bottom: 0.125rem;
}
.order span {
     
  display: block;
  color: #4c9bfd;
  font-size: 0.2rem;
}

18-订单区域（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.key]
    $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)
})();

19-销售统计( sales )-布局

html结构：

      
      <div class="sales panel">
        <div class="inner">
          <div class="caption">
            <h3>销售额统计h3>
            <a href="javascript:;" class="active" >年a>
            <a href="javascript:;" >季a>
            <a href="javascript:;" >月a>
            <a href="javascript:;" >周a>
          div>
          <div class="chart">
            <div class="label">单位:万div>
            <div class="line">div>
          div>
        div>
      div>

css样式：

/* 销售区域 */
.sales {
     
  height: 3.1rem;
}
.sales .caption {
     
  display: flex;
  line-height: 1;
}
.sales h3 {
     
  height: 0.225rem;
  padding-right: 0.225rem;
  border-right: 0.025rem solid #00f2f1;
}
.sales a {
     
  padding: 0.05rem;
  font-size: 0.2rem;
  margin: -0.0375rem 0 0 0.2625rem;
  border-radius: 0.0375rem;
  color: #0bace6;
}
.sales a.active {
     
  background-color: #4c9bfd;
  color: #fff;
}
.sales .inner {
     
  display: flex;
  flex-direction: column;
}
.sales .chart {
     
  flex: 1;
  padding-top: 0.1875rem;
  position: relative;
}
.sales .label {
     
  position: absolute;
  left: 0.525rem;
  top: 0.225rem;
  color: #4996f5;
  font-size: 0.175rem;
}
.sales .line {
     
  width: 100%;
  height: 100%;
}

19-销售统计( sales )-线形图

实现步骤：

寻找官方的类似示例，给予分析, 引入到HTML页面中
按照需求来定制它。

第一步： 寻找官方的类似示例，给予分析。

官方参考示例：https://www.echartsjs.com/examples/zh/editor.html?c=line-stack

// 销售统计模块
(function() {
     
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".line"));
  // 2. 指定配置和数据
  var option = {
     
    tooltip: {
     
      trigger: "axis"
    },
    legend: {
     
      data: ["邮件营销", "联盟广告"]
    },
    grid: {
     
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },

    xAxis: {
     
      type: "category",
      boundaryGap: false,
      data: ["周一", "周二"]
    },
    yAxis: {
     
      type: "value"
    },
    series: [
      {
     
        name: "邮件营销",
        type: "line",
        stack: "总量",
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
     
        name: "联盟广告",
        type: "line",
        stack: "总量",
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  };

  // 3. 把配置和数据给实例对象
  myChart.setOption(option);
})();

第二步： 按照需求来定制它。

需求1：修改折线图大小，显示边框设置颜色：#012f4a，并且显示刻度标签。

    // 设置网格样式
    grid: {
      
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,// 显示边框
      borderColor: '#012f4a',// 边框颜色
      containLabel: true // 包含刻度文字在内
    },

需求2：修改图例组件中的文字颜色 #4c9bfd，距离右侧 right 为 10%

 // 图例组件
    legend: {
     
      textStyle: {
     
        color: '#4c9bfd' // 图例文字颜色
      },
      right: '10%' // 距离右边10%
    },

需求3： x轴相关配置
- 刻度去除
- x轴刻度标签字体颜色：#4c9bfd
- 剔除坐标轴线颜色（将来使用Y轴分割线)
- 轴两端是不需要内间距 boundaryGap

    xAxis: {
      type: 'category',
      data: ["周一", "周二"],
	  axisTick: {
         show: false // 去除刻度线
       },
       axisLabel: {
         color: '#4c9bfd' // 文本颜色
       },
       axisLine: {
         show: false // 去除轴线
       },
       boundaryGap: false  // 去除轴内间距
    },

需求4： y轴的定制
- 刻度去除
- 字体颜色：#4c9bfd
- 分割线颜色：#012f4a

    yAxis: {
     
      type: 'value',
      axisTick: {
     
        show: false  // 去除刻度
      },
      axisLabel: {
     
        color: '#4c9bfd' // 文字颜色
      },
      splitLine: {
     
        lineStyle: {
     
          color: '#012f4a' // 分割线颜色
        }
      }
    },

需求5：两条线形图定制
- 颜色分别：#00f2f1 #ed3f35
- 把折线修饰为圆滑 series 数据中添加 smooth 为 true

    color: ['#00f2f1', '#ed3f35'],
	series: [{
     
      name:'预期销售额',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      // 折线修饰为圆滑
      smooth: true,
      },{
     
      name:'实际销售额',
      data: [100, 331, 200, 123, 233, 543, 400],
      type: 'line',
      smooth: true,
    }]

需求6：配置数据

// x轴的文字
xAxis: {
     
  type: 'category',
  data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

// 图标数据
    series: [{
     
      name:'预期销售额',
      data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      type: 'line',
      smooth: true
    },{
     
      name:'实际销售额',
      data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
      type: 'line',
      smooth: true
      }
    }]

总结：现在给的是年份数据，还需要切换效果。

19-销售统计( 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();
  });

20-渠道区域&销售进度-布局

html结构：

     
     <div class="wrap">
          <div class="channel panel">
            <div class="inner">
              <h3>渠道分布h3>
              <div class="data">
                <div class="radar">div>
              div>
            div>
          div>
          <div class="quarter panel">
            <div class="inner">
              <h3>一季度销售进度h3>
              <div class="chart">
                <div class="box">
                  <div class="gauge">div>
                  <div class="label">75<small> %small>div>
                div>
                <div class="data">
                  <div class="item">
                    <h4>1,321h4>
                    <span>
                      <i class="icon-dot" style="color: #6acca3">i>
                      销售额(万元)
                    span>
                  div>
                  <div class="item">
                    <h4>150%h4>
                    <span>
                      <i class="icon-dot" style="color: #ed3f35">i>
                      同比增长
                    span>
                  div>
                div>
              div>
            div>
          div>
        div>

css样式：

/* 渠道区块 */
.wrap {
     
  display: flex;
}
.channel,
.quarter {
     
  flex: 1;
  height: 2.9rem;
}
.channel {
     
  margin-right: 0.25rem;
}
.channel .data {
     
  overflow: hidden;
}
.channel .data .radar {
     
  height: 2.1rem;
  width: 100%;
  background-color: pink;
}
.channel h4 {
     
  color: #fff;
  font-size: 0.4rem;
  margin-bottom: 0.0625rem;
}
.channel small {
     
  font-size: 50%;
}
.channel span {
     
  display: block;
  color: #4c9bfd;
  font-size: 0.175rem;
}
/* 季度区块 */
.quarter .inner {
     
  display: flex;
  flex-direction: column;
  margin: 0 -0.075rem;
}
.quarter .chart {
     
  flex: 1;
  padding-top: 0.225rem;
}
.quarter .box {
     
  position: relative;
}
.quarter .label {
     
  transform: translate(-50%, -30%);
  color: #fff;
  font-size: 0.375rem;
  position: absolute;
  left: 50%;
  top: 50%;
}
.quarter .label small {
     
  font-size: 50%;
}
.quarter .gauge {
     
  height: 1.05rem;
}
.quarter .data {
     
  display: flex;
  justify-content: space-between;
}
.quarter .item {
     
  width: 50%;
}
.quarter h4 {
     
  color: #fff;
  font-size: 0.3rem;
  margin-bottom: 0.125rem;
}
.quarter span {
     
  display: block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #4c9bfd;
  font-size: 0.175rem;
}

21-渠道分布(channel)-雷达图

实现步骤：

寻找官方的类似示例，给予分析，并引入到HTML页面中
按照需求来定制它

第一步：参考类似实例： https://www.echartsjs.com/examples/zh/editor.html?c=radar-aqi

(function() {
     
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".radar"));
  // 2.指定配置
  var dataBJ = [[55, 9, 56, 0.46, 18, 6, 1]];
  var lineStyle = {
     
    normal: {
     
      width: 1,
      opacity: 0.5
    }
  };
  var option = {
     
    backgroundColor: "#161627",
    radar: {
     
      indicator: [
        {
      name: "AQI", max: 300 },
        {
      name: "PM2.5", max: 250 },
        {
      name: "PM10", max: 300 },
        {
      name: "CO", max: 5 },
        {
      name: "NO2", max: 200 },
        {
      name: "SO2", max: 100 }
      ],
      shape: "circle",
      splitNumber: 5,
      name: {
     
        textStyle: {
     
          color: "rgb(238, 197, 102)"
        }
      },
      splitLine: {
     
        lineStyle: {
     
          color: [
            "rgba(238, 197, 102, 0.1)",
            "rgba(238, 197, 102, 0.2)",
            "rgba(238, 197, 102, 0.4)",
            "rgba(238, 197, 102, 0.6)",
            "rgba(238, 197, 102, 0.8)",
            "rgba(238, 197, 102, 1)"
          ].reverse()
        }
      },
      splitArea: {
     
        show: false
      },
      axisLine: {
     
        lineStyle: {
     
          color: "rgba(238, 197, 102, 0.5)"
        }
      }
    },
    series: [
      {
     
        name: "北京",
        type: "radar",
        lineStyle: lineStyle,
        data: dataBJ,
        symbol: "none",
        itemStyle: {
     
          color: "#F9713C"
        },
        areaStyle: {
     
          opacity: 0.1
        }
      }
    ]
  };
  // 3.把配置和数据给对象
  myChart.setOption(option);
})();

第二步：按照需求来定制它

需求1：去掉背景颜色，调整雷达图大小 65%

radar:{
     
    center: ['50%', '50%'],
    // 外半径占据容器大小
    radius: '65%',
}

需求2：指示器轴的分割段数为4条（4个圆圈）

radar:{
     
    center: ['50%', '50%'],
    // 外半径占据容器大小
    radius: '65%',
    // 指示器轴的分割段数
    splitNumber: 4,
}

需求3：雷达图分割线设为白色半透明 0.5

 // 坐标轴在 grid 区域中的分隔线（圆圈）
   splitLine: {
     
        lineStyle: {
     
           color: 'rgba(255, 255, 255, 0.5)',
           // width: 2,
           // type: 'dashed'
           }
   },

需求4：雷达图坐标轴轴线相关设置(竖线) axisLine

// 坐标轴轴线相关设置(竖线)axisLine
axisLine: {
     
       show: true,
            lineStyle: {
     
                color: 'rgba(255, 255, 255, 0.5)'
                // width: 1,
                // type: 'solid'
             }
 },

需求5：修饰雷达图文字颜色为 #4c9bfd

name: {
     
    // 修饰雷达图文本颜色
     textStyle: {
     
       color: '#4c9bfd'
     }
},

需求6：修饰区域填充样式 series 对象

区域填充的背景颜色设置为： rgba(238, 197, 102, 0.6)

 areaStyle: {
     
     color: 'rgba(238, 197, 102, 0.6)',
},

区域填充的线条颜色为白色

// 线条样式
  lineStyle: {
     
         normal: {
     
              color: '#fff',
              // width: 1
         }
},

需求7：标记的图形(拐点）设置注意 series 里面设置

用圆点显示，拐点的大小设置为 5
小圆点设置为白色
在小圆点上显示相关数据，颜色设置为白色，10像素

// symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等
symbol: 'circle', 
// 拐点的大小  
symbolSize: 5, 
// 小圆点（拐点）设置为白色
itemStyle: {
     
       color: '#fff'
},
// 在圆点上显示相关数据
label: {
     
     show: true,
     color: '#fff',
     fontSize: 10
},

需求8：鼠标经过显示提示框组件

tooltip: {
     
    show: true,
    // 控制提示框组件的显示位置
    position: ['60%', '10%'],
},

需求9：更换数据

 // 雷达图的指示器 内部填充数据
  indicator: [
        {
      name: '机场', max: 100 },
        {
      name: '商场', max: 100 },
        {
      name: '火车站', max: 100 },
        {
      name: '汽车站', max: 100 },
        {
      name: '地铁', max: 100 }
 ],

data: [[90, 19, 56, 11, 34]],

整个代码

// 销售渠道模块 雷达图
(function() {
     
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".radar"));
  // 2.指定配置

  var option = {
     
    tooltip: {
     
      show: true,
      // 控制提示框组件的显示位置
      position: ["60%", "10%"]
    },
    radar: {
     
      indicator: [
        {
      name: "机场", max: 100 },
        {
      name: "商场", max: 100 },
        {
      name: "火车站", max: 100 },
        {
      name: "汽车站", max: 100 },
        {
      name: "地铁", max: 100 }
      ],
      // 修改雷达图的大小
      radius: "65%",
      shape: "circle",
      // 分割的圆圈个数
      splitNumber: 4,
      name: {
     
        // 修饰雷达图文字的颜色
        textStyle: {
     
          color: "#4c9bfd"
        }
      },
      // 分割的圆圈线条的样式
      splitLine: {
     
        lineStyle: {
     
          color: "rgba(255,255,255, 0.5)"
        }
      },
      splitArea: {
     
        show: false
      },
      // 坐标轴的线修改为白色半透明
      axisLine: {
     
        lineStyle: {
     
          color: "rgba(255, 255, 255, 0.5)"
        }
      }
    },
    series: [
      {
     
        name: "北京",
        type: "radar",
        // 填充区域的线条颜色
        lineStyle: {
     
          normal: {
     
            color: "#fff",
            width: 1,
            opacity: 0.5
          }
        },
        data: [[90, 19, 56, 11, 34]],
        // 设置图形标记 （拐点）
        symbol: "circle",
        // 这个是设置小圆点大小
        symbolSize: 5,
        // 设置小圆点颜色
        itemStyle: {
     
          color: "#fff"
        },
        // 让小圆点显示数据
        label: {
     
          show: true,
          fontSize: 10
        },
        // 修饰我们区域填充的背景颜色
        areaStyle: {
     
          color: "rgba(238, 197, 102, 0.6)"
        }
      }
    ]
  };
  // 3.把配置和数据给对象
  myChart.setOption(option);
  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
     
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

22-销售进度 (quarter) -饼状图

实现步骤：

寻找官方的类似示例，给予分析,引入到HTML页面中
按照需求来定制它。

第一步：参考官方示例：https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut

// 销售模块 饼形图 半圆形 设置方式
(function() {
     
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".gauge"));
  // 2. 指定数据和配置
  var option = {
     
    series: [
      {
     
        name: "销售进度",
        type: "pie",
        radius: ["50%", "70%"],
        //是否启用防止标签重叠策略
        // avoidLabelOverlap: false,
        labelLine: {
     
          normal: {
     
            show: false
          }
        },
        data: [{
      value: 100 }, {
      value: 100 }, {
      value: 200 }]
      }
    ]
  };
  // 3. 把数据和配置给实例对象
  myChart.setOption(option);
})();

第二步：进行定制

需求1：改成半圆，图表大一些，让50%文字在中心。

  var option = {
     
    series: [
      {
     
        type: 'pie',
        // 放大图形
        radius: ['130%', '150%'],  
        // 移动下位置  套住50%文字
        center: ['48%', '80%'],   
        label: {
     
          normal: {
     
            show: false
          }
        },  
        // 起始角度，支持范围[0, 360]
        startAngle: 180,
        data: [
          {
      value: 100 }, // 不需要名称
          {
      value: 100,}, // 不需要名称
          {
      value: 200, itemStyle: {
      color: 'transparent' } } // 透明隐藏第三块区域
        ]
      }
    ]
  }

需求2：鼠标经过无需变大，修改第一段颜色渐变#00c9e0->#005fc1，修改第二段颜色#12274d。

       // 鼠标经过不变大
       hoverOffset: 0,  
        data: [
          {
     
            value: 100,
            itemStyle: {
     
              // 颜色渐变#00c9e0->#005fc1
              color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [
                  {
      offset: 0, color: "#00c9e0" }, // 0 起始颜色
                  {
      offset: 1, color: "#005fc1" } // 1 结束颜色
                ]
              )
            }
          },  
        {
      value: 100, itemStyle: {
      color: '#12274d' } }, // 颜色#12274d

23-热销排行（top）-布局

html结构：

      
      <div class="top panel">
        <div class="inner">
          <div class="all">
            <h3>全国热榜h3>
            <ul>
              <li>
                <i class="icon-cup1" style="color: #d93f36;">i>
                可爱多
              li>
              <li>
                <i class="icon-cup2" style="color: #68d8fe;">i>
                娃哈啥
              li>
              <li>
                <i class="icon-cup3" style="color: #4c9bfd;">i>
                喜之郎
              li>
            ul>
          div>
          <div class="province">
            <h3>各省热销 <i class="date">// 近30日 //i>h3>
            <div class="data">
              <ul class="sup">
                <li>
                  <span>北京span>
                  <span>25,179 <s class="icon-up">s>span>
                li>
                <li>
                  <span>河北span>
                  <span>23,252 <s class="icon-down">s>span>
                li>
                <li>
                  <span>上海span>
                  <span>20,760 <s class="icon-up">s>span>
                li>
                <li>
                  <span>江苏span>
                  <span>23,252 <s class="icon-down">s>span>
                li>
                <li>
                  <span>山东span>
                  <span>20,760 <s class="icon-up">s>span>
                li>
              ul>
              <ul class="sub">
                
              ul>
            div>
          div>
        div>
      div>

css样式：

/* 排行榜 */
.top {
     
  height: 3.5rem;
}
.top .inner {
     
  display: flex;
}
.top .all {
     
  display: flex;
  flex-direction: column;
  width: 2.1rem;
  color: #4c9bfd;
  font-size: 0.175rem;
  vertical-align: middle;
}
.top .all ul {
     
  padding-left: 0.15rem;
  margin-top: 0.15rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.top .all li {
     
  overflow: hidden;
}
.top .all [class^="icon-"] {
     
  font-size: 0.45rem;
  vertical-align: middle;
  margin-right: 0.15rem;
}
.top .province {
     
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.top .province i {
     
  padding: 0 0.15rem;
  margin-top: 0.0625rem;
  float: right;
  font-style: normal;
  font-size: 0.175rem;
  color: #0bace6;
}
.top .province s {
     
  display: inline-block;
  transform: scale(0.8);
  text-decoration: none;
}
.top .province .icon-up {
     
  color: #dc3c33;
}
.top .province .icon-down {
     
  color: #36be90;
}
.top .province .data {
     
  flex: 1;
  display: flex;
  margin-top: 0.175rem;
}
.top .province ul {
     
  flex: 1;
  line-height: 1;
  margin-bottom: 0.175rem;
}
.top .province ul li {
     
  display: flex;
  justify-content: space-between;
}
.top .province ul span {
     
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.top .province ul.sup {
     
  font-size: 0.175rem;
}
.top .province ul.sup li {
     
  color: #4995f4;
  padding: 0.15rem;
}
.top .province ul.sup li.active {
     
  color: #a3c6f2;
  background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub {
     
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 0.15rem;
  background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub li {
     
  color: #52ffff;
  padding: 0.125rem 0.175rem;
}
.clock {
     
  position: absolute;
  top: -0.45rem;
  right: 0.5rem;
  font-size: 0.25rem;
  color: #0bace6;
}
.clock i {
     
  margin-right: 5px;
  font-size: 0.25rem;
}
@media screen and (max-width: 1600px) {
     
  .top span {
     
    transform: scale(0.9);
  }
  .top .province ul.sup li {
     
    padding: 0.125rem 0.15rem;
  }
  .top .province ul.sub li {
     
    padding: 0.0625rem 0.15rem;
  }
  .quarter span {
     
    transform: scale(0.9);
  }
}

23-热销排行（top）-效果

实现思路：

准备后台返回的真实数据
利用数据渲染各省热销模块 sup 模块 (拼接html格式字符串，进行渲染)
当鼠标进入 tab 的时候
- 激活当前的tab样式，删除其他tab的样式
- 渲染各省热销 sub 模块 (拼接html格式字符串，进行渲染)
默认激活第一个tab的效果
开启定时器，按依次切换

预备知识：

扩展知识：ES6模版字符

// 模版字符
var star = {
     
        name: "刘德华",
        age: 18
      };
//   以前的写法 拼接的时候引号很容易出问题
console.log("我的名字是" + star.name + "我的年龄是" + star.age);
//   ES6 模板字符写法
console.log(`我的名字是${
       star.name}我的年龄是${
       star.age}`);
console.log(`${
       star.name}${
       star.age}`);

开始实现：

第一步：得到后台数据（实际开发中，这个数据通过ajax请求获得）

    var hotData = [
      {
     
        city: '北京',  // 城市
        sales: '25, 179',  // 销售额
        flag: true, //  上升还是下降
        brands: [   //  品牌种类数据
          {
      name: '可爱多', num: '9,086', flag: true },
          {
      name: '娃哈哈', num: '8,341', flag: true },
          {
      name: '喜之郎', num: '7,407', flag: false },
          {
      name: '八喜', num: '6,080', flag: false },
          {
      name: '小洋人', num: '6,724', flag: false },
          {
      name: '好多鱼', num: '2,170', flag: true },
        ]
      },
      {
     
        city: '河北',
        sales: '23,252',
        flag: false,
        brands: [
          {
      name: '可爱多', num: '3,457', flag: false },
          {
      name: '娃哈哈', num: '2,124', flag: true },
          {
      name: '喜之郎', num: '8,907', flag: false },
          {
      name: '八喜', num: '6,080', flag: true },
          {
      name: '小洋人', num: '1,724', flag: false },
          {
      name: '好多鱼', num: '1,170', flag: false },
        ]
      },
      {
     
        city: '上海',
        sales: '20,760',
        flag: true,
        brands: [
          {
      name: '可爱多', num: '2,345', flag: true },
          {
      name: '娃哈哈', num: '7,109', flag: true },
          {
      name: '喜之郎', num: '3,701', flag: false },
          {
      name: '八喜', num: '6,080', flag: false },
          {
      name: '小洋人', num: '2,724', flag: false },
          {
      name: '好多鱼', num: '2,998', flag: true },
        ]
      },
      {
     
        city: '江苏',
        sales: '23,252',
        flag: false,
        brands: [
          {
      name: '可爱多', num: '2,156', flag: false },
          {
      name: '娃哈哈', num: '2,456', flag: true },
          {
      name: '喜之郎', num: '9,737', flag: true },
          {
      name: '八喜', num: '2,080', flag: true },
          {
      name: '小洋人', num: '8,724', flag: true },
          {
      name: '好多鱼', num: '1,770', flag: false },
        ]
      },
       {
     
        city: '山东',
        sales: '20,760',
        flag: true,
        brands: [
          {
      name: '可爱多', num: '9,567', flag: true },
          {
      name: '娃哈哈', num: '2,345', flag: false },
          {
      name: '喜之郎', num: '9,037', flag: false },
          {
      name: '八喜', num: '1,080', flag: true },
          {
      name: '小洋人', num: '4,724', flag: false },
          {
      name: '好多鱼', num: '9,999', flag: true },
        ]
      }
    ]

第二步：根据数据渲染各省热销 sup 模块内容

删掉原先自带小li
遍历数据 $.each()
拼接字符串把数据渲染到 li 的span 里面
追加给 .sup 盒子

 var supHTML = "";
  $.each(hotData, function(index, item) {
     
    // console.log(item);
    supHTML += `${
       item.city} ${
       item.sales} ${
       item.flag ? "icon-up" : "icon-down"}>
`;
  });
  $(".sup").html(supHTML);

第三步：当数据进入 tab 的时候

激活当前的tab样式，删除其他tab的样式
渲染各省热销 sub 模块
- 注意鼠标进入tab，只遍历当前索引号对应的城市对象里面的 brands
- 拼接html格式字符串，进行渲染

第四步：默认激活第一个tab

  // 所有的LI
  var $lis = $('.province .sup li')
  // 第一个默认激活
  $lis.eq(0).mouseenter()

第五步：开启定时切换

定时器里面 mouseenter 冲突问题的解决方案

定时器里面不加mousenter 事件，而是直接重新渲染数据就可以(执行鼠标经过事件里面的代码)

最好把渲染的代码封装到函数里面

 var index = 0;
  var timer = setInterval(function() {
     
    index++;
    if (index >= 5) index = 0;
    // lis.eq(index).mouseenter();
    render(lis.eq(index));
  }, 2000);

  $(".province .sup").hover(
    // 鼠标经过事件
    function() {
     
      clearInterval(timer);
    },
    // 鼠标离开事件
    function() {
     
      clearInterval(timer);
      timer = setInterval(function() {
     
        index++;
        if (index >= 5) index = 0;
        // lis.eq(index).mouseenter();
        render(lis.eq(index));
      }, 2000);
    }
  );

24-Echarts-社区介绍

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

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

25-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'
        }
      }
    },

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

26-总结

总结：实现一个需求，需要去推导，具备推导的能力需要练习，时间问题。

源代码

index.html


<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>数据可视化项目title>
    <link rel="stylesheet" href="fonts/icomoon.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/echarts.min.js">script>
    <script src="js/flexible.js">script>
    <script src="js/jquery.min.js">script>
head>

<body>

<div class="viewport">
    <div class="column">
        
        <div class="panel overview">
            <div class="inner">
                <ul>
                    <li>
                        <h4>2,190h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff">i>
                            设备总数
                        span>
                    li>
                    <li class="item">
                        <h4>190h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3">i>
                            季度新增
                        span>
                    li>
                    <li>
                        <h4>3,001h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3">i>
                            运营设备
                        span>
                    li>
                    <li>
                        <h4>108h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35">i>
                            异常设备
                        span>
                    li>
                ul>
            div>
        div>
        
        <div class="panel monitor">
            <div class="inner">
                <div class="tabs">
                    <a href="javascript:;" class="active">故障设备监控a>
                    <a href="javascript:;">异常设备监控a>
                div>
                <div class="content" style="display: block;">
                    <div class="head">
                        <span class="col">故障时间span>
                        <span class="col">设备地址span>
                        <span class="col">异常代码span>
                    div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                <span class="col">20180701span>
                                <span class="col">11北京市昌平西路金燕龙写字楼span>
                                <span class="col">1000001span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190601span>
                                <span class="col">北京市昌平区城西路金燕龙写字楼span>
                                <span class="col">1000002span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190704span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000003span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20180701span>
                                <span class="col">北京市昌平区建路金燕龙写字楼span>
                                <span class="col">1000004span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190701span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000005span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190701span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000006span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190701span>
                                <span class="col">北京市昌平区建西路金燕龙写字楼span>
                                <span class="col">1000007span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190701span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000008span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190701span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000009span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190710span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000010span>
                                <span class="icon-dot">span>
                            div>
                        div>
                    div>
                div>
                <div class="content">
                    <div class="head">
                        <span class="col">异常时间span>
                        <span class="col">设备地址span>
                        <span class="col">异常代码span>
                    div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                <span class="col">20190701span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000001span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190701span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000002span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190703span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000002span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190704span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000002span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190705span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000002span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190706span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000002span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190707span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000002span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190708span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000002span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190709span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000002span>
                                <span class="icon-dot">span>
                            div>
                            <div class="row">
                                <span class="col">20190710span>
                                <span class="col">北京市昌平区建材城西路金燕龙写字楼span>
                                <span class="col">1000002span>
                                <span class="icon-dot">span>
                            div>
                        div>
                    div>
                div>
            div>
        div>
        
        <div class="point panel">
            <div class="inner">
                <h3>点位分布统计h3>
                <div class="chart">
                    <div class="pie">div>
                    <div class="data">
                        <div class="item">
                            <h4>320,11h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35">i>
                                点位总数
                            span>
                        div>
                        <div class="item">
                            <h4>418h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19">i>
                                本月新增
                            span>
                        div>
                    div>
                div>
            div>
        div>
    div>
    <div class="column">
        
        <div class="map">
            <h3>
                <span class="icon-cube">span>
                设备数据统计
            h3>
            <div class="chart">
                <div class="geo">div>
            div>
        div>
        
        <div class="users panel">
            <div class="inner">
                <h3>全国用户总量统计h3>
                <div class="chart">
                    <div class="bar">div>
                    <div class="data">
                        <div class="item">
                            <h4>120,899h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35">i>
                                用户总量
                            span>
                        div>
                        <div class="item">
                            <h4>248h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19">i>
                                本月新增
                            span>
                        div>
                    div>
                div>
            div>
        div>
    div>
    <div class="column">
        
        <div class="order panel">
            <div class="inner">
                
                <div class="filter">
                    <a href="javascript:;" class="active">365天a>
                    <a href="javascript:;">90天a>
                    <a href="javascript:;">30天a>
                    <a href="javascript:;">24小时a>
                div>
                
                <div class="data">
                    <div class="item">
                        <h4>20,301,987h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35;">i>
                            订单量
                        span>
                    div>
                    <div class="item">
                        <h4>99834h4>
                        <span>
                            <i class="icon-dot" style="color: #eacf19;">i>
                            销售额(万元)
                        span>
                    div>
                div>
            div>
        div>
        
        <div class="sales panel">
            <div class="inner">
                <div class="caption">
                    <h3>销售额统计h3>
                    <a href="javascript:;" class="active" data-type="year">年a>
                    <a href="javascript:;" data-type="quarter">季a>
                    <a href="javascript:;" data-type="month">月a>
                    <a href="javascript:;" data-type="week">周a>
                div>
                <div class="chart">
                    <div class="label">单位:万div>
                    <div class="line">div>
                div>
            div>
        div>
        
        <div class="wrap">
            <div class="channel panel">
                <div class="inner">
                    <h3>渠道分布h3>
                    <div class="data">
                        <div class="radar">div>
                    div>
                div>
            div>
            
            <div class="quarter panel">
                <div class="inner">
                    <h3>一季度销售进度h3>
                    <div class="chart">
                        <div class="box">
                            <div class="gauge">div>
                            <div class="label">50<small> %small>div>
                        div>
                        <div class="data">
                            <div class="item">
                                <h4>1,321h4>
                                <span>
                                    <i class="icon-dot" style="color: #6acca3">i>
                                    销售额(万元)
                                span>
                            div>
                            <div class="item">
                                <h4>150%h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35">i>
                                    同比增长
                                span>
                            div>
                        div>
                    div>
                div>
            div>
        div>

        
        <div class="top panel">
            <div class="inner">
                <div class="all">
                    <h3>全国热榜h3>
                    <ul>
                        <li>
                            <i class="icon-cup1" style="color: #d93f36;">i>
                            可爱多
                        li>
                        <li>
                            <i class="icon-cup2" style="color: #68d8fe;">i>
                            娃哈啥
                        li>
                        <li>
                            <i class="icon-cup3" style="color: #4c9bfd;">i>
                            喜之郎
                        li>
                    ul>
                div>
                <div class="province">
                    <h3>各省热销 <i class="date">// 近30日 //i>h3>
                    <div class="data">
                        <ul class="sup">
                            
                        ul>
                        <ul class="sub">
                            
                        ul>
                    div>
                div>
            div>
        div>
    div>
div>
<script src="js/index.js">script>

<script src="js/china.js">script>

<script src="js/myMap.js">script>
body>
html>

index.css

/*清除元素默认的内外边距  */
* {
     
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*让所有斜体 不倾斜*/
em,
i {
     
    font-style: normal;
}

/*去掉列表前面的小点*/
li {
     
    list-style: none;
}

/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
     
    border: 0; /*ie6*/
    vertical-align: middle;
}

/*让button 按钮 变成小手*/
button {
     
    cursor: pointer;
}

/*取消链接的下划线*/
a {
     
    color: #666;
    text-decoration: none;
}

a:hover {
     
    color: #e33333;
}

h4 {
     
    font-weight: 400;
}

body {
     
    background: url(../images/bg.jpg) no-repeat 0 0 / cover;
    /* background-size: cover; */
}

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

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

.viewport {
     
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 1.1rem 0.25rem 0;
    background: url(../images/logo.png) no-repeat 0 0 / contain;
    min-height: 780px;
}

.viewport .column {
     
    flex: 3;
}

.viewport .column:nth-child(2) {
     
    flex: 4;
    margin: 0.4rem 0.25rem 0;
}

/* 公共面板样式  */
.panel {
     
    position: relative;
    border: 15px solid transparent;
    border-width: 0.6375rem 0.475rem 0.25rem 1.65rem;
    border-image-source: url(../images/border.png);
    border-image-slice: 51 38 20 132;
    margin-bottom: 0.25rem;
}

.inner {
     
    position: absolute;
    top: -0.6375rem;
    left: -1.65rem;
    right: -0.475rem;
    bottom: -0.25rem;
    padding: 0.3rem 0.45rem;
}

.panel h3 {
     
    font-size: 0.25rem;
    color: #fff;
    font-weight: 400;
}

/* 概览区域模块制作 */
.overview {
     
    height: 1.375rem;
}

.overview ul {
     
    display: flex;
    justify-content: space-between;
}

.overview ul li h4 {
     
    font-size: 0.35rem;
    color: #fff;
    margin: 0 0 0.1rem 0.06rem;
}

.overview ul li span {
     
    font-size: 0.2rem;
    color: #4c9bfd;
}

/* 监控区域模块制作 */
.monitor {
     
    height: 6rem;
}

.monitor .inner {
     
    padding: 0.3rem 0;
    display: flex;
    flex-direction: column;
}

.monitor .tabs {
     
    padding: 0 0.45rem;
    margin-bottom: 0.225rem;
    display: flex;
}

.monitor .tabs a {
     
    color: #1950c4;
    font-size: 0.225rem;
    padding: 0 0.3375rem;
}

.monitor .tabs a:first-child {
     
    padding-left: 0;
    border-right: 0.025rem solid #00f2f1;
}

.monitor .tabs a.active {
     
    color: #fff;
}

.monitor .content {
     
    flex: 1;
    position: relative;
    display: none;
}

.monitor .head {
     
    display: flex;
    justify-content: space-between;
    line-height: 1.05;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.15rem 0.45rem;
    color: #68d8fe;
    font-size: 0.175rem;
}

.monitor .marquee-view {
     
    position: absolute;
    top: 0.5rem;
    bottom: 0;
    width: 100%;
    overflow: hidden;
}

.monitor .row {
     
    display: flex;
    justify-content: space-between;
    line-height: 1.05;
    font-size: 0.15rem;
    color: #61a8ff;
    padding: 0.15rem 0.45rem;
}

.monitor .row .icon-dot {
     
    position: absolute;
    left: 0.2rem;
    opacity: 0;
}

.monitor .row:hover {
     
    background-color: rgba(255, 255, 255, 0.1);
    color: #68d8fe;
}

.monitor .row:hover .icon-dot {
     
    opacity: 1;
}

.monitor .col:first-child {
     
    width: 1rem;
}

.monitor .col:nth-child(2) {
     
    width: 2.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.monitor .col:nth-child(3) {
     
    width: 1rem;
}

/* 通过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;
}

/* 点位分布统计模块制作 */
.point {
     
    height: 4.25rem;
}

.point .chart {
     
    display: flex;
    margin-top: 0.3rem;
    justify-content: space-between;
}

.point .pie {
     
    width: 3.9rem;
    height: 3rem;
    margin-left: -0.125rem;
}

.point .data {
     
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 2.1rem;
    padding: 0.45rem 0.375rem;
    box-sizing: border-box;
    background-image: url(../images/rect.png);
    background-size: cover;
}

.point h4 {
     
    margin-bottom: 0.15rem;
    font-size: 0.35rem;
    color: #fff;
}

.point span {
     
    display: block;
    color: #4c9bfd;
    font-size: 0.2rem;
}

/* 地图模块制作 */
.map {
     
    height: 7.225rem;
    margin-bottom: 0.25rem;
    display: flex;
    flex-direction: column;
}

.map h3 {
     
    line-height: 1;
    padding: 0.2rem 0;
    margin: 0;
    font-size: 0.25rem;
    color: #fff;
    font-weight: 400;
}

.map .icon-cube {
     
    color: #68d8fe;
}

.map .chart {
     
    flex: 1;
    background-color: rgba(255, 255, 255, 0.05);
}

.map .geo {
     
    width: 100%;
    height: 100%;
}

/* 用户统计模块 */
.users {
     
    height: 4.25rem;
    display: flex;
}

.users .chart {
     
    display: flex;
    margin-top: 0.3rem;
}

.users .bar {
     
    width: 7.35rem;
    height: 3rem;
}

.users .data {
     
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 2.1rem;
    padding: 0.45rem 0.375rem;
    box-sizing: border-box;
    background-image: url(../images/rect.png);
    background-size: cover;
}

.users h4 {
     
    margin-bottom: 0.15rem;
    font-size: 0.35rem;
    color: #fff;
}

.users span {
     
    display: block;
    color: #4c9bfd;
    font-size: 0.2rem;
}

/* 订单模块制作 */
.order {
     
    height: 1.875rem;
}

.order .filter {
     
    display: flex;
}

.order .filter a {
     
    display: block;
    height: 0.225rem;
    line-height: 1;
    padding: 0 0.225rem;
    color: #1950c4;
    font-size: 0.225rem;
    border-right: 0.025rem solid #00f2f1;
}

.order .filter a:first-child {
     
    padding-left: 0;
}

.order .filter a:last-child {
     
    border-right: none;
}

.order .filter a.active {
     
    color: #fff;
    font-size: 0.25rem;
}

.order .data {
     
    display: flex;
    margin-top: 0.25rem;
}

.order .item {
     
    width: 50%;
}

.order h4 {
     
    font-size: 0.35rem;
    color: #fff;
    margin-bottom: 0.125rem;
}

.order span {
     
    display: block;
    color: #4c9bfd;
    font-size: 0.2rem;
}

/* 销售区域 */
.sales {
     
    height: 3.1rem;
}

.sales .caption {
     
    display: flex;
    line-height: 1;
}

.sales h3 {
     
    height: 0.225rem;
    padding-right: 0.225rem;
    border-right: 0.025rem solid #00f2f1;
}

.sales a {
     
    padding: 0.05rem;
    font-size: 0.2rem;
    margin: -0.0375rem 0 0 0.2625rem;
    border-radius: 0.0375rem;
    color: #0bace6;
}

.sales a.active {
     
    background-color: #4c9bfd;
    color: #fff;
}

.sales .inner {
     
    display: flex;
    flex-direction: column;
}

.sales .chart {
     
    flex: 1;
    padding-top: 0.1875rem;
    position: relative;
}

.sales .label {
     
    position: absolute;
    left: 0.525rem;
    top: 0.225rem;
    color: #4996f5;
    font-size: 0.175rem;
}

.sales .line {
     
    width: 100%;
    height: 100%;
    /* background-color: pink; */
}

/* 渠道分布以及季度销售模块 */
.wrap {
     
    display: flex;
}

.channel,
.quarter {
     
    flex: 1;
    height: 2.9rem;
}

.channel {
     
    margin-right: 0.25rem;
}

.channel .data {
     
    overflow: hidden;
}

.channel .data .radar {
     
    height: 2.1rem;
    width: 100%;
}

.channel h4 {
     
    color: #fff;
    font-size: 0.4rem;
    margin-bottom: 0.0625rem;
}

.channel small {
     
    font-size: 50%;
}

.channel span {
     
    display: block;
    color: #4c9bfd;
    font-size: 0.175rem;
}

/* 季度区块 */
.quarter .inner {
     
    display: flex;
    flex-direction: column;
    margin: 0 -0.075rem;
}

.quarter .chart {
     
    flex: 1;
    padding-top: 0.225rem;
}

.quarter .box {
     
    position: relative;
}

.quarter .label {
     
    transform: translate(-50%, -30%);
    color: #fff;
    font-size: 0.375rem;
    position: absolute;
    left: 50%;
    top: 50%;
}

.quarter .label small {
     
    font-size: 50%;
}

.quarter .gauge {
     
    height: 1.05rem;
}

.quarter .data {
     
    display: flex;
    justify-content: space-between;
}

.quarter .item {
     
    width: 50%;
}

.quarter h4 {
     
    color: #fff;
    font-size: 0.3rem;
    margin-bottom: 0.125rem;
}

.quarter span {
     
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #4c9bfd;
    font-size: 0.175rem;
}

/* 全国热榜模块制作 */
/* 排行榜 */
.top {
     
    height: 3.5rem;
}

.top .inner {
     
    display: flex;
}

.top .all {
     
    display: flex;
    flex-direction: column;
    width: 2.1rem;
    color: #4c9bfd;
    font-size: 0.175rem;
    vertical-align: middle;
}

.top .all ul {
     
    padding-left: 0.15rem;
    margin-top: 0.15rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.top .all li {
     
    overflow: hidden;
}

.top .all [class^="icon-"] {
     
    font-size: 0.45rem;
    vertical-align: middle;
    margin-right: 0.15rem;
}

.top .province {
     
    flex: 1;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.top .province i {
     
    padding: 0 0.15rem;
    margin-top: 0.0625rem;
    float: right;
    font-style: normal;
    font-size: 0.175rem;
    color: #0bace6;
}

.top .province s {
     
    display: inline-block;
    transform: scale(0.8);
    text-decoration: none;
}

.top .province .icon-up {
     
    color: #dc3c33;
}

.top .province .icon-down {
     
    color: #36be90;
}

.top .province .data {
     
    flex: 1;
    display: flex;
    margin-top: 0.175rem;
}

.top .province ul {
     
    flex: 1;
    line-height: 1;
    margin-bottom: 0.175rem;
}

.top .province ul li {
     
    display: flex;
    justify-content: space-between;
}

.top .province ul span {
     
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.top .province ul.sup {
     
    font-size: 0.175rem;
}

.top .province ul.sup li {
     
    color: #4995f4;
    padding: 0.15rem;
}

.top .province ul.sup li.active {
     
    color: #a3c6f2;
    background-color: rgba(10, 67, 188, 0.2);
}

.top .province ul.sub {
     
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 0.15rem;
    background-color: rgba(10, 67, 188, 0.2);
}

.top .province ul.sub li {
     
    color: #52ffff;
    padding: 0.125rem 0.175rem;
}

.clock {
     
    position: absolute;
    top: -0.45rem;
    right: 0.5rem;
    font-size: 0.25rem;
    color: #0bace6;
}

.clock i {
     
    margin-right: 5px;
    font-size: 0.25rem;
}

@media screen and (max-width: 1600px) {
     
    .top span {
     
        transform: scale(0.9);
    }

    .top .province ul.sup li {
     
        padding: 0.125rem 0.15rem;
    }

    .top .province ul.sub li {
     
        padding: 0.0625rem 0.15rem;
    }

    .quarter span {
     
        transform: scale(0.9);
    }
}

icomoon.css

@font-face {
     
  font-family: 'icomoon';
  src:  url('icomoon.eot');
  src:  url('icomoon.eot#iefix') format('embedded-opentype'),
    url('icomoon.ttf') format('truetype'),
    url('icomoon.woff') format('woff'),
    url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
     
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dot:before {
     
  content: "\e900";
}
.icon-cup1:before {
     
  content: "\e901";
}
.icon-cup2:before {
     
  content: "\e902";
}
.icon-cup3:before {
     
  content: "\e903";
}
.icon-clock:before {
     
  content: "\e904";
}
.icon-down:before {
     
  content: "\e905";
}
.icon-cube:before {
     
  content: "\e906";
}
.icon-plane:before {
     
  content: "\e907";
}
.icon-train:before {
     
  content: "\e908";
}
.icon-bus:before {
     
  content: "\e909";
}
.icon-bag:before {
     
  content: "\e90a";
}
.icon-up:before {
     
  content: "\e90b";
}

index.js

// 监控区域模块制作
(function () {
     
    $(".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();
    });
    // 1. 先克隆marquee里面所有的行（row）
    $(".marquee-view .marquee").each(function () {
     
        // console.log($(this));
        var rows = $(this)
            .children()
            .clone();
        $(this).append(rows);
    });
})();
// 点位分布统计模块
(function () {
     
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie"));
    // 2. 指定配置项和数据
    var option = {
     
        tooltip: {
     
            trigger: "item",
            formatter: "{a} 
{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [
            {
     
                name: "点位统计",
                type: "pie",
                // 如果radius是百分比则必须加引号
                radius: ["10%", "70%"],
                center: ["50%", "50%"],
                roseType: "radius",
                data: [
                    {
     value: 20, name: "云南"},
                    {
     value: 26, name: "北京"},
                    {
     value: 24, name: "山东"},
                    {
     value: 25, name: "河北"},
                    {
     value: 20, name: "江苏"},
                    {
     value: 25, name: "浙江"},
                    {
     value: 30, name: "四川"},
                    {
     value: 42, name: "湖北"}
                ],
                // 修饰饼形图文字相关的样式 label对象
                label: {
     
                    fontSize: 10
                },
                // 修饰引导线样式
                labelLine: {
     
                    // 连接到图形的线长度
                    length: 6,
                    // 连接到文字的线长度
                    length2: 8
                }
            }
        ]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
     
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();
// 柱形图模块
(function () {
     
    var item = {
     
        name: "",
        value: 1200,
        // 1. 修改当前柱形的样式
        itemStyle: {
     
            color: "#254065"
        },
        // 2. 鼠标放到柱子上不想高亮显示
        emphasis: {
     
            itemStyle: {
     
                color: "#254065"
            }
        },
        // 3. 鼠标经过柱子不显示提示框组件
        tooltip: {
     
            extraCssText: "opacity: 0"
        }
    };
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".bar"));
    // 2. 指定配置和数据
    var option = {
     
        color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0,
            0,
            0,
            1,
            [
                {
     offset: 0, color: "#00fffb"}, // 0 起始颜色
                {
     offset: 1, color: "#0061ce"} // 1 结束颜色
            ]
        ),
        tooltip: {
     
            trigger: "item"
        },
        grid: {
     
            left: "0%",
            right: "3%",
            bottom: "3%",
            top: "3%",
            //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
            containLabel: true,
            // 是否显示直角坐标系网格
            show: true,
            //grid 四条边框的颜色
            borderColor: "rgba(0, 240, 255, 0.3)"
        },
        xAxis: [
            {
     
                type: "category",
                data: [
                    "上海",
                    "广州",
                    "北京",
                    "深圳",
                    "合肥",
                    "",
                    "......",
                    "",
                    "杭州",
                    "厦门",
                    "济南",
                    "成都",
                    "重庆"
                ],
                axisTick: {
     
                    alignWithLabel: false,
                    // 把x轴的刻度隐藏起来
                    show: false
                },
                axisLabel: {
     
                    color: "#4c9bfd"
                },
                // x轴这条线的颜色样式
                axisLine: {
     
                    lineStyle: {
     
                        color: "rgba(0, 240, 255, 0.3)"
                        // width: 3
                    }
                }
            }
        ],
        yAxis: [
            {
     
                type: "value",
                axisTick: {
     
                    alignWithLabel: false,
                    // 把y轴的刻度隐藏起来
                    show: false
                },
                axisLabel: {
     
                    color: "#4c9bfd"
                },
                // y轴这条线的颜色样式
                axisLine: {
     
                    lineStyle: {
     
                        color: "rgba(0, 240, 255, 0.3)"
                        // width: 3
                    }
                },
                // y轴分割线的颜色样式
                splitLine: {
     
                    lineStyle: {
     
                        color: "rgba(0, 240, 255, 0.3)"
                    }
                }
            }
        ],
        series: [
            {
     
                name: "直接访问",
                type: "bar",
                barWidth: "60%",
                data: [
                    2100,
                    1900,
                    1700,
                    1560,
                    1400,
                    item,
                    item,
                    item,
                    900,
                    750,
                    600,
                    480,
                    240
                ]
            }
        ]
    };
    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
     
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();
// 销售统计模块
(function () {
     
    // (1)准备数据
    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]
        ]
    };
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".line"));
    // 2. 指定配置和数据
    var option = {
     
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
     
            // 通过坐标轴来触发
            trigger: "axis"
        },
        legend: {
     
            // 距离容器10%
            right: "10%",
            // 修饰图例文字的颜色
            textStyle: {
     
                color: "#4c9bfd"
            }
            // 如果series 里面设置了name，此时图例组件的data可以省略
            // data: ["邮件营销", "联盟广告"]
        },
        grid: {
     
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true,
            borderColor: "#012f4a",
            containLabel: true
        },

        xAxis: {
     
            type: "category",
            boundaryGap: false,
            data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月"
            ],
            // 去除刻度
            axisTick: {
     
                show: false
            },
            // 修饰刻度标签的颜色
            axisLabel: {
     
                color: "#4c9bfd"
            },
            // 去除x坐标轴的颜色
            axisLine: {
     
                show: false
            }
        },
        yAxis: {
     
            type: "value",
            // 去除刻度
            axisTick: {
     
                show: false
            },
            // 修饰刻度标签的颜色
            axisLabel: {
     
                color: "#4c9bfd"
            },
            // 修改y轴分割线的颜色
            splitLine: {
     
                lineStyle: {
     
                    color: "#012f4a"
                }
            }
        },
        series: [
            {
     
                name: "预期销售额",
                type: "line",
                stack: "总量",
                // 是否让线条圆滑显示
                smooth: true,
                data: data.year[0]
            },
            {
     
                name: "实际销售额",
                type: "line",
                stack: "总量",
                smooth: true,
                data: data.year[1]
            }
        ]
    };
    // 3. 把配置和数据给实例对象
    myChart.setOption(option);
    // 4. tab切换效果制作
    // (2) 点击切换效果
    $(".sales .caption").on("click", "a", function () {
     
        // 此时要注意这个索引号的问题
        index = $(this).index() - 1;
        // 点击当前a 高亮显示 调用active
        $(this)
            .addClass("active")
            .siblings("a")
            .removeClass("active");
        // 拿到当前a 的自定义属性值
        // console.log(this.dataset.type);
        // 根据拿到的值 去找数据
        // console.log(data.year);
        // console.log(data["year"]);
        // console.log(data[this.dataset.type]);
        var arr = data[this.dataset.type];
        // console.log(arr);
        // 根据拿到的数据重新渲染 series里面的data值
        option.series[0].data = arr[0];
        option.series[1].data = arr[1];
        // 重新把配置好的新数据给实例对象
        myChart.setOption(option);
    });
    // 5. tab栏自动切换效果
    //  开启定时器每隔3s，自动让a触发点击事件即可
    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();
    });
})();
// 销售渠道模块 雷达图
(function () {
     
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".radar"));
    // 2.指定配置

    var option = {
     
        tooltip: {
     
            show: true,
            // 控制提示框组件的显示位置
            position: ["60%", "10%"]
        },
        radar: {
     
            indicator: [
                {
     name: "机场", max: 100},
                {
     name: "商场", max: 100},
                {
     name: "火车站", max: 100},
                {
     name: "汽车站", max: 100},
                {
     name: "地铁", max: 100}
            ],
            // 修改雷达图的大小
            radius: "65%",
            shape: "circle",
            // 分割的圆圈个数
            splitNumber: 4,
            name: {
     
                // 修饰雷达图文字的颜色
                textStyle: {
     
                    color: "#4c9bfd"
                }
            },
            // 分割的圆圈线条的样式
            splitLine: {
     
                lineStyle: {
     
                    color: "rgba(255,255,255, 0.5)"
                }
            },
            splitArea: {
     
                show: false
            },
            // 坐标轴的线修改为白色半透明
            axisLine: {
     
                lineStyle: {
     
                    color: "rgba(255, 255, 255, 0.5)"
                }
            }
        },
        series: [
            {
     
                name: "北京",
                type: "radar",
                // 填充区域的线条颜色
                lineStyle: {
     
                    normal: {
     
                        color: "#fff",
                        width: 1,
                        opacity: 0.5
                    }
                },
                data: [[90, 19, 56, 11, 34]],
                // 设置图形标记 （拐点）
                symbol: "circle",
                // 这个是设置小圆点大小
                symbolSize: 5,
                // 设置小圆点颜色
                itemStyle: {
     
                    color: "#fff"
                },
                // 让小圆点显示数据
                label: {
     
                    show: true,
                    fontSize: 10
                },
                // 修饰我们区域填充的背景颜色
                areaStyle: {
     
                    color: "rgba(238, 197, 102, 0.6)"
                }
            }
        ]
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
     
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();
// 销售模块 饼形图 半圆形 设置方式
(function () {
     
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".gauge"));
    // 2. 指定数据和配置
    var option = {
     
        series: [
            {
     
                name: "销售进度",
                type: "pie",
                radius: ["130%", "150%"],
                // 移动下位置  套住50%文字
                center: ["48%", "80%"],
                //是否启用防止标签重叠策略
                // avoidLabelOverlap: false,
                labelLine: {
     
                    normal: {
     
                        show: false
                    }
                },
                // 饼形图的起始角度为 180， 注意不是旋转角度
                startAngle: 180,
                // 鼠标经过不需要放大偏移图形
                hoverOffset: 0,
                data: [
                    {
     
                        value: 100,
                        itemStyle: {
     
                            // 颜色渐变#00c9e0->#005fc1
                            color: new echarts.graphic.LinearGradient(
                                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
     offset: 0, color: "#00c9e0"}, // 0 起始颜色
                                    {
     offset: 1, color: "#005fc1"} // 1 结束颜色
                                ]
                            )
                        }
                    },
                    {
     
                        value: 100,
                        itemStyle: {
     
                            color: "#12274d"
                        }
                    },
                    {
     
                        value: 200,
                        itemStyle: {
     
                            color: "transparent"
                        }
                    }
                ]
            }
        ]
    };
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
     
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();
// 全国热榜模块
(function () {
     
    // 1. 准备相关数据
    var hotData = [
        {
     
            city: "北京", // 城市
            sales: "25, 179", // 销售额
            flag: true, //  上升还是下降
            brands: [
                //  品牌种类数据
                {
     name: "可爱多", num: "9,086", flag: true},
                {
     name: "娃哈哈", num: "8,341", flag: true},
                {
     name: "喜之郎", num: "7,407", flag: false},
                {
     name: "八喜", num: "6,080", flag: false},
                {
     name: "小洋人", num: "6,724", flag: false},
                {
     name: "好多鱼", num: "2,170", flag: true}
            ]
        },
        {
     
            city: "河北",
            sales: "23,252",
            flag: false,
            brands: [
                {
     name: "可爱多", num: "3,457", flag: false},
                {
     name: "娃哈哈", num: "2,124", flag: true},
                {
     name: "喜之郎", num: "8,907", flag: false},
                {
     name: "八喜", num: "6,080", flag: true},
                {
     name: "小洋人", num: "1,724", flag: false},
                {
     name: "好多鱼", num: "1,170", flag: false}
            ]
        },
        {
     
            city: "上海",
            sales: "20,760",
            flag: true,
            brands: [
                {
     name: "可爱多", num: "2,345", flag: true},
                {
     name: "娃哈哈", num: "7,109", flag: true},
                {
     name: "喜之郎", num: "3,701", flag: false},
                {
     name: "八喜", num: "6,080", flag: false},
                {
     name: "小洋人", num: "2,724", flag: false},
                {
     name: "好多鱼", num: "2,998", flag: true}
            ]
        },
        {
     
            city: "江苏",
            sales: "23,252",
            flag: false,
            brands: [
                {
     name: "可爱多", num: "2,156", flag: false},
                {
     name: "娃哈哈", num: "2,456", flag: true},
                {
     name: "喜之郎", num: "9,737", flag: true},
                {
     name: "八喜", num: "2,080", flag: true},
                {
     name: "小洋人", num: "8,724", flag: true},
                {
     name: "好多鱼", num: "1,770", flag: false}
            ]
        },
        {
     
            city: "山东",
            sales: "20,760",
            flag: true,
            brands: [
                {
     name: "可爱多", num: "9,567", flag: true},
                {
     name: "娃哈哈", num: "2,345", flag: false},
                {
     name: "喜之郎", num: "9,037", flag: false},
                {
     name: "八喜", num: "1,080", flag: true},
                {
     name: "小洋人", num: "4,724", flag: false},
                {
     name: "好多鱼", num: "9,999", flag: true}
            ]
        }
    ];
    //  2. 根据数据渲染各省热销 sup 模块内容
    // (1) 遍历 hotData对象
    var supHTML = "";
    $.each(hotData, function (index, item) {
     
        // console.log(item);
        supHTML += `${
       item.city} ${
       item.sales} ${
       item.flag ? "icon-up" : "icon-down"}>
`;
    });
    // 把生成的5个小li字符串给 sub dom盒子
    $(".sup").html(supHTML);
    // 3. 当鼠标进入 tab 的时候
    // 鼠标经过当前的小li要高亮显示
    $(".province .sup").on("mouseenter", "li", function () {
     
        index = $(this).index();
        render($(this));
    });

    // 声明一个函数 里面设置sup当前小li高亮还有 对应的品牌对象渲染
    // 这个函数需要传递当前元素进去
    function render(currentEle) {
     
        currentEle
            .addClass("active")
            .siblings()
            .removeClass();
        // 拿到当前城市的品牌对象
        // console.log($(this).index());
        // 可以通过hotData[$(this).index()] 得到当前的城市
        // console.log(hotData[$(this).index()]);
        // 我们可以通过hotData[$(this).index()].brands 拿到的是城市对象的品牌种类
        // console.log(hotData[$(this).index()].brands);
        // 开始遍历品牌数组
        var subHTML = "";
        $.each(hotData[currentEle.index()].brands, function (index, item) {
     
            // 是对应城市的每一个品牌对象
            // console.log(item);
            subHTML += `${
       item.name} ${
       item.num}${
       item.flag ? "icon-up" : "icon-down"}
    >
`;
        });
        // 把生成的6个小li字符串给 sub dom盒子
        $(".sub").html(subHTML);
    }

    // 4. 默认把第一个小li处于鼠标经过状态
    var lis = $(".province .sup li");
    lis.eq(0).mouseenter();
    // 5 开启定时器
    var index = 0;
    var timer = setInterval(function () {
     
        index++;
        if (index >= 5) index = 0;
        // lis.eq(index).mouseenter();
        render(lis.eq(index));
    }, 2000);

    $(".province .sup").hover(
        // 鼠标经过事件
        function () {
     
            clearInterval(timer);
        },
        // 鼠标离开事件
        function () {
     
            clearInterval(timer);
            timer = setInterval(function () {
     
                index++;
                if (index >= 5) index = 0;
                // lis.eq(index).mouseenter();
                render(lis.eq(index));
            }, 2000);
        }
    );
})();

flexible.js

(function flexible(window, document) {
     
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1

    // adjust body font size
    function setBodyFontSize() {
     
        if (document.body) {
     
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
     
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }

    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
     
        var rem = docEl.clientWidth / 20
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
     
        if (e.persisted) {
     
            setRemUnit()
        }
    })

    // detect 0.5px supports
    if (dpr >= 2) {
     
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
     
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))

myMap.js

(function () {
     
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".geo"));
    // 2. 指定配置和数据
    var geoCoordMap = {
     
        上海: [121.4648, 31.2891],
        东莞: [113.8953, 22.901],
        东营: [118.7073, 37.5513],
        中山: [113.4229, 22.478],
        临汾: [111.4783, 36.1615],
        临沂: [118.3118, 35.2936],
        丹东: [124.541, 40.4242],
        丽水: [119.5642, 28.1854],
        乌鲁木齐: [87.9236, 43.5883],
        佛山: [112.8955, 23.1097],
        保定: [115.0488, 39.0948],
        兰州: [103.5901, 36.3043],
        包头: [110.3467, 41.4899],
        北京: [116.4551, 40.2539],
        北海: [109.314, 21.6211],
        南京: [118.8062, 31.9208],
        南宁: [108.479, 23.1152],
        南昌: [116.0046, 28.6633],
        南通: [121.1023, 32.1625],
        厦门: [118.1689, 24.6478],
        台州: [121.1353, 28.6688],
        合肥: [117.29, 32.0581],
        呼和浩特: [111.4124, 40.4901],
        咸阳: [108.4131, 34.8706],
        哈尔滨: [127.9688, 45.368],
        唐山: [118.4766, 39.6826],
        嘉兴: [120.9155, 30.6354],
        大同: [113.7854, 39.8035],
        大连: [122.2229, 39.4409],
        天津: [117.4219, 39.4189],
        太原: [112.3352, 37.9413],
        威海: [121.9482, 37.1393],
        宁波: [121.5967, 29.6466],
        宝鸡: [107.1826, 34.3433],
        宿迁: [118.5535, 33.7775],
        常州: [119.4543, 31.5582],
        广州: [113.5107, 23.2196],
        廊坊: [116.521, 39.0509],
        延安: [109.1052, 36.4252],
        张家口: [115.1477, 40.8527],
        徐州: [117.5208, 34.3268],
        德州: [116.6858, 37.2107],
        惠州: [114.6204, 23.1647],
        成都: [103.9526, 30.7617],
        扬州: [119.4653, 32.8162],
        承德: [117.5757, 41.4075],
        拉萨: [91.1865, 30.1465],
        无锡: [120.3442, 31.5527],
        日照: [119.2786, 35.5023],
        昆明: [102.9199, 25.4663],
        杭州: [119.5313, 29.8773],
        枣庄: [117.323, 34.8926],
        柳州: [109.3799, 24.9774],
        株洲: [113.5327, 27.0319],
        武汉: [114.3896, 30.6628],
        汕头: [117.1692, 23.3405],
        江门: [112.6318, 22.1484],
        沈阳: [123.1238, 42.1216],
        沧州: [116.8286, 38.2104],
        河源: [114.917, 23.9722],
        泉州: [118.3228, 25.1147],
        泰安: [117.0264, 36.0516],
        泰州: [120.0586, 32.5525],
        济南: [117.1582, 36.8701],
        济宁: [116.8286, 35.3375],
        海口: [110.3893, 19.8516],
        淄博: [118.0371, 36.6064],
        淮安: [118.927, 33.4039],
        深圳: [114.5435, 22.5439],
        清远: [112.9175, 24.3292],
        温州: [120.498, 27.8119],
        渭南: [109.7864, 35.0299],
        湖州: [119.8608, 30.7782],
        湘潭: [112.5439, 27.7075],
        滨州: [117.8174, 37.4963],
        潍坊: [119.0918, 36.524],
        烟台: [120.7397, 37.5128],
        玉溪: [101.9312, 23.8898],
        珠海: [113.7305, 22.1155],
        盐城: [120.2234, 33.5577],
        盘锦: [121.9482, 41.0449],
        石家庄: [114.4995, 38.1006],
        福州: [119.4543, 25.9222],
        秦皇岛: [119.2126, 40.0232],
        绍兴: [120.564, 29.7565],
        聊城: [115.9167, 36.4032],
        肇庆: [112.1265, 23.5822],
        舟山: [122.2559, 30.2234],
        苏州: [120.6519, 31.3989],
        莱芜: [117.6526, 36.2714],
        菏泽: [115.6201, 35.2057],
        营口: [122.4316, 40.4297],
        葫芦岛: [120.1575, 40.578],
        衡水: [115.8838, 37.7161],
        衢州: [118.6853, 28.8666],
        西宁: [101.4038, 36.8207],
        西安: [109.1162, 34.2004],
        贵阳: [106.6992, 26.7682],
        连云港: [119.1248, 34.552],
        邢台: [114.8071, 37.2821],
        邯郸: [114.4775, 36.535],
        郑州: [113.4668, 34.6234],
        鄂尔多斯: [108.9734, 39.2487],
        重庆: [107.7539, 30.1904],
        金华: [120.0037, 29.1028],
        铜川: [109.0393, 35.1947],
        银川: [106.3586, 38.1775],
        镇江: [119.4763, 31.9702],
        长春: [125.8154, 44.2584],
        长沙: [113.0823, 28.2568],
        长治: [112.8625, 36.4746],
        阳泉: [113.4778, 38.0951],
        青岛: [120.4651, 36.3373],
        韶关: [113.7964, 24.7028]
    };

    var XAData = [
        [{
     name: "西安"}, {
     name: "北京", value: 100}],
        [{
     name: "西安"}, {
     name: "上海", value: 100}],
        [{
     name: "西安"}, {
     name: "广州", value: 100}],
        [{
     name: "西安"}, {
     name: "西宁", value: 100}],
        [{
     name: "西安"}, {
     name: "拉萨", value: 100}]
    ];

    var XNData = [
        [{
     name: "西宁"}, {
     name: "北京", value: 100}],
        [{
     name: "西宁"}, {
     name: "上海", value: 100}],
        [{
     name: "西宁"}, {
     name: "广州", value: 100}],
        [{
     name: "西宁"}, {
     name: "西安", value: 100}],
        [{
     name: "西宁"}, {
     name: "银川", value: 100}]
    ];

    var YCData = [
        [{
     name: "拉萨"}, {
     name: "北京", value: 100}],
        [{
     name: "拉萨"}, {
     name: "潍坊", value: 100}],
        [{
     name: "拉萨"}, {
     name: "哈尔滨", value: 100}]
    ];

    var planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
    //var planePath = 'arrow';
    var convertData = function (data) {
     
        var res = [];
        for (var i = 0; i < data.length; i++) {
     
            var dataItem = data[i];

            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
     
                res.push({
     
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord],
                    value: dataItem[1].value
                });
            }
        }
        return res;
    };

    var color = ["#a6c84c", "#ffa022", "#46bee9"]; //航线的颜色
    var series = [];
    [
        ["西安", XAData],
        ["西宁", XNData],
        ["银川", YCData]
    ].forEach(function (item, i) {
     
        series.push(
            {
     
                name: item[0] + " Top3",
                type: "lines",
                zlevel: 1,
                effect: {
     
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: "red", //arrow箭头的颜色
                    symbolSize: 3
                },
                lineStyle: {
     
                    normal: {
     
                        color: color[i],
                        width: 0,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
     
                name: item[0] + " Top3",
                type: "lines",
                zlevel: 2,
                symbol: ["none", "arrow"],
                symbolSize: 10,
                effect: {
     
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15
                },
                lineStyle: {
     
                    normal: {
     
                        color: color[i],
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
     
                name: item[0] + " Top3",
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
     
                    brushType: "stroke"
                },
                label: {
     
                    normal: {
     
                        show: true,
                        position: "right",
                        formatter: "{b}"
                    }
                },
                symbolSize: function (val) {
     
                    return val[2] / 8;
                },
                itemStyle: {
     
                    normal: {
     
                        color: color[i]
                    },
                    emphasis: {
     
                        areaColor: "#2B91B7"
                    }
                },
                data: item[1].map(function (dataItem) {
     
                    return {
     
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            }
        );
    });
    var option = {
     
        tooltip: {
     
            trigger: "item",
            formatter: function (params, ticket, callback) {
     
                if (params.seriesType == "effectScatter") {
     
                    return "线路：" + params.data.name + "" + params.data.value[2];
                } else if (params.seriesType == "lines") {
     
                    return (
                        params.data.fromName +
                        ">" +
                        params.data.toName +
                        "
" +
                        params.data.value
                    );
                } else {
     
                    return params.name;
                }
            }
        },

        geo: {
     
            map: "china",
            label: {
     
                emphasis: {
     
                    show: true,
                    color: "#fff"
                }
            },
            roam: true,
            //   放大我们的地图
            zoom: 1.2,
            itemStyle: {
     
                normal: {
     
                    areaColor: "#142957",
                    borderColor: "#195BB9",
                    borderWidth: 1
                },
                emphasis: {
     
                    areaColor: "#2B91B7"
                }
            }
        },
        series: series
    };
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function () {
     
        myChart.resize();
    });
})();

china.js

自行下载

jQuery.min.js

自行下载

echarts.min.js

自行下载

images

bg.jpg

border.jpg

border.png

line.png

logo.png

rect.png

你可能感兴趣的:(前端,可视化,数据可视化,前端,ECharts)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
Pyecharts数据可视化大屏：打造沉浸式数据分析体验我的运维人生信息可视化数据分析数据挖掘运维开发技术共享
Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
Google earth studio 简介陟彼高冈yu 旅游
GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
pyecharts——绘制柱形图折线图 2224070247 信息可视化 python java 数据可视化
一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据
高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts 信息可视化数据分析
ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
nosql数据库技术与应用知识点皆过客，揽星河 NoSQL nosql 数据库大数据数据分析数据结构非关系型数据库
Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
JAVA·一个简单的登录窗口 MortalTom java 开发语言学习
文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
GenVisR 基因组数据可视化实战(三) 11的雾
3.genCov画每个突变位点附件的coverage，跟igv有点相似。这个操作起来很复杂，但是图还是挺有用的。可以考虑。由于我的referencegenomebuild是hg38BiocManager::install(c("TxDb.Hsapiens.UCSC.hg38.knownGene","BSgenome.Hsapiens.UCSC.hg38"))library(TxDb.Hsapien
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
Python数据分析与可视化 jun778895 python 数据分析开发语言
Python数据分析与可视化是一个涉及数据处理、分析和以图形化方式展示数据的过程，它对于数据科学家、分析师以及任何需要从数据中提取洞察力的专业人员来说至关重要。以下将详细探讨Python在数据分析与可视化方面的应用，包括常用的库、数据处理流程、可视化技巧以及实际应用案例。一、Python数据分析与可视化的重要性数据可视化是将数据以图形或图像的形式表示出来，以便人们能够更直观地理解数据背后的信息和规
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
高仿一个echarts饼图街角小林2
开头饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。用canvas实现一个饼图很简单，所以
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
python之pyecharts制作可视化数据大屏 cesske 大数据
文章目录前言一、安装Pyecharts二、创建Pyecharts图表三、设计大屏布局四、实时数据更新五、部署和展示总结前言使用Pyecharts制作可视化数据大屏是一个复杂但有趣的过程，因为Pyecharts本身是一个用于生成Echarts图表的Python库，而Echarts是由百度开发的一个开源可视化库，支持丰富的图表类型和高度自定义。然而，Pyecharts本身并不直接提供“大屏”的解决方案
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
Linux的Initrd机制被触发 linux
Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
maven本地仓库路径修改 bitcarter maven
默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法： 1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml 2.找到
XSD和XML中的命名空间 darrenzhu xml xsd schema namespace 命名空间
http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn
Java 求素数运算周凡杨 java 算法素数
网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。第一种：原理: 6N(+-)1法任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)
java 单例模式 g21121 java
想必单例模式大家都不会陌生，有如下两种方式来实现单例模式： class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }
Linux下Mysql源码安装 510888780 mysql
1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录解压缩下载的源码包，目录结构，特殊指定的目录除外：
32位和64位操作系统墙头上一根草 32位和64位操作系统
32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了
我的spring学习笔记10-轻量级_Spring框架 aijuans Spring 3
一、问题提问： → 请简单介绍一下什么是轻量级？轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。
mongodb 环境搭建及简单CURD antlove Web Install curd NoSQL mongo
一搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
数据字典和动态视图百合不是茶 oracle 数据字典动态视图系统和对象权限
数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭数据字典中包含数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一
多线程编程一般规则 bijian1013 java thread 多线程 java多线程
如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
将文件或目录拷贝到另一个Linux系统的命令scp bijian1013 linux unix scp
一.功能说明 scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下： scp 远程用户名@IP地址：文件的绝对路径
【持久化框架MyBatis3五】MyBatis3一对多关联查询 bit1129 Mybatis3
以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。示例数据：地址表： CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR
cookie状态判断引发的查找问题 bitcarter form cgi
先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题）问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没
通过Nginx,Tomcat访问日志(access log)记录请求耗时 ronin47
一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
java-67- n个骰子的点数。把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 bylijinnan java
public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati
看别人的博客，觉得心情很好 Cb123456 博客心情
以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客: 职业规划: http://www.iteye.com/blogs/subjects/zhiyeguihua android学习: 1.http://byandby.i
[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析 comsci 工作流
我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到
JS常用的事件及方法 cwqcwqmax9 js
事件描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
正则表达式验证日期格式 dashuaifu 正则表达式 IT其它 java其它
正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu
Yii CModel.rules() 方法、validate预定义完整列表、以及说说验证 dcj3sjt126com yii
public array rules () {return} array 要调用 validate() 时应用的有效性规则。返回属性的有效性规则。声明验证规则，应重写此方法。每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
UITextAttributeTextColor = deprecated in iOS 7.0 dcj3sjt126com ios
In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins
判断一个数是质数的几种方法 EmmaZhao Math python
质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以
SpringSecurity工作原理小解读坏我一锅粥 SpringSecurity
SecurityContextPersistenceFilter ConcurrentSessionFilter WebAsyncManagerIntegrationFilter HeaderWriterFilter CsrfFilter LogoutFilter Use
JS实现自适应宽度的Tag切换 ini JavaScript html Web css html5
效果体验：http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
Hbase Rest API : 数据查询 kane_xie REST hbase
hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。启动命令：./bin/hbase rest s
JQuery实现鼠标拖动元素移动位置（源码+注释）明子健 jquery js 源码拖动鼠标
欢迎讨论指正！ print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l
Postgresql 连表更新字段语法 update qifeifei PostgreSQL
下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1.
将redis,memcache结合使用的方案? tcrct redis cache
公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi
开发中遇到的诡异的bug wudixiaotie bug
今天我们服务器组遇到个问题：我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key

【05】数据可视化：02-ECharts数据可视化案例_立可得智能看板

文章目录

DAY01-可视化项目

01-项目介绍

02-使用技术

03-Echarts-介绍

04-Echarts-体验

初始化echarts实例对象

05-Echarts-基础配置

06-REM适配

07-基础布局

08-边框图片

09-公用面板样式

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

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

12-监控区域-效果

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

14-点位区域-饼图

1. HTML引入图表

2. 定制需求

15-地图区域 (map) -预留布局

16-用户统计 (users) -布局

17-用户统计 (users) -柱状图

18-订单区域（order）-布局

18-订单区域（order）-效果 ( 课后作业 )

19-销售统计( sales )-布局

19-销售统计( sales )-线形图

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

20-渠道区域&销售进度-布局

21-渠道分布(channel)-雷达图

22-销售进度 (quarter) -饼状图

23-热销排行（top）-布局

23-热销排行（top）-效果

24-Echarts-社区介绍

25-Echarts-map使用（扩展）

26-总结

源代码

index.html

index.css

icomoon.css

index.js

flexible.js

myMap.js

china.js

jQuery.min.js

echarts.min.js

images

你可能感兴趣的:(前端,可视化,数据可视化,前端,ECharts)