摘要：
vue组件的技术报告将技术报告封装到组件中，并显示一个图表--Piedata是传入数据--˃data:function（）｛return｛Piedata:｛htmldiv:‘mycharts2’，text:‘站点的用户访问源’，subtext:‘纯属虚构’，name:‘访问源”，data:[｛value:335，name:“直接访问”｝，｛value:301，name:'电子邮件营销'｝，{value:234，name:'Alliance advertising'}，｛value:135，name:'视频广告'｝，｛value:1548，name:“Search engine”｝]｛value:0｝子组件：MPIE。vuevarecharts=requireexportdefault｛name:‘MPie‘，data（）｛return｛｝｝，mounted（）｛varlegendData=[]；for｛legendData.push｝varoption={title:｛text:this.datas.text，textStyle:｛color:‘#333‘｝，subtext:this.data。subtext，subtextStyle：｛color:“#aaa”｝，x:“center”｝；工具提示：｛trigger:“item”，格式：“｛a｝｛b｝：｛c｝”｝”，合法：｛object:“vertical”，bottom:“bottom”，data:legendData｝，series:[｛name:“access source”，type:“pie”，radius:“55%”，center:[‘50%’，‘60%’]，data:this.data.data，itemStyle：｛强调：｛shadowBlur:10，shadowOffsetX:0，shadowColor:“rgba”｝｝}}]}；varmyChart=技术图表。初始化；myChart。setOption；window.onzize=echarts.getInstanceByDom。resize（）；}，方法：｛｝，props:｛data:｛｝｝｝＜/script＞＜！--仅将“scoped”attributepolitimitCS添加到此组件--˃ViewCode2.直方图父组件：˂！
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%;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%;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>