vue 使用echarts

Posted 2020-10-29 anne_zhou

import echarts from ‘echarts‘

 

<div id="kocGrow" style="width: 600px;height: 300px;margin: 0 auto"></div>

　　

mounted() {

this.drawGrow()

},

methods: {

drawGrow() {
          let echarts = this.echarts.init(document.getElementById(‘kocGrow‘))
          let option = {
            tooltip: {
              trigger: ‘axis‘,
              formatter: "{a} <br/>{b}: {c}"
            },
            xAxis: {
              type: ‘category‘,
              data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘]
            },
            yAxis: {
              type: ‘value‘
            },
            series: [
              {
                name: ‘KOC增长‘,
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: ‘line‘
              }
            ]
          };
          echarts.setOption(option)
        },
}

　

<template>
  <div id="kocreport">
    <h1 class="h1">微信群分析报表</h1>
    <div class="kocBtns">
      <div class="searchBox">
        <Select v-model="keywords" placeholder="选择品牌" @on-change="chooseBrand">
          <Option v-for="item in brandList" :value="item.ID" :key="item.ID">{{item.Name}}</Option>
        </Select>
      </div>
    </div>
    <div class="koc_head">
      <p>总概况</p>
      <ul class="koc_head_list">
        <li v-for="item in totalHead">
          <div>
            <Icon :type="item.icon"></Icon>
          </div>
          <div>
            <p>{{item.title}}</p>
            <span>2345676</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="koc_head">
      <p>KOC增长</p>
      <div>
        <ul class="filter">
          <li :class="{filter_click: item.isClicked}" v-for="item in dateList" @click="filterDatas(item)">{{item.name}}</li>
        </ul>
      </div>
      <div id="kocGrow" style="width: 600px;height: 300px;margin: 0 auto"></div>
    </div>
    <div class="koc_head">
      <p>KOC属性</p>
      <div class="koc_property">
        <div id="kocSex"></div>
        <div id="kocAge"></div>
        <div id="kocArea"></div>
        <div>
          <div class="kocTable">
            <Table stripe :columns="columns" :data="data" ref="table"></Table>
          </div>
        </div>
      </div>
    </div>
    <div class="koc_head">
      <p>KOC详情</p>
      <div>
        <div class="kocBtns">
          <div class="searchBox">
            <input type="text" class="searchIpt" v-model="keywords" placeholder="搜索品牌" @keyup.enter="search">
            <i class="icon iconfont icon-sousuo" @click="search"></i>
          </div>
        </div>
        <div>
          <ul>
            <li class="product_list" v-for="item in productList">
              <div class="list_messages">
                <div>
                  <img :src="item.img">
                </div>
                <div>
                  <p>{{item.title}}</p>
                  <span>{{item.factory}}</span>
                </div>
              </div>
              <div class="list_fans">
                <p>微博本月新增粉丝</p>
                <span>{{item.fans}}</span>
                <p>本月新增 <span>{{item.totalFans}}</span></p>
              </div>
              <div class="list_weibo">
                <div>
                  <p>KOC等级</p>
                  <span>{{item.totalweibo}}</span>
                </div>
                <div>
                  <p>总粉丝数</p>
                  <span>{{item.zhuanfa}}</span>
                </div>
              </div>
              <div class="list_more">
                <div>
                  <p>活跃度</p>
                  <span>{{item.beipinglun}}</span>
                </div>
                <div>
                  <Button type="primary" long @click="more">更多...</Button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from ‘echarts‘
  import map from ‘echarts/map/json/china‘
  import ‘echarts/map/js/china‘
  import img1 from ‘@/assets/img/u6690.png‘
  import img2 from ‘@/assets/img/u6728.png‘
  import img3 from ‘@/assets/img/u6766.png‘
    export default {
        name: "kocreport",
      data() {
          return{
            AdminToken: ‘111111‘,
            echarts: echarts,
            map: map,
            keywords: ‘‘,
            brandList: null,
            totalHead: [
              {icon: ‘person-stalker‘,title: ‘KOC总量‘},
              {icon: ‘shuffle‘,title: ‘人均传播量‘},
              {icon: ‘person-stalker‘,title: ‘人均活跃度‘}
            ],
            dateList: [
              {name: ‘今日‘,isClicked: false},
              {name: ‘昨日‘,isClicked: false},
              {name: ‘近一周‘,isClicked: false},
              {name: ‘近一月‘,isClicked: false},
            ],
            columns: [
              {
                title: "省份",
                key: "date"
              },
              {
                title: "浏览量(pv)",
                key: "rule_name"
              },
              {
                title: "占比",
                key: "rule_content"
              }
            ],
            data: [],
            keywords: ‘‘,
            productList: [
              {img: img1,title:‘宝洁中国‘,factory:‘广州宝洁有限公司官方微博‘,fans: 300000,totalFans: 1890405,totalweibo: 5431,zhuanfa: 654322,beipinglun: 76438423},
              {img: img2,title:‘帮宝适‘,factory:‘帮宝适新浪官方微博‘,fans: 300000,totalFans: 1890405,totalweibo: 5431,zhuanfa: 654322,beipinglun: 76438423},
              {img: img3,title:‘OLAY‘,factory:‘OLAY品牌官方微博‘,fans: 300000,totalFans: 1890405,totalweibo: 5431,zhuanfa: 654322,beipinglun: 76438423}
            ]
          }
      },
      created() {
          this.prodcutList()
      },
      mounted() {
          this.drawGrow()
          this.drawSex()
          this.drawAge()
          this.drawArea()
      },
      methods: {
        prodcutList() {
          this.getBrandList(this,this.AdminToken).then((res)=>{
            this.brandList = res
          })
        },
        chooseBrand() {

        },
        filterDatas(item) {
          this.dateList.forEach((i)=>{
            i.isClicked = false
          })
          item.isClicked = true
          this.drawGrow()
        },
        randomValue() {
          return Math.round(Math.random()*1000);
        },
        drawGrow() {
          let echarts = this.echarts.init(document.getElementById(‘kocGrow‘))
          let option = {
            tooltip: {
              trigger: ‘axis‘,
              formatter: "{a} <br/>{b}: {c}"
            },
            xAxis: {
              type: ‘category‘,
              data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘]
            },
            yAxis: {
              type: ‘value‘
            },
            series: [
              {
                name: ‘KOC增长‘,
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: ‘line‘
              }
            ]
          };
          echarts.setOption(option)
        },
        drawSex() {
          let echarts = this.echarts.init(document.getElementById(‘kocSex‘))
          let option = {
            title: {
              text: ‘男女比例‘
            },
            tooltip: {
              trigger: ‘item‘,
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
              orient: ‘vertical‘,
              x: ‘right‘,
              data:[‘男‘,‘女‘,‘未知‘]
            },
            series: [
              {
                name:‘男女比例‘,
                type:‘pie‘,
                radius: [‘50%‘, ‘70%‘],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: ‘center‘
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: ‘30‘,
                      fontWeight: ‘bold‘
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data:[
                  {value:335, name:‘男‘},
                  {value:310, name:‘女‘},
                  {value:234, name:‘未知‘},
                ]
              }
            ]
          };
          echarts.setOption(option)
        },
        drawAge() {
          let echarts = this.echarts.init(document.getElementById(‘kocAge‘))
          let option = {
            title: {
              text: ‘年龄分布‘
            },
            color: [‘#3398DB‘],
            tooltip : {
              trigger: ‘axis‘,
              axisPointer : {
                type : ‘shadow‘
              }
            },
            grid: {
              left: ‘3%‘,
              right: ‘4%‘,
              bottom: ‘3%‘,
              containLabel: true
            },
            xAxis : [
              {
                type : ‘category‘,
                data : [‘12岁以下‘, ‘18岁到28岁‘, ‘38岁到48岁‘, ‘60岁以上‘],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis : [
              {
                type : ‘value‘
              }
            ],
            series : [
              {
                name:‘年龄分布‘,
                type:‘bar‘,
                barWidth: ‘60%‘,
                data:[10, 390, 200, 100]
              }
            ]
          };
          echarts.setOption(option)
        },
        drawArea() {
          let echarts = this.echarts.init(document.getElementById(‘kocArea‘))
          this.echarts.registerMap(‘china‘, this.map);
          let option = {
            title: {
              text: ‘地域分布‘
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            tooltip: {},
            visualMap: {
              min: 0,
              max: 1500,
              left: ‘left‘,
              top: ‘bottom‘,
              text: [‘High‘,‘Low‘],
              seriesIndex: [1],
              inRange: {
                color: [‘#e0ffff‘, ‘#006edd‘]
              },
              calculable : true
            },
            geo: {
              map: ‘china‘,
              roam: true,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: ‘rgba(0,0,0,0.4)‘
                  }
                }
              },
              itemStyle: {
                normal:{
                  borderColor: ‘rgba(0, 0, 0, 0.2)‘
                },
                emphasis:{
                  areaColor: null,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: ‘rgba(0, 0, 0, 0.5)‘
                }
              }
            },
            series : [
              {
                type: ‘scatter‘,
                coordinateSystem: ‘geo‘,
                symbolSize: 20,
                symbolRotate: 35,
                label: {
                  normal: {
                    formatter: ‘{b}‘,
                    position: ‘right‘,
                    show: false
                  },
                  emphasis: {
                    show: true
                  }
                },
              },
              {
                name: ‘地域分布‘,
                type: ‘map‘,
                geoIndex: 0,
                data:[
                  {name: ‘北京‘, value: this.randomValue()},
                  {name: ‘天津‘, value: this.randomValue()},
                  {name: ‘上海‘, value: this.randomValue()},
                  {name: ‘重庆‘, value: this.randomValue()},
                  {name: ‘河北‘, value: this.randomValue()},
                  {name: ‘河南‘, value: this.randomValue()},
                  {name: ‘云南‘, value: this.randomValue()},
                  {name: ‘辽宁‘, value: this.randomValue()},
                  {name: ‘黑龙江‘, value: this.randomValue()},
                  {name: ‘湖南‘, value: this.randomValue()},
                  {name: ‘安徽‘, value: this.randomValue()},
                  {name: ‘山东‘, value: this.randomValue()},
                  {name: ‘新疆‘, value: this.randomValue()},
                  {name: ‘江苏‘, value: this.randomValue()},
                  {name: ‘浙江‘, value: this.randomValue()},
                  {name: ‘江西‘, value: this.randomValue()},
                  {name: ‘湖北‘, value: this.randomValue()},
                  {name: ‘广西‘, value: this.randomValue()},
                  {name: ‘甘肃‘, value: this.randomValue()},
                  {name: ‘山西‘, value: this.randomValue()},
                  {name: ‘内蒙古‘, value: this.randomValue()},
                  {name: ‘陕西‘, value: this.randomValue()},
                  {name: ‘吉林‘, value: this.randomValue()},
                  {name: ‘福建‘, value: this.randomValue()},
                  {name: ‘贵州‘, value: this.randomValue()},
                  {name: ‘广东‘, value: this.randomValue()},
                  {name: ‘青海‘, value: this.randomValue()},
                  {name: ‘西藏‘, value: this.randomValue()},
                  {name: ‘四川‘, value: this.randomValue()},
                  {name: ‘宁夏‘, value: this.randomValue()},
                  {name: ‘海南‘, value: this.randomValue()},
                  {name: ‘台湾‘, value: this.randomValue()},
                  {name: ‘香港‘, value: this.randomValue()},
                  {name: ‘澳门‘, value: this.randomValue()}
                ]
              }
            ]
          };
          echarts.setOption(option)
        },
        search() {

        },
        more() {
          this.$router.push({name: ‘kocreport-detail‘})
        }
      }
    }
</script>


<style lang="scss">
  #kocreport{
    .ivu-select-selection{
      border-radius: 0;
    }
     .ivu-select-dropdown{
       border-radius: 0;
     }
    .h1{
      color:#fff;
      font-size:26px;
      margin-bottom: 10px;
    }
    .kocBtns {
      margin-bottom: 10px;
      &:after{
        display: block;
        content: ‘‘;
        clear: both;
      }
      .newKOC {
        margin-right: 8px;
      }
      .ivu-btn-primary {
        background-color: #0099ff;
        border-color: #0099ff;
        border-radius: 0;
        width: 140px;
        height: 38px;
      }
      .searchBox {
        float: left;
        position: relative;
        width: 140px;
      }
      .searchIpt {
        width: 170px;
        height: 37px;
        box-sizing: border-box;
        padding-left: 4px;
        padding-right: 34px;
        font-size: 14px;
      }
      .icon-sousuo {
        position: absolute;
        left: 129px;
        top: 0px;
        margin: 0 4px;
        width: 30px;
        height: 38px;
        line-height: 38px;
        font-size: 22px;
        color: #000;
        cursor: pointer;
      }
    }
    .koc_head{
      margin: 5px 0 10px 0;
      width: 100%;
      background-color: #ffffff;
      padding: 10px;
      >p{
        font-size: 16px;
        margin-bottom: 10px;
      }
    }
    .koc_head_list{
      padding: 6px;
      &:after{
        display: block;
        content: ‘‘;
        clear: both;
      }
      li{
        list-style: none;
        float: left;
        width: 33%;
        &:first-of-type{
          >div{
            &:first-of-type{
              background-color: #88d020;
            }
          }
        }
        &:nth-of-type(2){
          >div{
            &:first-of-type{
              background-color: rgb(62,164,253);
            }
          }
        }
        &:nth-of-type(3){
          >div{
            &:first-of-type{
              background-color: #ff326e;
            }
          }
        }
        >div{
          float: left;
          &:first-of-type{
            width: 48px;
            height: 48px;
            border-radius: 50%;
            color: #ffffff;
            text-align: center;
            line-height: 58px;
            >i{
              font-size: 25px;
            }
          }
          &:last-of-type{
            margin: 5px 0 0 15px;
            span{
              font-size: 16px;
              font-weight: bold;
            }
          }
        }
      }
    }
    .koc_property{
      width: 100%;
      padding: 20px;
      &:after{
        display: block;
        content: ‘‘;
        clear: both;
      }
      >div{
        float: left;
        width: 40%;
        height: 300px;
        &:nth-of-type(odd){
          margin-right: 10%;
        }
      }
    }
    .filter{
      float: right;
      li{
        float: left;
        list-style: none;
        width: 45px;
        margin-right: 5px;
        text-align: center;
        background-color: #ccc;
        cursor: pointer;
      }
    }
    .filter_click{
      background-color: #ffffff!important;
    }
    .kocTable{
      .ivu-table {
        width: 100%;
        color: #666;
        margin-top:10px;
        &:before {
          height: 0;
        }
        &:after {
          width: 0;
        }
        .ivu-table-header {
          background-color: #000;
        }
        th {
          font-size: 14px;
          height: 40px;
          text-align: center;
          background: #000;
          color: #fff;
          border: 0 none;
          div{
            padding-left: 9px;
            padding-right: 9px;
          }
        }
        td {
          height: 40px;
          text-align: center;
        }
        .ivu-btn-primary {
          padding: 2px 4px;
          background-color: #0099ff;
          border-color: #0099ff;
        }
        .ivu-btn-error {
          padding: 2px 4px;
          background-color: #f16543;
          border-color: #f16543;
        }
        .ivu-btn-success {
          padding: 2px 4px;
        }
      }
      .ivu-btn {
        border-radius: 0;
        font-weight: 600;
      }
      .ivu-btn-primary:hover {
        -webkit-box-shadow: 0 0px 25px 2px #fff;
        -moz-box-shadow: 0 0px 25px 2px #fff;
        box-shadow: 0 0px 25px 2px #fff;
      }

      .loading {
        margin-left: 50%;
      }
      .ivu-table-wrapper {
        border: 0 none;
      }
    }
    .product_list{
      background-color: #f5f5f5;
      overflow: hidden;
      padding: 15px;
      &:not(:first-of-type){
        margin-top: 10px;
      }
      >div{
        float: left;
        width: 24%;
        height: 138px;
        margin: 0 5px 0 0;
        &:last-of-type{
          margin: 0;
        }
      }
    }
    .list_messages{
      overflow: hidden;
      >div{
        float: left;
        margin-left: 1%;
        &:first-of-type{
          width: 4em;
          img{
            width: 100%;
          }
        }
        &:last-of-type{
          margin-left: 10px;
          p{
            font-weight: bolder;
            font-size: 1.1em;
          }
          span{
            display: inline-block;
            margin-top: 5px;
          }
        }
      }
    }
    .list_fans{
      background-color: #ffffff;
      padding: 10px;
      p{
        line-height: 20px;
        &:first-of-type{
          font-size: 12px;
        }
        &:last-of-type{
          span{
            float: right;
          }
        }
      }
      >span{
        font-size: 14px;
        line-height: 80px;
        display: block;
        font-weight: bold;
        text-align: center;
      }
    }
    .list_weibo{
      >div{
        background-color: #ffffff;
        padding: 10px;
        line-height: 23px;
        overflow: hidden;
        span{
          float: right;
        }
        &:last-of-type{
          margin-top: 5px;
        }
      }
    }
    .list_more{
      >div{
        background-color: #ffffff;
        padding: 10px;
        line-height: 23px;
        overflow: hidden;
        span{
          float: right;
        }
        &:last-of-type{
          background-color: inherit;
          margin-top: 30px;
          padding: 0;
          button{
            border-radius: 0;
            span{
              float: inherit;
            }
          }
        }
      }
    }
  }
</style>