博客

效果：

  <div class="w30LFwid bgs mt15"> 
   <h3 class="totalt_title"> <span class="titleIcon"> <em></em> <em></em> <em></em> </span> 社区参与人数 </h3> 
   <div class="w30sTab"> 
    <ul class="tabULLF1">
      /
     <li data-id="year" class="activeli">年</li>/ 
     <li data-id="mon">月</li>/ 
     <li data-id="day">日</li>/ 
    </ul> 
   </div> 
   <div id="dataJoinNUM" style="width: 600px;height: 250px;overflow: visible;"></div> 
  </div>

.w30LFwid {
    width: 100%;
    height: 300px;
    position: relative;
}
.w30LFwid::before{
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: #082255;
  z-index: 0;
}
.bgs {
    box-shadow: rgba(82, 255, 226, 0.23) 0px 0px 9px 0px inset;
    border-radius: 3px;
    background: linear-gradient(to left, rgb(0, 205, 162), rgb(0, 205, 162)) left top / 3px 9px no-repeat, linear-gradient(rgb(0, 205, 162), rgb(0, 205, 162)) left top / 9px 3px no-repeat, linear-gradient(to left, rgb(0, 205, 162), rgb(0, 205, 162)) right top / 3px 9px no-repeat, linear-gradient(rgb(0, 205, 162), rgb(0, 205, 162)) right top / 9px 3px no-repeat, linear-gradient(to left, rgb(0, 205, 162), rgb(0, 205, 162)) left bottom no-repeat, linear-gradient(rgb(0, 205, 162), rgb(0, 205, 162)) left bottom no-repeat, linear-gradient(to left, rgb(0, 205, 162), rgb(0, 205, 162)) right bottom no-repeat, linear-gradient(to left, rgb(0, 205, 162), rgb(0, 205, 162)) right bottom no-repeat;
}
.mt15 {
    margin-top: 15px;
}
totalt_title {
  height: 38px;
  line-height: 38px;
  padding: 0 45px;
  display: block;
  /* background-color: #1c41d7; */
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0.15em;
  position: relative;
  /* background: #0b06246e; */
  /* background: linear-gradient(to left,#0b06246e,#0b062400); */
  /* border-left: 5px solid #12AAE3; */
}
.titleIcon {
  display: flex;
  align-items: center;
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 20px;
}
.titleIcon em {
  width: 3px;
  display: inline-flex;
  margin: 0 2px;
  border-radius: 10px;
}
.titleIcon em:nth-child(1) {
  height: 10px;
  background-color: rgba(0, 205, 162, 0.3);

}
.titleIcon em:nth-child(2) {
  height: 14px;
  background-color: rgba(0, 205, 162, 0.5);
}
.titleIcon em:nth-child(3) {
  height: 16px;
  background-color: rgba(0, 205, 162, 1);
}
.w30sTab {
  position: absolute;
  right: 20px;
  top: 15px;
}
.tabULLF,
.tabULLF1 {
  display: flex;
  color: #ffffff;
  font-size: 16px;
}
.tabULLF li,
.tabULLF1 li {
  padding: 0 7px;
  color: #13E8E9;
  cursor: pointer;
}
.activeli {
  color: #082255 !important;
  background: #fff;
  border-radius: 10px;
}
.tabULLF li:hover,
.tabULLF1 li:hover {
  background: #fff;
  color: #082255;
  border-radius: 10px;
}

function socialNum() {
  let RankData = {
    title: '参与总量',
    xname: '(数量)',
    yearRank: {
      name: '年',
      ydata: ['住宅小区'],
      xdata: [666]
    },
    monthRank: {
      name: '月',
      ydata: ['住宅小区'],
      xdata: [200]
    },
    dayRank: {
      name: '日',
      ydata: ['住宅小区', '希望小区'],
      xdata: [90, 100]
    }
  }
  let xRankData = RankData.yearRank.xdata,
  yRankData = RankData.yearRank.ydata;
  // 默认显示的数据
  myChartsRankList(dataJoinNUM, RankData.title, RankData.xname, yRankData, xRankData)

  $(".tabULLF1 li").click(function() {
    $(this).addClass("activeli").siblings().removeClass("activeli");
    if ($(this).data("id") == "year") {
      xRankData = RankData.yearRank.xdata;
      yRankData = RankData.yearRank.ydata;
      myChartsRankList(dataJoinNUM, RankData.title, RankData.xname, yRankData, xRankData)
    } else if ($(this).data("id") == "mon") {
      xRankData = RankData.monthRank.xdata;
      yRankData = RankData.monthRank.ydata myChartsRankList(dataJoinNUM, RankData.title, RankData.xname, yRankData, xRankData)
    } else if ($(this).data("id") == "day") {
      xRankData = RankData.dayRank.xdata;
      yRankData = RankData.dayRank.ydata myChartsRankList(dataJoinNUM, RankData.title, RankData.xname, yRankData, xRankData)
    }
  })
}
socialNum();

// 柱状图
function myChartsRankList(id, title, xname, yData, xData) {
  const myChartsRankList = echarts.init(id) myChartsRankList.setOption({
    title: {
      text: title,
      x: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: "{b} <br> 数量: {c}"
    },
    grid: {
      left: '2%',
      right: '8%',
      bottom: '1%',
      top: '8%',
      containLabel: true
    },
    xAxis: {
      show: true,
      name: xname,
      splitLine: {
        show: false
      },
      type: 'value',
      min: 0,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      splitLine: {
        show: false
      },
      type: 'category',
      data: yData,
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        show: true,
        interval: 0,
        rotate: 0,
        margin: 10,
        inside: false,
        textStyle: {
          //color: '#fff',
          fontWeight: '10'
        }
      }
    },
    series: [{
      type: 'bar',
      barWidth: '7',
      label: {
        normal: {
          show: true,
          // formatter: '{c}',
          formatter: function(v) {
            var val = v.data;
            if (val == 0) {
              return '';
            }
            return val;
          },
          color: '#fff'
        }
      },
      itemStyle: {
        emphasis: {
          barBorderRadius: 7
        },
        normal: {
          barBorderRadius: 50,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: '#0AF8EB'
          },
          {
            offset: 1,
            color: '#B055F8'
          }
          ])
        }
      },
      data: xData
    }]
  })
}