W.T.的博客

Every day to be a little better

数据可视化项目-ECharts

发表于 更新于 分类于
本文字数： 46k 阅读时长 ≈ 42 分钟
数据可视化可以把数据从冰冷的数字转换成图形
ECharts官网地址：https://echarts.apache.org/

1. 基础认知

1.1. 常见的数据可视化库

  • D3.js：目前WEB端评价最高的JavaScript可视化工具库（入手难）
  • ECharts.js：百度出品的一个开源JavaScript数据可视化库
  • Highcharts.js：国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
  • AntV：蚂蚁金服全新一代数据可视化解决方案

1.2. ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）。

ECharts官网地址：https://echarts.apache.org/

官网教程快速上手ECharts：https://echarts.apache.org/handbook/zh/get-started/

1.3. ECharts使用五步曲

  1. 下载并引入echarts.js文件；（图表依赖这个js库）

    https://echarts.apache.org/zh/download.html

  2. 准备一个具备大小的DOM容器；（生成的图表会放入这个容器内）

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <div class="box"></div>

  3. 初始化echarts实例对象；（实例化echarts对象）

    1
    var myChart = echarts.init(document.querySelector('.box'));

  4. 指定配置项和数据(option)；（根据具体需求修改配置选项）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var option = {
        title: {
        	text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
        	data: ['销量']
        },
        xAxis: {
        	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

  5. 将配置项设置给echarts实例对象；（让echarts对象根据修改好的配置生效）

    1
    myChart.setOption(option);

  6. 运行

1.4. Echarts-基础配置 option

https://echarts.apache.org/zh/option.html#title

1.4.1. title 标题

标题组件，包含主标题和副标题

1
2
3
4
5
6
title:{
    //主标题
  	text: '',
    //副标题
    subtext: ''
}

1.4.2. legend 图例组件

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示

1
2
3
4
legend: {
      //图例的数据数组。每一项代表一个系列的 name
    	data: ['销量']
}

legend.data

1
2
3
4
5
6
7
8
9
data: [{
    name: '系列1',
    // 强制设置图形为圆。
    icon: 'circle',
    // 设置文本为红色
    textStyle: {
        color: 'red'
    }
}]

1.4.3. tooltip 提示框组件

1
2
3
4
tooltip:{
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c} ({d}%)'
}

1.4.3.1. trigger触发类型

可选：

  • 'item'

    数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用

  • 'axis'

    坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用

  • 'none'

    什么都不触发

1.4.3.2. formatter

a - series系列图标名称

b - series数据名称data里面的name

c - series数据名称data里面的value

d - 当前数据/总数据的比例

1.4.4. grid 内绘图网格

1
2
3
4
5
6
7
grid:{
  left: 5%,
  top: 3%,
  bottom: 3%,
  right: 4%,
  containLabel: true
}

grid组件离容器四侧的距离值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

containLabel ：grid 区域是否包含坐标轴的刻度标签

1.4.5. color 调色盘颜色列表

1
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

1.4.6. xAxis x 轴

1
2
3
4
5
6
xAxis: {
  type: 'category',
  //类目数据，在类目轴（type:'category'）中有效
  data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
  boundaryGap: true
}

1.4.6.1. type 坐标轴类型

可选：

  • 'value' 数值轴，适用于连续数据。
  • 'category' 类目轴，适用于离散的类目数据。
  • 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
  • 'log' 对数轴。适用于对数数据。

1.4.6.2. boundaryGap坐标轴两边留白策略

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

非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max后无效。 示例：

1
boundaryGap: ['20%', '20%']

1.4.7. yAxis y 轴

1
2
3
yAxis:{
  type: 'category'
}

type 坐标轴类型

可选：

  • 'value' 数值轴，适用于连续数据。
  • 'category' 类目轴，适用于离散的类目数据。
  • 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
  • 'log' 对数轴。适用于对数数据。

1.4.8. series 系列列表

每个系列通过 type 决定自己的图表类型

1.4.8.1. type

类型图片

1.4.8.2. name

系列名称

1.4.8.3. stack

数据堆叠。如果设置相同值，数据堆叠。

如果指定不同值或者去掉这个属性，则不会发生数据堆叠

1.4.9. 柱形图线条总结

2. 项目

flexible.js+rem单位+flex布局

2.1. 整体代码

https://www.aliyundrive.com/s/D3b8wKy2rqe

2.2. 适配方案

将屏幕分为24份 flexible.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(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 / 24
  function setRemUnit () {
    var rem = docEl.clientWidth / 24
    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))

修改vscode的基准值

插件 -> 配置按钮 -> 配置扩展设置 -> Root Font Size

屏幕宽度约束为1024px~1920px

1
2
3
4
5
6
7
8
9
10
@media screen and (max-width: 1024px) {
    html{
        font-size: 42.66px !important;
    }
}
@media screen and (min-width: 1920px) {
    html{
        font-size: 80px !important;
    }
}

2.3. 基础布局

2.3.1. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能看板</title>
    <script src="js/flexible.js"></script>
    <script src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        
    </style>
</head>
<body>
    <!-- 父容器 -->
    <div class="viewport">
        <!-- 3列 -->
        <div class="column">1</div>
        <div class="column">2</div>
        <div class="column">3</div>
    </div>
    <script>
        
    </script>
    </script>
</body>
</html>

2.3.2. common.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 清除倾斜 */
em,
i{
    font-style: normal;
}

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

/* 图片无边框，水平对齐 */
img{
    border: 0;
    vertical-align: middle;
}

/* 按钮 */
button{
    cursor: pointer;
}

/* 链接下划线 */
a{
    text-decoration: none;
    color: #333;
}

/* 字体不加粗 */
h4{
    font-weight: normal;
}

body{
    /* background: url(../images/back.jpeg) no-repeat 0 0/cover; */
    background-color: #101129;
}

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

2.3.3. index.css

效果图 1920x1078

viewport主体容器：

  • 限制最小宽度1024px，最大宽度1920px，最小高度780px
  • 居中显示
  • logo.png作为背景图，在容器内显示
  • 内间距 88px 20px 0

column 列容器

  • 分三列，占比 3:4:3
  • 中间容器间距 32px 20px 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 父容器 */
.viewport{
    min-width: 1024px;
    max-width: 1920px;
    display: flex;
    justify-content: center;
    background: url(../images/logo.png) no-repeat 0 0/contain;
    min-height: 780px;
    margin: 0 auto;
    padding: 1.1rem .25rem 0;
}

.viewport .column{
    background-color: pink;
}

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

2.4. 边框图片

2.4.1. 切片原理

把四个角切出去，中间部分铺排，拉伸或环绕

2.4.2. 属性

属性 描述
border-image-source 用在边框的图片路径
border-image-slice 图片边框内偏移，裁剪尺寸，不加单位，上右下左顺序
border-image-width 图片边框宽度，加单位，不会挤压内容
border-image-repeat 图像边框是否应平铺(repeat)，铺满(round)，拉伸(stretch)，默认拉伸

2.4.3. 公共面板样式

1
2
3
4
5
6
7
8
9
10
11
12
.panel{
  	position: relative;
    border: 15px solid transparent;
    border-width: .6375rem .475rem .25rem 1.65rem;
    border-image: url(../images/border.png);
    border-image-slice: 51 38 20 132;
  	margin-bottom: .25rem;
}
.panel h3{
    font-size: .25rem;
    color: #fff;
}

2.4.4. 边框存在导致内容无法顶格显示

添加一个固定定位的盒子，扩大内容

内部容器 内边距 上下24px 左右36px

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
<div class="panel">
    <div class="inner">123</div>
</div>
*/
.inner{
    position: absolute;
    top: -.6375rem;
    right: -.475rem;
    bottom: -.25rem;
    left: -1.65rem;
    padding: .3rem .45rem;
}

2.5. 概览 overview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 概览区域overview布局 -->
<div class="panel overview">
    <div class="content">
        <ul>
            <li>
                <h4>2,190</h4>
                <span><i class="icon-dot" style="color: #006cff;"></i>设备总数</span>
            </li>
            <li>
                <h4>190</h4>
                <span><i class="icon-dot" style="color: #6acca3;"></i>季度递增</span>
            </li>
            <li>
                <h4>3,001</h4>
                <span><i class="icon-dot" style="color: #2b5644;"></i>运营设备</span>
            </li>
            <li>
                <h4>108</h4>
                <span><i class="icon-dot" style="color: #ed3f35;"></i>异常设备</span>
            </li>
				</ul>
    </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 概览区域布局 */
.overview{
    height: 1.375rem;
}
.overview ul{
    display: flex;
    justify-content: space-between;
}
.overview h4{
    font-size: .35rem;
    color: #fff;
    margin: .06rem 0 .1rem;
}
.overview span{
    font-size: .2rem;
    color: #4c9bfd;
}

2.6. 监控区域 monitor

结构解释：

  • .tabs 标签选项，加上active激活选项，默认第一个选项激活
  • .content 切换内容 加上display显示内容，默认第一个内容激活

样式描述：

  • .inner

    内间距 24px 0

  • .tabs

    内间距 0 36px

    • a

      颜色 #1950c4

      内间距 0 27px

      字体 18px

    • 第一个a

      去除左侧内间距，右侧2px宽度边框 #00f2f1

    • 激活

      颜色 #fff

  • .content

    占满剩余高度 flex:1

    默认隐藏

  • .head

    行高1.05

    背景 rgba(255,255,255,.1)

    内间距 12px 36px

    颜色 #68d8fe

    字体大小 16px

  • row

    行高 1.05

    内间距 12px 36px

    颜色 #68d8ff

    字体大小 16px

    • .col-dot

      绝对定位

      左边 16px

      透明度 0 - 隐藏

    • 鼠标经过

      背景 rgba(255,255,255,.1)

      透明度 1

  • col

    宽度 80px 200px 80px

    第二个col 一行不换行 溢出 省略

2.6.1. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!-- 监控区域模块制作 -->
<div class="panel monitor">
    <div class="inner">
        <div class="tabs">
            <a href="javascript:;" data-index="0" class="active">故障设备监控</a>
            <a href="javascript:;" data-index="1">异常设备监控</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">20180701</span>
                        <span class="col">北京市昌平西路金燕龙写字楼</span>
                        <span class="col">1000001</span>
                        <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                        <span class="col">20190601</span>
                        <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                        <span class="col">1000002</span>
                        <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                        <span class="col">20190704</span>
                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                        <span class="col">1000003</span>
                        <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">20190701</span>
                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                        <span class="col">1000001</span>
                        <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                        <span class="col">20190701</span>
                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                        <span class="col">1000002</span>
                        <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                        <span class="col">20190703</span>
                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                        <span class="col">1000002</span>
                        <span class="icon-dot"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2.6.2. css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/* 监控 */
.monitor{
	height: 6rem;
}
.monitor .inner{
	padding: .3rem 0;
	display: flex;
	flex-direction: column;
}
.monitor .tabs{
	padding: 0 0.45rem;
	margin-bottom: 0.225rem;
}
.monitor .tabs a{
	color: #1950c4;
	font-size: 0.225rem;
	padding: 0 0.3375rem;
}
  
.monitor .tabs a:first-child{
	border-right: 0.025rem solid #00f2f1;
	padding-left: 0;
  }
  
.monitor .tabs a.active{
	color: #fff;
  }
.monitor .content{
	flex: 1;
	display: none;
	position: relative;
  }
.monitor .head{
	background: rgba(255, 255, 255, 0.1);
    font-size: .2rem;
    padding: 0.15rem 0.45rem;
	color: #68d8fe;
	display: flex;
	justify-content: space-between;
	line-height: 1.05;
  }
.monitor .col:nth-child(1) {
	width: 1rem;
  }
.monitor .col:nth-child(2) {
	width: 2.5rem;
	/* 不换行  一行省略*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }
.monitor .col:nth-child(3) {
	width: 1rem;
}

.monitor .marquee-view{
	position: absolute;
	top: 1rem;
	bottom: 0; 
	width: 100%; 
	overflow: hidden;
}
  
.monitor .row{
	line-height: 1.05;
    padding: 0.25rem 0.5rem;
	color: #61a8ff;
	font-size: .2rem;
	position: relative; 
	display: flex;
	justify-content: space-between;
}
.monitor .row:hover{
	color:#68d8ff;
	background: rgba(255, 255, 255, 0.1);
}
.monitor .row:hover .icon-dot{
	opacity: 1;
}
  
.monitor .icon-dot{
	position: absolute;
	left: 0.2rem;
	opacity: 0;
}
/* 动画 */
@keyframes row{
  0%{}
  100%{
    transform: translateY(-50%);
  }
}
/* 调用动画 */
.monitor .marquee {
  /* //infinite永久调用动画 */
  animation: row  10s linear infinite;
}
/*鼠标划入 停止动画  */
.monitor .marquee:hover {
  animation-play-state: paused;
}

2.6.3. js

1
2
3
4
5
6
7
8
9
$(function(){
    $(".monitor .tabs a").on("click",function(){
        var idx = $(this).index();
        // console.log(idx);
        $(this).addClass("active").siblings().removeClass("active");
        $(".monitor .content").eq(idx).show().siblings(".content").hide();

    });
});

2.7. 点位分布 point

2.7.1. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--点位-->
<div class="point panel">
    <div class="inner">
        <h3>点位分布统计</h3>
        <div class="chart">
            <div class="pie"></div>
            <div class="data">
                <div class="item">
                    <h4>320,11</h4>
                    <span>
                        <i class="icon-dot" style="color: #ed3f35"></i>
                        点位总数
                    </span>
                </div>
                <div class="item">
                    <h4>418</h4>
                    <span>
                        <i class="icon-dot" style="color: #eacf19"></i>
                        本月新增
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

2.7.2. css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* 点位 */
.point {
    height: 4.25rem;
  }
  .point .chart {
    display: flex;
    margin-top: .3rem;
    justify-content: space-between;
  }
  .point .pie {
    flex: 1;
    height: 3rem;
    margin-left: -0.125rem;
  }
  .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;
  }

2.7.3. js - 饼图

编辑数据 https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//点位-饼图
(function(){
    var echart = echarts.init($(".point .pie")[0]);
    option = {
        tooltip: {
          trigger: 'item',
          /*a - series系列图标名称
            b - series数据名称data里面的name
            c - series数据名称data里面的value
            d - 当前数据/总数据的比例
          */
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            // 图表名称  
            name: '点位统计',
            // 图表类型
            type: 'pie',
            // 饼图半径，第一项内圆，第二项外圆
            // 数据可以是百分比(基于DOM容器大小)，像素
            radius: ['10%', '70%'],
            // 图表中心位置left 75%,top 50%,距离图表DOM容器
            center: ['50%', '50%'],
            // 半径模式，radius/area
            roseType: 'radius',
            data: [
                { value: 30, name: 'rose 1' },
                { value: 28, name: 'rose 2' },
                { value: 26, name: 'rose 3' },
                { value: 24, name: 'rose 4' },
                { value: 22, name: 'rose 5' },
                { value: 20, name: 'rose 6' },
                { value: 18, name: 'rose 7' },
                { value: 16, name: 'rose 8' }
            ]
          }
        ]
      };
      echart.setOption(option);
})();

