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. ...
随机推荐
- NOI.AC #31. MST
好像又是神仙dp....gan了一早上 首先这是个计数类问题,上DP, 对于一个最小生成树,按照kruskal是一个个联通块,枚举边小到大合成的 假如当前边是树边,那么转移应该还是枚举两个块然后合并 ...
- JSP-Runoob：JSP Session
ylbtech-JSP-Runoob:JSP Session 1.返回顶部 1. JSP Session HTTP是无状态协议,这意味着每次客户端检索网页时,都要单独打开一个服务器连接,因此服务器不会 ...
- E20170626-hm
authenticate vt. 认证,证明是真实的.可靠的或有效的; 鉴定,使生效; author n. 作者; 著作家; 创造者; 发起人;
- jquery得到焦点和失去焦点
鼠标在搜索框中点击的时候里面的文字就消失了,经常会用到搜索框的获得焦点和失去焦点的事件,接下来介绍一下具体代码,感兴趣的朋友额可以参考下 input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面 ...
- html5打开摄像头并用canvas模拟拍照
网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵.根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验. 废话不多说,直接看代码. HTML代码: <video id=&quo ...
- 9.28NOIP模拟题
9.28NOIP模拟题 题目 哈 哈哈 哈哈哈 英文题目与子目录名 ha haha hahaha 单个测试点时间限制 1秒 1秒 1秒 内存限制 256M 128M 64M 测试点数目 10 10 1 ...
- [Swift通天遁地]四、网络和线程-(11)将服务器返回的JSON映射为实例对象
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 面试题：InnoDB中一棵B+树能存多少行数据？
阅读本文大概需要 5 分钟. 作者:李平 | 来源:个人博客 一.InnoDB 一棵 B+ 树可以存放多少行数据? InnoDB 一棵 B+ 树可以存放多少行数据? 这个问题的简单回答是:约 2 千万 ...
- Expected one result (or null) to be returned by selectOne(), but found: 2 和 java.lang.UnsupportedOperationException异常
在学习MyBatis的时候,简简单单的MyBatis+MySql的增删改查操作,但是却出了问题. 刚开始数据库只有一条数据的时候,岁月静好,一切看起来都那么的OJBK.但是,当我往数据库插入第二条数据 ...
- matlab中增加Java VM 的堆空间（解决xml_io_tools出现的OutOfMemory问题）
今天用MATLAB写程序,调用了xml_io_tools(很赞的一个xml读写工具包)中的函数,但是由于我要书写的文件比较大,5m左右,运行时不知道xml_io_tools中的哪一块超出了java中的 ...