免费资源部落

这篇文章主要介绍“VueEcharts如何实现多功能图表绘制”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“VueEcharts如何实现多功能图表绘制”文章能帮助大家解决问题。

项目结构项目代码dashboard.vue-主界面importpiefrom'com/pie/pie'importlinefrom'com/line/line'importmultipleColumnfrom'com/multipleColumn/multipleColumn'importpointfrom'com/point/point'exportdefault{data(){return{items:[]}},mounted(){this.init()},methods:{oresize(){this.$root.charts.forEach((myChart)=>{myChart.resize()})},init(){this.items=document.querySelectorAll('.flex-container.item')for(leti=0;i<this.items.length;i++){this.items[i].dataset.order=i+1;}},clickChart(clickIndex){letactiveItem=document.querySelector('.flex-container.active')letactiveIndex=activeItem.dataset.orderletclickItem=this.items[clickIndex-1]if(activeIndex===clickIndex){return}activeItem.classList.remove('active')clickItem.classList.add('active')this._setStyle(clickItem,activeItem)},_setStyle(el1,el2){lettransform1=el1.style.transformlettransform2=el2.style.transformel1.style.transform=transform2el2.style.transform=transform1}},components:{multipleColumn,point,'v-line':line,pie:pie}}multipleColumn.vue-复合柱形图importfilterfrom'com/filter/filter'importechartsfrom'echarts'importchinafrom'echarts/map/js/china'importworldfrom'echarts/map/js/world'importhttpfrom'js/http'exportdefault{data(){return{mcChart:{},options2:{shortcuts:[{text:'最近一周',value(){constend=newDate();conststart=newDate();start.setTime(start.getTime()-3600*1000*24*7);return[start,end];},onClick:(picker)=>{}},{text:'最近一个月',value(){constend=newDate();conststart=newDate();start.setTime(start.getTime()-3600*1000*24*30);return[start,end];},onClick:(picker)=>{}},{text:'最近三个月',value(){constend=newDate();conststart=newDate();start.setTime(start.getTime()-3600*1000*24*90);return[start,end];},onClick:(picker)=>{}}]},value2:'',startTime:'',endTime:'',}},methods:{_mcCharts(){vardom=document.querySelector('.multipleColumn.main')this.mcChart=echarts.init(dom);varapp={},option=null;app.title='堆叠柱状图';option={title:{text:'全国主要城市空气质量',left:'left',textStyle:{color:'#fff',fontWeight:300,}},tooltip:{trigger:'axis',axisPointer:{//坐标轴指示器，坐标轴触发有效type:'shadow'//默认为直线，可选为：'line'|'shadow'}},color:['#AE5548','#6D9EA8','#9CC2B0','#C98769','#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'],legend:{data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'],x:'right',textStyle:{//legend字体颜色color:'#fff'}},grid:{left:'5%',right:'8%',top:'16%',bottom:'3%',containLabel:true},xAxis:[{name:'时间',type:'category',data:['周一','周二','周三','周四','周五','周六','周日'],axisLine:{lineStyle:{color:'#fff',type:'solid'//'dotted'虚线'solid'实线}}}],yAxis:[{name:'数量',type:'value',splitLine:{lineStyle:{color:['rgba(230,230,230,0.2)'],type:'dotted'//'dotted'虚线'solid'实线}},axisLine:{lineStyle:{color:'#fff',type:'solid'//'dotted'虚线'solid'实线}}}],series:[{name:'直接访问',type:'bar',data:[320,332,301,334,390,330,320]},{name:'邮件营销',type:'bar',stack:'广告',data:[120,132,101,134,90,230,210]},{name:'联盟广告',type:'bar',stack:'广告',data:[220,182,191,234,290,330,310]},{name:'视频广告',type:'bar',stack:'广告',data:[150,232,201,154,190,330,410]},{name:'搜索引擎',type:'bar',data:[862,1018,964,1026,1679,1600,1570],markLine:{lineStyle:{normal:{type:'dashed'}},data:[[{type:'min'},{type:'max'}]]}},{name:'百度',type:'bar',barWidth:5,stack:'搜索引擎',data:[620,732,701,734,1090,1130,1120]},{name:'谷歌',type:'bar',stack:'搜索引擎',data:[120,132,101,134,290,230,220]},{name:'必应',type:'bar',stack:'搜索引擎',data:[60,72,71,74,190,130,110]},{name:'其他',type:'bar',stack:'搜索引擎',data:[62,82,91,84,109,110,120]}]};if(option&&typeofoption==="object"){this.mcChart.setOption(option,true);};//绑定点击事件this.mcChart.on('click',function(params){console.log(params)})},//时间插件onChangeDate(date){//daterange改变的时候触发的事件默认接收一个date对象this.startTime=date[0];this.endTime=date[1];},//时间插件okChange(){//点击确定按钮触发的事件varparams={startTime:this.startTime,endTime:this.endTime}if(params.startTime===''||params.endTime===''){this.$Message.info('请选择日期范围');return}else{this._showPoint(params)}},//时间插件onClear(){console.log('今日实况')},},mounted:function(){this._mcCharts()window.addEventListener('resize',function(){//第一步：main中添加,第二步：添加.bind(this)this.mcChart.resize()}.bind(this));},components:{'v-filter':filter}}项目截图

地图功能

饼图功能+单选复选

复杂折线图+单选复选

复杂柱状图+单选复选

百度地图api实现跳点

大屏展示

关于“VueEcharts如何实现多功能图表绘制”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。