修改

  1. 颜色

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

  2. 图大小

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

  3. 数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    data: [
        { value: 20, name: '云南' },
        { value: 15, name: '北京' },
        { value: 15, name: '山东' },
        { value: 25, name: '河北' },
        { value: 20, name: '江苏' },
        { value: 35, name: '浙江' },
        { value: 30, name: '四川' },
        { value: 40, name: '湖北' }
    ]

  4. 字体

    https://echarts.apache.org/zh/option.html#series-pie.label

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    series: [
       {
      			//文字调整
            label: {
                fontSize: 10,
                backgroundColor: '#101129',
                color: '#fff'
            }
       }
     ]

  5. 引导线

    https://echarts.apache.org/zh/option.html#series-pie.labelLine

    1
    2
    3
    4
    5
    6
    7
    8
    9
    series: [
       {
      			//引导线
            labelLine: {
                length: 6,
                length2: 8
            }
       }
     ]

  6. 等比例缩放

    1
    2
    3
    4
    //图表等比例缩放   
    $(window).on("resize",function(){
      	echart.resize();
    });

完整js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//点位-饼图
(function(){
    var echart = echarts.init($(".point .pie")[0]);
    option = {
        tooltip: {
          trigger: 'item',
          /*a - series系列图标名称
            b - series数据名称data里面的name
            c - series数据名称data里面的value
            d - 当前数据/总数据的比例
          */
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            // 图表名称  
            name: '点位统计',
            // 图表类型
            type: 'pie',
            // 饼图半径，第一项内圆，第二项外圆
            // 数据可以是百分比(基于DOM容器大小)，像素
            radius: ['10%', '70%'],
            // 图表中心位置left 75%,top 50%,距离图表DOM容器
            center: ['50%', '50%'],
            // 半径模式，radius/area
            roseType: 'radius',
            data: [
                { value: 20, name: '云南' },
                { value: 15, name: '北京' },
                { value: 15, name: '山东' },
                { value: 25, name: '河北' },
                { value: 20, name: '江苏' },
                { value: 35, name: '浙江' },
                { value: 30, name: '四川' },
                { value: 40, name: '湖北' }
            ],
            //文字调整
            label: {
                fontSize: 10,
                backgroundColor: '#101129',
                color: '#fff'
            },
            //引导线
            labelLine: {
                length: 6,
                length2: 8
            },
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
          }
        ]
      };
      echart.setOption(option);
      //图表等比例缩放   
      $(window).on("resize",function(){
        echart.resize();
      });
      
})();

