基于Echarts的可视化项目

整体的效果

概览区域

 <!-- 概览区域模块制作 -->
      <div class="panel overview">
        <div class="inner">
          <ul>
            <li>
              <h4>2190</h4>
              <span>
                <i class="icon-dot"></i>
                设备总数
              </span>
            </li>
            <li class="item">
              <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: #6acca3"></i>
                运营设备
              </span>
            </li>
            <li>
              <h4>108</h4>
              <span>
                <i class="icon-dot" style="color: #ed3f35"></i>
                异常设备
              </span>
            </li>
          </ul>
        </div>
      </div>

公共样式设置

/*清除元素默认的内外边距  */
* {
   
  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.625rem 0.25rem 0;
  background: url(../images/logo.png) no-repeat 0 0 / contain;
  min-height: 780px;
}
.viewport .column {
   
  flex: 3;
  /* background-color: pink; */
}
.viewport .column:nth-child(2) {
   
  flex: 4;
  margin: 0.4rem 0.25rem 0;
}
/* 公共面板样式  */
.panel {
   
  position: relative;
  border: 15px solid transparent;
  border-width: .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;
  /* background-color: red; */
}
.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: .35rem;
  color:#fff;
  margin: 0 0 .1rem .06rem;
}

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

监控区域

<!-- 监控区域模块制作 -->
      <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">20180701</span>
                  <span class="col">11北京市昌平西路金燕龙写字楼</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 class="row">
                  <span class="col">20180701</span>
                  <span class="col">北京市昌平区建路金燕龙写字楼</span>
                  <span class="col">1000004</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000005</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000006</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                  <span class="col">1000007</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000008</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000009</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190710</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000010</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 class="row">
                  <span class="col">20190704</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190705</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190706</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190707</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190708</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190709</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190710</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

/* 监控区域模块制作 */
.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;
}

.marquee-view .marquee {
   
  animation:move 15s linear infinite;
}

@keyframes move {
   
  0% {
   
  }
  100%{
   
    transform:translateY(-50%);
  }
}

.marquee-view .marquee:hover {
   
  animation-play-state:paused;
}

// 监控区域模块制作
(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();
  });
  $(".marquee-view .marquee").each(function(){
   
    // console.log($(this))
    var rows = $(this)
    .children()
    .clone();
    $(this).append(rows);
  });
})();

点位模块

<!-- 点位模块制作 -->
      <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>

/* 点位模块制作 */
.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;
}

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

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

用户模块

<!-- 用户模块 -->
      <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>

/* 用户模块 */
.users {
   
  height: 4.25rem;
  display: flex;
}
.users .chart {
   
  display: flex;
  margin-top: .3rem;
}
.users .bar {
   
  width: 7.35rem;
  height: 3rem;
  /* background-color: pink; */
}
.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;
}

(function() {
   
  var item = {
   
    name:'',
    value:1200,
    // 修改当前柱子的样式
    itemStyle: {
   
      color:"#254065"
    },
    // 鼠标放到柱子上面，不会高亮显示
    emphasis: {
   
      itemStyle: {
   
        color:"#254065"
      }
    },
    // 鼠标经过柱子不显示提示框组件
    tooltip: {
   
      extraCssText:"opacity:0"
    }
  };
  // 1.实例化对象
  var myChart = echarts.init(document.querySelector(".bar"));
  // 2.指定配置和数据
  var option = {
   
    // 修改线性渐变色方式 1
    color: new echarts.graphic.LinearGradient(
      // (x1,y2) 点到点 (x2,y2) 之间进行渐变
      0, 0, 0, 1,
      [
          {
    offset: 0, color: '#00fffb' }, // 0 起始颜色
          {
    offset: 1, color: '#0061ce' }  // 1 结束颜色
    ]
    ),
    // 工具提示
    tooltip: {
   
      // 触发类型  经过轴触发axis  经过轴触发item
      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,0.3)'
    },
    // 控制x轴
    xAxis: [
      {
   
        // 使用类目，必须有data属性
        type: "category",
        // 使用 data 中的数据设为刻度文字
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data: [
          "上海",
          "广州",
          "北京",
          "深圳",
          "合肥",
          "",
          "......",
          "",
          "杭州",
          "厦门",
          "济南",
          "成都",
          "重庆"
        ],
        // 刻度设置
        axisTick: {
   
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          // 把X轴的刻度隐藏
          show:false
        },
        axisLabel: {
   
          //代表显示所有x轴标签显示
          interval:0,
          color:"#4c9bfd"
        },
        // x轴这条线的颜色样式
        axisLine: {
   
          lineStyle:{
   
            color:'rgba(0,240,255,0.3)'
          }
        }
      }
    ],
    // 控制y轴
    yAxis: [
      {
   
        // 使用数据的值设为刻度文字
        type: 'value',
        axisTick: {
   
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          show:false
        },
        axisLabel: {
   
          color:"#4c9bfd"
        },
        // x轴这条线的颜色样式
        axisLine: {
   
          lineStyle:{
   
            color:'rgba(0,240,255,0.3)'
          }
        },
        // y轴的分割线修改颜色
        splitLine:{
   
          lineStyle: {
   
            color:'rgba(0,240,255,0.3)',
          }
        }
      }
    ],
    // 控制x轴
    series: [
      {
   
        // 图表数据名称
        name: '用户统计',
        // 图表类型
        type: 'bar',
        // 柱子宽度
        barWidth: '60%',
        // 数据
        // data:[100,200,300,400]
        data: [
          2100,
          1900,
          1700,
          1560,
          1400,
          item,
          item,
          item,
          900,
          750,
          600,
          480,
          240
        ],
      }
    ]
  };
  // 3.把配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize",function(){
   
    myChart.resize()
  })
})();

