vue 使用echarts
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>
