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>
vue 使用echarts的更多相关文章
- Vue使用Echarts以及Echarts配置分享
一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...
- Vue使用echarts
Vue使用echarts 该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 创建图表 全局引入 main.js // 引入echarts i ...
- vue中echarts引入中国地图
<div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...
- vue使用echarts可视化图形插件
1.安装echarts: cnpm/npm i echarts -S 2.main.js中 import echarts from 'echart' Vue.prototype.$echa ...
- vue 使用Echarts 环形图 自定义legend formatter 富文本标签
main.js 引入echarts // 引入echarts import Echarts from 'echarts' Vue.prototype.$echarts = Echarts < ...
- webpack打包不引入vue、echarts等公共库
如果我们打包的时候不想将vue.echarts等公共库包含在内,需要配置两处地方, 以下以基于vue-cli生成的项目为基准: 1webpack配置: // webpack.base.conf.js ...
- 基于vue和echarts的数据可视化实现
基于vue和echarts的数据可视化: https://github.com/MengFangui/awesome-vue.git
- 16、vue引入echarts，划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
- vue使用Echarts图表
vue使用Echarts图表 童话_xxv 关注 0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...
- vue 引入 echarts 图表 并且展示柱状图
npm i echarts -S 下载 echarts 图表 mian.js 文件 引入图表并且全局挂载 //echarts 图表 import echarts from 'echarts' Vue. ...
随机推荐
- Execution Order In a Test Plan
1.Config Element 2.Pre Processors 3.Timer 4.Sampler 5.Post Processors 6.Assertions 7.Listener
- 利用mass storage class 做免驱动usb设备.
当需要使用usb bulk传输,想让设备像串口通讯那样和PC主机通信, 通常需要自己做一个PC端的驱动,比较麻烦. 为避免在pc上编写usb设备驱动的麻烦,可以将设备做成mass storage 类的 ...
- How to: Specify the Web Server for Web Projects in Visual Studio
https://msdn.microsoft.com/en-us/library/ms178108(v=vs.120).aspx When you run a Web project in Visua ...
- perl数组的长度与元素个数
perl数组的长度与元素个数 $#数组名 ---表示数组中最后一个元素的下标,它等于元素个数减1. @数组名 ---表示数组中元素的个数. $标量=@数组名 ---将一个数组赋值给一个标量变量,标量得 ...
- Grunt环境搭建及使用
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- FSDataInputStream对象 读取数据
- jeesite ckeditor数据库 HTML 被编码 的问题解决
public abstract class BaseController { /** * 初始化数据绑定 * 1. 将所有传递进来的String进行HTML编码,防止XSS攻击 * 2. 将字段中Da ...
- ognl表达式注意事项
1.在jsp页面中: <s:a action="departmentAction_delete.action?did="></s:a> 说明: 1.st ...
- poj1200Crazy Search（hash）
题目大意 将一个字符串分成长度为N的字串.且不同的字符不会超过NC个.问总共有多少个不同的子串. /* 字符串hash O(n)枚举起点 然后O(1)查询子串hash值 然后O(n)找不一样的个数 ...
- native2ascii运用
1.native2ascii命令行的格式 native2ascii -[option] [inputfile [outputfile]] 说明: -[option]:表示命令开关,有两个选项可供选择: ...