2.8. 地图模块

2.8.1. html

1
2
3
4
5
6
7
8
9
10
<!-- 地图模块 -->
<div class="map">
    <h3>
        <span class="icon-cube"></span>
        设备数据统计
    </h3>
    <div class="chart">
        <div class="geo"></div>
    </div>
</div>

2.8.2. css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 /* 地图 */
.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;
}
.map .icon-cube {
    color: #68d8fe;
}
.map .chart {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.05);
}
.map .geo {
    width: 100%;
    height: 100%;
}

2.8.3. js - https://www.isqqw.com/

选取相应样式

2.9. 用户模块

2.9.1. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- 用户模块 -->
<div class="users panel">
    <div class="inner">
        <h3>全国用户总量统计</h3>
        <div class="chart">
            <div class="bar"></div>
            <div class="data">
                <div class="item">
                    <h4>120,899</h4>
                    <span>
                        <i class="icon-dot" style="color: #ed3f35"></i>
                        用户总量
                    </span>
                </div>
                <div class="item">
                    <h4>248</h4>
                    <span>
                        <i class="icon-dot" style="color: #eacf19"></i>
                        本月新增
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

2.9.2. css 同点位分布

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* 点位 同 用户*/
.point,
.users {
    height: 4.25rem;
}
.point .chart,
.users .chart {
    display: flex;
    margin-top: .3rem;
    justify-content: space-between;
}
.point .pie,
.users .bar {
    flex: 1;
    height: 3rem;
    margin-left: -0.125rem;
}
.point .data,
.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;
}
.point h4,
.users h4 {
    margin-bottom: 0.15rem;
    font-size: .35rem;
    color: #fff;
}
.point span,
.users span {
    display: block;
    color: #4c9bfd;
    font-size: .2rem;
}

