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 中 ...
随机推荐
- matlab load
参考文献:http://jingyan.baidu.com/article/fec4bce2257963f2618d8bfa.html 对应save,load 命令更加简单. load的方式有三种: ...
- 使用jenkins持续集成自动化测试
本文采用Springboot开发一个简易的添加个人资料和查询个人资料接口,并采用testng进行测试,使用jenkis进行持续继承,allure输出测试报告. 个人资料查询接口开发(集成H2数据库) ...
- Jmeter聚合报告
Label:请求的Name. #Samples:发出请求数量. Average:平均响应时间(单位:ms). Median:全部响应时间中位数,. 90%Line:90%用户的响应时间低于这个时间. ...
- bzoj 4811 由乃的OJ
bzoj 4811 由乃的OJ 考虑树链剖分. 树剖后用一颗线段树维护一段连续区间,类似于一个函数,各位上进入 \(0/1\) ,输出的数字分别是什么.注意到最多只有 \(64\) 位,可以用一个 \ ...
- 实用且堪称神器的Chrome插件推荐
前言 相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多强大好用的扩展程序(Extensions).最近为了更好 ...
- [嵌入式]I2C协议指东
最近闲来无聊,入了一块MPU6050,手头本来就有一块原子的STM32 MINI开发板,凑活着学习了一下IIC,特此总结. IIC,是集成电路总线[Inter-Intergrated Circuit] ...
- python之面向对象(继承)
类的继承 python之面向对象(继承) 面向对象的编程带来的主要好处之一是代码的重用,实现这种重用的方法之一是通过继承机制.继承完全可以理解成类之间的类型和子类型关系. 需要注意的地方:继承语法 c ...
- bzoj 1043 [HAOI2008]下落的圆盘——圆的周长
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1043 算每个圆被它后面的圆盖住了多少圆弧即可.注意判断这个圆完全被后面盖住的情况. #inc ...
- bzoj1025(SCOI2009)游戏——唯一分解的思路与应用
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1025 可以认为对应的值之间连边,就连成了一个有一个或几个环的图.列数就是每个环里点数的lcm ...
- logcat调试系统
日志存放位置:/dev/log shell@xxx:/ $ ls /dev/log -l crw-rw-rw- root log , -- : events crw-rw-rw- root log , ...