webpack+vue-cli生成echarts图表

淩亂°似流年 2022-05-17 10:26 224阅读 0赞

之前在做毕设的时候生成过，可是过了很久了，都不太记得了，今天重新总结一下，方便以后用的时候直接有资料。

![这里写图片描述][70]

这个是echarts中的玫瑰图

![这里写图片描述][70 1]

这是echarts中的柱状图

贴出代码，一个vue文件

//将图表页面做成了一个组件，根据路由的不同去切换不同的组件
    //给每一个图表一个宽高，也就是放此图表的容器
    <template>
      <div>
       <div id="studentByGender" style="width:48%;height:400px;float:left"></div>
       <div id="teacherByGender" style="width:48%;height:400px;float:right"></div>
       <div id="noticeByType" style="width:100%;height:350px"></div>
      </div>
    </template>
    
    //引入jquery和echarts，都可以用npm命令直接下载
    <script> import $ from 'jquery' import echarts from 'echarts' export default { name:"DataStatistics",//模块名称 data () { //数据，必须返回一个对象 return { myChartOne:null, myChartTwo:null, myChartThree:null, studentMale:{}, studentFemale:{}, teacherMale:{}, teacherFemale:{}, optionOne:{ title : { text: '幼儿性别比例图', x:'center' }, tooltip : { //鼠标指上显示的提示框 trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { //图例的位置 x : 'center', y : 'bottom', data:['男','女'] }, toolbox: { //工具的显示 show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'] }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true,//图表计算 series : [ { name:'幼儿人数', type:'pie', radius : [20, 110], center : ['50%', 200], roseType : 'radius', width: '40%', // for funnel max: 40, // for funnel itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true }, labelLine : { show : true } } }, data:[] } ] }, optionTwo:{ title : { text: '教师性别比例图', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { x : 'center', y : 'bottom', data:['男','女'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'] }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'教师人数', type:'pie', radius : [20, 110], center : ['50%', 200], roseType : 'radius', width: '40%', // for funnel max: 40, // for funnel itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true }, labelLine : { show : true } } }, data:[] } ] }, optionThree:{ title : { text: '公告类型及数量' }, tooltip : { trigger: 'axis' }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : ['焦点新闻','园所介绍','园所文化','幼儿园公告','规章制度','早教基地','班级动态','卫生保健'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'公告数量', type:'bar', data:[] } ] } } }, //渲染的时候加载数据 mounted () { this.drawlineOne(); this.drawlineTwo(); this.drawlineThree(); }, methods: { //利用ajax去后台获取数据 drawlineOne(){ var vm = this; var url = 'http://localhost:3000/student/findByGender'; $.getJSON(url,{gender:'男'},function(data){ vm.studentMale = {value:data.length,name:'男'}; $.getJSON(url,{gender:'女'},function(data){ vm.studentFemale = {value:data.length,name:'女'}; var myChartOne = vm.$echarts.init(document.getElementById('studentByGender')); vm.optionOne.series[0].data.push(vm.studentMale); vm.optionOne.series[0].data.push(vm.studentFemale); myChartOne.setOption(vm.optionOne); }) }); }, drawlineTwo(){ var vm = this; var url = 'http://localhost:3000/teacher/findByGender'; $.getJSON(url,{gender:'男'},function(data){ vm.teacherMale = {value:data.length,name:'男'}; $.getJSON(url,{gender:'女'},function(data){ vm.teacherFemale = {value:data.length,name:'女'}; var myChartTwo = vm.$echarts.init(document.getElementById('teacherByGender')); vm.optionTwo.series[0].data.push(vm.teacherMale); vm.optionTwo.series[0].data.push(vm.teacherFemale); myChartTwo.setOption(vm.optionTwo); }) }); }, drawlineThree(){ var vm = this; var url = 'http://localhost:3000/notice/findByType'; $.getJSON(url,{selectType:'焦点新闻'},function(data){ vm.optionThree.series[0].data.push(data.length); $.getJSON(url,{selectType:'园所介绍'},function(data){ vm.optionThree.series[0].data.push(data.length); $.getJSON(url,{selectType:'园所文化'},function(data){ vm.optionThree.series[0].data.push(data.length); $.getJSON(url,{selectType:'幼儿园公告'},function(data){ vm.optionThree.series[0].data.push(data.length); $.getJSON(url,{selectType:'规章制度'},function(data){ vm.optionThree.series[0].data.push(data.length); $.getJSON(url,{selectType:'早教基地'},function(data){ vm.optionThree.series[0].data.push(data.length); $.getJSON(url,{selectType:'班级动态'},function(data){ vm.optionThree.series[0].data.push(data.length); $.getJSON(url,{selectType:'卫生保健'},function(data){ vm.optionThree.series[0].data.push(data.length); var myChartThree = vm.$echarts.init(document.getElementById('noticeByType')); myChartThree.setOption(vm.optionThree); }) }) }) }) }) }) }) }); } } } </script>

那时候用的获取后台数据的方式真的有点小蠢，因为嫌麻烦，不想在node后台中在函数，就直接这样写了。

大家有什么好办法可以相互交流，我的毕设项目地址[https://github.com/libin9625/BiShe-vue-][https_github.com_libin9625_BiShe-vue-]

[70]: /images/20220517/81f44bbba4f9422d8b689483ebe33a63.png
[70 1]: /images/20220517/2f5d2a6792cd4085a55736200e2d32a6.png
[https_github.com_libin9625_BiShe-vue-]: https://github.com/libin9625/BiShe-vue-