2.9.3. js - 柱状图

https://echarts.apache.org/examples/zh/editor.html?c=bar-tick-align

  1. 引入数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    // 用户-柱状图
    (function(){
        var echart = echarts.init($(".users .bar")[0]);
        option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220]
              }
            ]
          };
          echart.setOption(option);
    })();

  2. 修改柱颜色

    渐变色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 true，则该四个值是绝对的像素位置
    //顶部为(x0,y0)，靠近x轴的是(x2,y2)
    color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: '#00fffb' // 0% 处的颜色
        }, {
            offset: 1, color: '#0061ce' // 100% 处的颜色
        }],
        global: false 
    }

  3. 提示框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    tooltip: {
        //item-鼠标在柱体上提示
        //axis-鼠标在坐标系上就提示
        trigger: 'item'
        // ,
        // // 坐标轴指示器，坐标触发有效
        // axisPointer: {
        //     //默认为直线，line/shadow
        //     type: 'shadow'
        //  }
    }

  4. 网格定制 grid

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    grid: {
        left: '0%',
        right: '3%',
        bottom: '3%',
        top: '3%',
        //是否显示刻度
        containLabel: true,
        //是否显示直角坐标系网格 
        show: true,
        //直角坐标系网格边框颜色-四条边
        borderColor: 'rgba(0,240,255,.3)'
    }

  5. x轴调整