订单模块

 <!-- 订单 -->
      <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,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>

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

// 订单功能
(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)
})();

销售额统计模块

<!-- 销售额 -->
      <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>

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

//销售统计模块
(function(){
   
  //准备数据
  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:"19%",
      //修饰图例颜色
      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: {
   
        interval:0,
        color:"#4c9bfd",
      },

      // 去除X轴坐标颜色
      axisLine: {
   
        show:false,
      }
    },
    yAxis: {
   
      type: "value",
      // 去除刻度
      axisTick: {
   
        show:false,
      },

      //修饰刻度标签颜色
      axisLabel: {
   
        interval:0,
        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);
  window.addEventListener("resize",function(){
   
    myChart.resize()
  })

  //4.tab切换效果制作
  //2.点击切换效果
  $(".sales .caption").on("click","a",function(){
   
    //点击当前a 高亮显示 调用active
    index = $(this).index()-1;
    $(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);
  });
  // 开启定时器每个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);
  })
  
})();

渠道分布与季度模块

 <!-- 渠道 季度 -->
     <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>

/* 渠道区块 */
.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;
}

//渠道分布模块
(function() {
   
  var myChart = echarts.init(document.querySelector('.radar'));
   // 2.指定配置
  //  var dataBJ = [[155, 39, 156, 0.46, 88, 6, 100]];
  //  var lineStyle = {
   
  //    normal: {
   
  //      width: 1,
  //      opacity: 0.5
  //    }
  //  };
   var option = {
   
    //  backgroundColor: "#161627",
    tooltip: {
   
      show:true,
      position:["20%","5%"]
    },
     radar: {
   
       indicator: [
        {
    name: '机场', max: 100 },
        {
    name: '商场', max: 100 },
        {
    name: '火车站', max: 100 },
        {
    name: '汽车站', max: 100 },
        {
    name: '地铁', max: 100 }
       ],
       //修改雷达图的大小
       radius:"60%",
       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: [[155, 39, 156, 0.46, 88, 6, 100]],
         //设置图形标记（小圆点）
         symbol: "circle",
        //  设置小圆点大小
         symbolSize:5,
         //设置小圆点颜色
         itemStyle: {
   
           color: "#fff"
         },
         //让小圆点显示数据
         label: {
   
          show:true,
          fontSize:10
         },
         //修饰区域填充的背景颜色
         areaStyle: {
   
          color:"rgba(238,197,102,0.6)",
          //  opacity: 0.1
         }
       }
     ]
   };
   // 3.把配置和数据给对象
   myChart.setOption(option);
   window.addEventListener("resize",function(){
   
    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:{
   
              // 修改线性渐变色方式 1
              color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0, 0, 0, 1,
                [
                    {
    offset: 0, color: '#00fffb' }, // 0 起始颜色
                    {
    offset: 1, color: '#0061ce' }  // 1 结束颜色
                ]
              ),
            }
          }, 
          {
    value: 100,
            itemStyle:{
   
              color:"#12274d"
            }
          }, 
          {
    value: 200,
            itemStyle:{
   
              color:"transparent"
            }
          }
        ]
      }
    ]
  };
  // 3. 把数据和配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize",function(){
   
    myChart.resize()
  })
})();

排行榜模块

<!-- 排行榜 -->
    <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">
              <!-- <li><span></span><span> <s class="icon-up"></s></span></li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>

/* 排行榜 */
.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);
  }
}

//全国热榜模块
(function() {
   
  // 准备数据
  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模块内容
  // 遍历hotData对象
  var supHTML = ""
  $.each(hotData,function(index,item) {
   
    // console.log(item);
    supHTML += `<li>
    <span>${
     item.city}</span>
    <span>${
     item.sales}<s class=${
     item.flag? "icon-up" : "icon-down"}></s></span>
  </li>`;
  });
  $(".sup").html(supHTML);

  // 3.当鼠标进入tab的时候
  // 鼠标经过当前的li 要高亮显示(用到事件委托)
  $(".province .sup").on("mouseenter","li",function() {
   
    index = $(this).index();
    render($(this));
  });
  //声明一个函数，里面设置sup当前li高亮，还有对应的品牌对象渲染
  function render(that) {
   
    that
      .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[that.index()].brands,function(index,item){
   
      // 是对应城市的每一个品牌对象
      // console.log(item);
    subHTML += `<li><span>${
     item.name}</span><span> ${
     item.num}<s class=
    ${
     item.flag ? "icon-up" : "icon-down"}
    ></s></span></li>`;
    });
    // 把生成的6个小li字符串给 sub dom盒子
    $(".sub").html(subHTML);
  }
  //默认把第一个li处于鼠标经过状态
  var lis =$(".province .sup li");
  lis.eq(0).mouseenter();
  
  //开启定时器
  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);
    }
  );
})();