vue组件之echarts报表
vue组件之echarts报表
将echarts报表封装成组件,动态传入数据,显示图表。
1.饼状图
父组件:
<MPie :datas="piedata"></MPie> <!--piedata为传入的数据-->
data:function(){
return {
piedata:{
htmldiv:'mycharts2',
text: '某站点用户访问来源',
subtext: '纯属虚构',
name: '访问来源',
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
}
}
子组件:MPie.vue
<template>
<div id="MPie">
<div :id="datas.htmldiv" style="height:100%;width:100%;min-height: 250px;"></div>
</div>
</template> <script>
var echarts = require('echarts')
export default {
name: 'MPie',
data () {
return {
}
},
mounted(){
var legendData=[];
for(var i in this.datas.data){
legendData.push(this.datas.data[i])
}
var option = {
title : {
text: this.datas.text,
textStyle:{color:'#333'},
subtext: this.datas.subtext,
subtextStyle:{color:'#aaa'},
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
bottom: 'bottom',
data: legendData
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:this.datas.data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var myChart = echarts.init(document.getElementById(this.datas.htmldiv));
myChart.setOption(option);
window.onresize = echarts.getInstanceByDom(document.getElementById(this.datas.htmldiv)).resize();
},
methods: { },
props: {
datas: {}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>
2.柱状图
父组件:
<MBar :datas="bardata"></MBar><!--piedata为传入的数据-->
bardata:{
htmldiv:'mycharts1',
text: '某站点用户访问来源',
subtext: '纯属虚构',
xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data:[120, 200, 150, 80, 70, 110, 130]
}
子组件:MBar.vue
<template>
<div id="MBar" style="">
<div :id="datas.htmldiv" style="height:100%;width:100%;min-height: 250px;"></div>
</div>
</template> <script>
var echarts = require('echarts')
export default {
name: 'MBar',
data () {
return {
}
},
mounted(){
var option = {
title : {
text: this.datas.text,
textStyle:{color:'#333'},
subtext: this.datas.subtext,
subtextStyle:{color:'#aaa'},
x:'center'
},
xAxis: {
type: 'category',
data: this.datas.xAxisData,
axisLine:{
lineStyle:{
color:'#000',
}
}
},
yAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'#000',
}
}
},
grid:{
bottom:20,
left:40,
right:20,
top:50
},
series: [{
data: this.datas.data,
type: 'bar'
}]
};
var myChart = echarts.init(document.getElementById(this.datas.htmldiv));
myChart.setOption(option);
window.onresize = echarts.getInstanceByDom(document.getElementById(this.datas.htmldiv)).resize();
},
methods: { },
props: {
datas: {}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>
vue组件之echarts报表的更多相关文章
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- VUE组件汇总
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- Vue怎么使用Echarts创建图表
摘要:在后台管理系统中,我们经常会遇到图表,比如说:柱形图,饼状图,折线图,雷达图等等,而用来写图表插件有很多,我这里主要介绍Echarts在项目里怎么使用,官网地址如下:https://echart ...
- vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...
- vue.js使用echarts一分钟简单入门
图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的echarts开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用vue.js框架下使用echa ...
- VUE中集成echarts时 getAttribute of null错误
错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...
- Vue 中引入echarts
安装依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org ...
- vue 中使用echarts
前言:在vue2.0中使用百度echarts有三种解决方案. 一.原始方法直接使用 这样每次都要获取图表dom元素 然后通过setOption渲染数据,最后在mounted中初始化.很麻烦. < ...
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
随机推荐
- CocoaPods(pod install一直不动)
CocoaPods安装和使用教程 如何在Mac 终端升级ruby版本 RubyGems 镜像 cocoapods无法使用(mac os 10.11升级导致pod: command not found)
- OC中使用单例模式
static Config * instance = nil; +(Config *) Instance { @synchronized(self) { if(nil == instance) { [ ...
- THREE.OrbitControls参数控制
// Set to false to disable this control//鼠标控制是否可用 this.enabled = true; // "target" sets th ...
- 对Json的各种遍历方法
慎用for in函数(有可能由于原型链的问题导致遍历问题): 如果要是用for in 一定要使用if (obj1.hasOwnProperty(key)) {}先做判断 解决方法 :1.eval() ...
- 监听器(Listener)学习(二)
一.监听域对象中属性的变更的监听器 域对象中属性的变更的事件监听器就是用来监听 ServletContext, HttpSession, HttpServletRequest 这三个对象中的属性变更信 ...
- spring事务的配置
前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. ...
- redis 连接池的一些问题
问题: Could not get a resource from the pool 将配置修改为如下: JedisPoolConfig config =newJedisPoolConfig ...
- phpMyAdmin“缺少 mcrypt 扩展。请检查 PHP 配置。”解决办法
在ecmall二次开发中因php版本要求低于5.3,而如下更新要求升级PHP,所以以下方式不适合于ecmall商城项目. 解决办法:安装php-mcrypt libmcrypt libmcrypt-d ...
- 页面加载完之后在执行js代码
把代码写在 window.onload = function () { //js代码 //此处js代码是页面完全加载完之后执行 } 即可. 例: <script type="text/ ...
- WaitHandle学习笔记
信号量与互斥体 互斥体(Mutex)是操作系统中一种独占访问共享资源的机制.它像一把所锁,哪个线程获取到互斥体的控制权,则可以访问共享的资源,或者执行处于受保护的代码.而其他的线程如果也想获取控制权, ...