水平线 axisLine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
xAxis: [
  {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
        // false 柱体在刻度之间显示
        // true  柱体和刻度居中
        alignWithLabel: false,
        // 不显示刻度
        show: false
    },
    // x轴/y轴线条设置
    axisLine: {
        lineStyle: {
            color: 'rgba(0,240,255,.3)'
            // ,
            // 线粗细
            // width: 1,
            // 不想显示设为0
            // opacity: 0
        }
    }
  }
]
  1. y轴调整

splitLine 分割线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
yAxis: [
    {
      type: 'value',
      axisTick: {
          // 不显示刻度
          show: false
      },
      // 文字颜色
      axisLabel: {
          color: '#4c9bfd',
          fontSize: 10
      },
      // x轴/y轴线条设置
      axisLine: {
          lineStyle: {
              color: 'rgba(0,240,255,.3)'
          }
      },
      // 坐标轴分割线设置
      splitLine: {
          lineStyle: {
              color: 'rgba(0,240,255,.3)'
          }
      }
    }
  ]
  1. 数据修改

单个柱体可以修改样式

https://echarts.apache.org/zh/option.html#series-bar.data.emphasis

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var item = {
      name: '',
      value: 1200,
      // 柱子颜色
      itemStyle: {
          color: '#254065'
      },
      // 鼠标经过柱子高亮显示
      emphasis: {
          itemStyle: {
              color: '#254065'
          }
      },
      // 工具提示隐藏
      tooltip: {
          extraCssText: 'opacity:0'
      }
 };

