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. ...
随机推荐
- Quartz在.Net网站中的使用方法(附Demo)
现在做一个B/S项目需要用到计划任务,本来想自定写一个的,写了几句,突然想看看网上有没有现成可以用的.结果在苦寻之下找到了Quartz这个组件.看过之后感觉还不错.决定用它实现计划任务了.再找找看有没 ...
- datatable 的使用方法
遍历datatable的方法 +方法一:DataTable dt = dataSet.Tables[0];for(int i = 0 ; i < dt.Rows.Count ; i++){str ...
- ACM_最短网络（最小生成树）
Problem Description: Farmer John has been elected mayor of his town! One of his campaign promises wa ...
- day02_12/12/2016_bean的实例化之构造器方式
- VS开发C语言系列(零)-VS2013写C语言错误汇总
错误代码 error C3861:调用函数前未引用 error C4996:调用不安全的函数 error C2668:重载函数不明确 error C3861:"文件名" 找不到标识 ...
- java学习笔记_序列化
如果父类没有实现Serializable接口,子类实现了Serializable接口,那么子类是可以序列化的. 但是如果想要反序列化,那么就需要父类支持默认构造函数. 因为在反序列化的过程中不会调用子 ...
- (转）50道JavaScript基础面试题（附答案）
https://segmentfault.com/a/1190000015288700 1 介绍JavaScript的基本数据类型 Number.String .Boolean .Null.Undef ...
- JS——鼠标跟随
注意事项: 1.pageX.pageY的兼容问题 2.使目标移动鼠标中间位置还必须减去盒子宽度的一半 <!DOCTYPE html> <html lang="en" ...
- （原创）如何对APP服务端进行压力测试
版权声明:本文为原创文章,转载请先联系并标明出处 APP性能测试分为客户端性能测试和服务端性能测试,客户端的性能测试主要是针对启动快慢.耗电量.耗流量.内存使用等指标进行评估,目前主流的APP客户端性 ...
- THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...