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. ...
随机推荐
- ios16--自定义控件1
k控制器: // // XMGViewController.h #import <UIKit/UIKit.h> @interface XMGViewController : UIViewC ...
- android 获取屏幕的高度和宽度、获取控件在屏幕中的位置、获取屏幕中控件的高度和宽度
(一)获取屏幕的高度和宽度 有两种方法: 方法1: WindowManager wm = (WindowManager) getContext().getSystemService(Context.W ...
- 推荐微软Windows 8 Metro应用开发虚拟实验室
Kevin Fan分享开发经验,记录开发点滴 推荐微软Windows 8 Metro应用开发虚拟实验室 2012-07-19 05:23 by jv9, 1940 阅读, 4 评论, 收藏, 编辑 微 ...
- Istio 1.1部署实践
前提条件 正确安装配置Kubernetes集群 CentOS Linux release 7.5.1804 安装 下载istio 1.1版本 [root@vm157 ~]# wget https:// ...
- oracle学习笔记（二十） 子程序——函数与触发器
子程序--函数 语法 之前select语句中使用的函数,都是SQL内置函数,我们可以通过自定义函数更满足我们的需要. 自定义函数的语法和存储过程差不多. create [or replace] $fu ...
- ACM_夏天到了,又到了出游的季节
夏天到了,又到了出游的季节 Time Limit: 2000/1000ms (Java/Others) Problem Description: QWER最近无心打代码,于是带着n套衣服出去浪.但是每 ...
- ACM_无聊者序列（斐波那契数列大数取余（同余）+规律）
Problem Description: 瓜瓜在玩着由红色和蓝色的大理石做成的玻璃珠,他将n个玻璃珠从左到右排成一个序列叫做无聊者序列.一个非空的红色和蓝色玻璃珠组成的序列是一个无聊者序列.这个序列的 ...
- gerrit项目配置
1. 相关约定说明: 1.1 gerrit服务器ip地址:192.168.130.10 1.2 gerrit服务器端用户名:gerrit 1.3 gerrit用户端管理员:admin 1.4 ssh端 ...
- android学习之路资料集合
版权声明:本文为 stormzhang 原创文章,可以随意转载,但必须在明确位置注明出处!!! 这篇博客背后的故事 一路走来很不容易,刚好知乎上被人邀请回答如何自学android编程, 就借这个机会在 ...
- WEB文件上传之apache common upload使用（一）
文件上传一个经常用到的功能,它有许多中实现的方案. 页面表单 + RFC1897规范 + http协议上传 页面控件(flash/html5/activeX/applet) + RFC1897规范 + ...