xAxis: [
     data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆']
}
series: [
  {
     // 图表数据名称
     name: '用户统计',
     // 图表类型
     type: 'bar',
     // 柱子宽度
     barWidth: '60%',
     // 数据
     data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
  }
]

完整js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
// 用户-柱状图
(function(){
    var echart = echarts.init($(".users .bar")[0]);
    // 中间省略的数据  准备三项
    var item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子高亮显示
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        }
    };
    option = {
        //柱子顶部为(x,y)，靠近x轴的是(x2,y2)
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#00fffb' // 0% 处的颜色
            }, {
                offset: 1, color: '#0061ce' // 100% 处的颜色
            }],
            global: false 
        },
        tooltip: {
            //item-鼠标在柱体上提示
            //axis-鼠标在坐标系上就提示
            trigger: 'item'
            // ,
            // // 坐标轴指示器，坐标触发有效
            // axisPointer: {
            //     //默认为直线，line/shadow
            //     type: 'shadow'
            //  }
        },
        grid: {
          left: '0%',
          right: '3%',
          bottom: '3%',
          top: '3%',
          //是否显示刻度
          containLabel: true,
          //是否显示直角坐标系网格 
          show: true,
          //直角坐标系网格边框颜色-四条边
          borderColor: 'rgba(0,240,255,.3)'
        },
        xAxis: [
          {
            // 使用类目，必须有data属性
            type: 'category',
            // 使用 data 中的数据设为刻度文字
            data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
            axisTick: {
                // false 柱体在刻度之间显示
                // true  柱体和刻度居中
                alignWithLabel: false,
                // 不显示刻度
                show: false
            },
            // 文字颜色
            axisLabel: {
                color: '#4c9bfd',
                fontSize: 9
            },
            // x轴/y轴线条设置
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,240,255,.3)'
                    // ,
                    // 线粗细
                    // width: 1,
                    // 不想显示设为0
                    // opacity: 0
                }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
                // 不显示刻度
                show: false
            },
            // 文字颜色
            axisLabel: {
                color: '#4c9bfd',
                fontSize: 10
            },
            // x轴/y轴线条设置
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,240,255,.3)'
                }
            },
            // 坐标轴分割线设置
            splitLine: {
                lineStyle: {
                    color: 'rgba(0,240,255,.3)'
                }
            }
          }
        ],
        series: [
          {
             // 图表数据名称
             name: '用户统计',
             // 图表类型
             type: 'bar',
             // 柱子宽度
             barWidth: '60%',
            // 数据
            data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
          }
        ]
      };
      echart.setOption(option);
      //图表等比例缩放   
      $(window).on("resize",function(){
        echart.resize();
      });
})();

2.10. 订单模块

2.10.1. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 <!-- 订单 -->
 <div class="order panel">
    <div class="inner">
        <!-- 筛选 -->
        <div class="filter">
            <a href="javascript:;" data-key="day365" class="active">365天</a>
            <a href="javascript:;" data-key="day90">90天</a>
            <a href="javascript:;" data-key="day30">30天</a>
            <a href="javascript:;" data-key="day1">24小时</a>
        </div>
        <!-- 数据 -->
        <div class="data">
            <div class="item">
                <h4>20,301,987</h4>
                <span>
                    <i class="icon-dot" style="color: #ed3f35;"></i>
                    订单量
                </span>
            </div>
            <div class="item">
                <h4>99834</h4>
                <span>
                    <i class="icon-dot" style="color: #eacf19;"></i>
                    销售额(万元)
                </span>
            </div>
        </div>
    </div>
</div>

2.10.2. css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* 订单 */
.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.083rem 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: .35rem;
    color: #fff;
    margin-bottom: 0.125rem;
}
.order span {
    display: block;
    color: #4c9bfd;
    font-size: 0.2rem;
}

