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 中 ...
随机推荐
- 用户空间与内核驱动的交互过程 — ioctl
在Linux内核模块的开发过程中,经常涉及到运行在用户空间上的应用程序与内核模块进行交互,ioctl系统调用是常用的一种方式.本文并不涉及vlan的具体原理,仅通过vconfig与vlan内核模块进行 ...
- Chrome 插件下载
这里推荐几个下载chrome扩展的网站 http://www.cnplugins.com/index.html 分类全,没有搜索 http://www.chromein.com/ 有搜索,推荐使用 h ...
- Android Hook框架Xposed详解
1 Introduction 1.1 概述 Xposed 是 GitHUB 上 rovo89 大大设计的一个针对 Android 平台的动态劫持项目,通过替换 /system/bin/app_pro ...
- object references an unsaved transient instance【异常】
[异常提示] TransientObjectException: object references an unsaved transient instance -save the transient ...
- UWP 流畅设计中的光照效果(容易的 RevealBorderBrush 和不那么容易的 RevealBackgroundBrush)
在 Windows 10.0.16299 中,RevealBrush 被引入,可以实现炫酷的鼠标滑过高亮效果和点击光照.本文将告诉大家如何完整地实现这样的效果. Reveal 的效果(自带) 在微软官 ...
- 《DSP using MATLAB》示例 Example 6.14、6.15
- Spring boot admin 使用
1. maven依赖 <dependencies> <dependency> <groupId>org.springframework.boot</group ...
- oracle11g卸载(win10)
oracle11g卸载(win10) 0.已在win10安装oracle11g 1.开始->设置->控制面板->管理工具->服务 停止所有Oracle服务. 2.运行Unive ...
- PAT1055___排序神题
题目意思比较简单,按财富,年龄,姓名来排序 看似挺普通的,但被坑了20多次TLE 首先排序只要一次,就是按题目规定的进行排序 然后在查询的时候,不是从头扫到尾看是否符合年龄的限制,而是记录这个年龄组在 ...
- 框架(yii和thinkphp)中实例化php内置或者扩展中的对象问题
将php原生语句实例化SphinxClient对象移植到yii2框架中报错 原生语句中这样写: $s = new SphinxClient(); 框架中应该加入反斜杠,这样写: $s = new \S ...