2.10.3. js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function(){
    var data={
        day365: ['20,301,987','99,834'],
        day90: ['201,978','2,348'],
        day30: ['301,987','834'],
        day1: ['51,987','434']
    };
    $(".order").on("click",".filter a",function(){
        idx = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            var key = $(this).attr("data-key");
            var value = data[key];
            $(".order .data .item h4").eq(0).text(value[0]);
            $(".order .data .item h4").eq(1).text(value[1]);
        });
        var idx = 0;
        var timer = setInterval(function(){
            idx++;
            if(idx==4){
                idx=0;
            }
            $(".order .filter a").eq(idx).click();
        },2000);
        $(".order").hover(function(){
            clearInterval(timer);
        },function(){
            clearInterval(timer);
            timer = setInterval(function(){
                idx++;
                if(idx==4){
                    idx=0;
                }
                $(".order .filter a").eq(idx).click();
            },2000);
        });
})();

2.11. 销售模块

2.11.1. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 销售额 -->
<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>

2.11.2. css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* 销售区域 */
.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%;
}

2.11.3. js - 折线图

https://echarts.apache.org/examples/zh/editor.html?c=line-stack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
// 销售 - 折线图
(function(){
    var echart = echarts.init($(".sales .line")[0]);
    option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
            // 如果series中设置了name，可以省略
          data: ['预期销售额', '实际销售额'],
          // 距离右侧10%  
          right: '10%',
          // 图例文字颜色
          textStyle: {
              color: '#4c9bfd',
              fontSize: 10
          }
        },
        grid: {
          left: '0',
          right: '3%',
          bottom: '3%',
          top: '20%',
          // 刻度
          containLabel: true,
          show: true,
          //边框
          borderColor: '#012f4a'
        },
        xAxis: {
          type: 'category',
          // 去除轴内间距
          boundaryGap: false,
          //数据
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          // 刻度线
          axisTick: {
              show: false
          },
          //文本颜色
          axisLabel: {
              color: '#4c9bfd',
              fontSize: 9
          },
          //轴线
          axisLine: {
              show: false
          }
        },
        yAxis: {
            type: 'value',
            // 刻度线
            axisTick: {
                show: false
            },
            //文本颜色
            axisLabel: {
                color: '#4c9bfd',
                fontSize: 9
            },
            //分隔线
            splitLine: {
                lineStyle: {
                    color: '#012f4a'
                }
            }
        },
        color: ['#00f2f1','#ed3f35'],
        series: [
          {
            name: '预期销售额',
            type: 'line',
            stack: 'Total',
            data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            // 折线圆滑显示
            smooth: true
          },
          {
            name: '实际销售额',
            type: 'line',
            stack: 'Total',
            data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            // 折线圆滑显示
            smooth: true
          }
        ]
    };
    echart.setOption(option);
    $(window).on("resize",function(){
       echart.resize();
    });

    //不同按钮数据不同
    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]
        ]
    }

    $('.sales ').on('click', '.caption a',function(){
				idx = $(this).index()-1;
        $(this).addClass("active").siblings("a").removeClass("active");
        //获取自定义属性值
        var key = $(this).attr("data-type");
        var value = data[key];
        // console.log(value);
        //将值设置到 图表中
        option.series[0].data=value[0];
        option.series[1].data=value[1];
        //再次调用才能在页面显示
        echart.setOption(option);
    });
    var idx = 0;
    var timer = setInterval(function(){

        idx++;
        if(idx==4){
            idx=0;
        }
        $(".sales .caption a").eq(idx).click();
    },2000);
    $(".sales").hover(function(){
            clearInterval(timer);
    },function(){
        clearInterval(timer);
        timer = setInterval(function(){
            idx++;
            if(idx==4){
                idx=0;
            }
            $(".sales .caption a").eq(idx).click();
        },2000);
    });
})();

2.12. 渠道分布&销售进度

2.12.1. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- 渠道 季度 -->
<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,321</h4>
                        <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>

2.12.2. css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/* 渠道区块 */
.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: .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: .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: .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;
  }

2.12.3. js - 雷达图

https://echarts.apache.org/examples/zh/editor.html?c=radar-aqi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
// 渠道分布
(function(){
    var echart = echarts.init($(".channel .radar")[0]);
    option = {   
        radar: {
            indicator: [
                { name: '机场', max: 100},
                { name: '商场', max: 100},
                { name: '火车站', max: 100},
                { name: '汽车站', max: 100},
                { name: '地铁', max: 100}
            ],
            // 修改雷达图大小，外圈半径
            radius: '60%',
            // 指示器轴的分割段数，圈数
            splitNumber: 4,   
            shape: 'circle',
            splitNumber: 5,
            // 雷达图文字颜色
            axisName: {
                color: '#4c9bfd',
                fontSize: 9
            },
            // 分割线
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, .3)'
                }
            },
            splitArea: {
                show: false
            },
            // 坐标轴轴线 - 竖线  
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)'
                }
            }
        },
        // 提示框
        // tooltip: {
        //     show: true,
        //     // 控制显示位置
        //     position: ['60%','10%'],
        //     textStyle: {
        //         fontSize: 10
        //     }
        // },
        series: [
          {
            name: 'Beijing',
            type: 'radar',
            // 填充区域线条颜色
            lineStyle: {
                color: '#fff',
                width: 1,
                opacity: 0.5
            },
            data: [
                [90, 19, 56, 11, 34, 76]
            ],
            // 标记图片
            symbol: 'circle',
            // 拐点大小
            symbolSize: 5,
            // 拐点样式
            itemStyle: {
              color: '#fff'
            },
            // 圆点上显示数据
            label: {
                show: true,
                color: '#fff',
                fontSize: 9
            },
            // 区域填充背景
            areaStyle: {
              color: 'rgbs(238,197,102,.6)'
            }
          }
        ]
      };
      echart.setOption(option);
      $(window).on("resize",function(){
          echart.resize();
      })
})();

2.12.4. js- 饼图

https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
(function(){
    var echart = echarts.init($(".quarter .gauge")[0]);
    option = {
        series: [
          {
            name: '销售进度',
            type: 'pie',
            // 放大图形
            radius: ['130%', '150%'],
            // 往下移动  套住文字
            center: ['48%','80%'],
            // 是否启用防止标签重叠策略
            // avoidLabelOverlap: false,
            labelLine: {
              show: false
            },
            // 起始角度，默认为90，[0,360]
            startAngle: 180,
            // 鼠标经过不放大
            hoverOffset: 0,
            data: [
                { 
                    value: 50,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#00c9e0'
                            }, {
                                offset: 1, color: '#005fc1'
                            }]
                        }
                    }
                },
                { 
                    value: 50,
                    itemStyle: {
                        color: '#12274d'
                    }
                },
                { 
                    value: 100,
                    itemStyle: {
                        color: 'transparent'
                    }
                }   
            ]
          }
        ]
    };
    echart.setOption(option);
    $(window).on("resize",function(){
        echart.resize();
    });
})();

2.13. 全国热榜

2.13.1. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- 排行榜 -->
<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>
                </ul>
                <ul class="sub">
                    <!-- <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li> -->
                </ul>
            </div>
        </div>
    </div>
</div>

2.13.2. css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

  /* 全国热榜模块制作 */
/* 排行榜 */
.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;
    cursor: pointer;
  }
  .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;
  }

2.13.3. js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
// 排行榜
(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. 遍历数据
    var strhtml='';
    $(".province .sup").empty();
    $.each(hotData,function(idx,elem){
        var city = elem.city;
        var sales = elem.sales;
        var flag = elem.flag;
        // console.log(city,sales);
        strhtml=`<li><span>${city}</span><span>${sales}<s class=${flag?"icon-up":"icon-down"}></s></span></li>`;
        $(".province .sup").append(strhtml);
        
    });
    strhtml='';
    hotprovince(0);
    function hotprovince(idx){
        // console.log($(this).index());
        // var idx = $(this).index();
        $(".province .sup li").eq(idx).addClass("active").siblings().removeClass("active");
        var brands = hotData[idx].brands;
        $(".province .sub").empty();
        $.each(brands,function(i,elem){
            strhtml=`<li><span>${elem.name}</span><span>${elem.num}<s class=${elem.flag?"icon-up":"icon-down"}></s></span></li>`;
            $(".province .sub").append(strhtml);          
        });
        strhtml='';
    }
    // 鼠标悬停事件
    $(".province .sup").on("mouseenter","li",function(){
        num = $(this).index();
        hotprovince(num);
    });
    // 定时播放
    var num = 0;
    var timer = setInterval(function(){
        num++;
        if(num==hotData.length){
            num=0;
        }
        hotprovince(num);
    },2000);
    $(".province").hover(function(){
        clearInterval(timer);
    },function(){
        clearInterval(timer);
        timer = setInterval(function(){
            num++;
            if(num==hotData.length){
                num=0;
            }
            hotprovince(num);
        },1000);
    });
})();
本文结束  感谢您的阅读