vue echart图表功能

最新推荐文章于 2024-05-16 21:01:12 发布

a576837179

最新推荐文章于 2024-05-16 21:01:12 发布

阅读量122

点赞数

分类专栏： vue功能块文章标签： vue.js

本文链接：https://blog.csdn.net/a576837179/article/details/111823921

版权

vue功能块专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<template>
	<div id="main" style="width: 100%;height: 348px;"></div>
</template>

methods: {
fetchData(){
       let _this = this
       home.queryHomeInfo().then(res=>{
           if(res.messageCode === '0000'){
               let data = res.data.res
               //echarts图表
               let datax = []
               let dataY = []
               let echartArr = res.data.res.map
               for(let i in echartArr){
                   datax.push(i)
                   dataY.push(echartArr[i])
               }
               this.$nextTick(function(){
                   this.drawLine(datax,dataY)
               })
           }
       })
   },
   drawLine(datax,dataY){
       var myChart = this.$echarts.init(document.getElementById( 'main'))
       var option = {
           color:['#409EFF'],
           grid:{
               left: '8%',
               top: '4%',
               width: '86%',
               height: '76%'
           },
           xAxis: {
               type: 'category',
               axisLabel: {
                   interval: 'auto',//代表显示所有x轴标签显示
                   rotate: 15,//代表逆时针旋转45度
                   textstyle: {
                       fontsize: 12,
                   }
               },
               data: datax
           },
           yAxis: {
               type: 'value'
           },
           series: [{
               data: dataY,
               type: 'bar',
               barwidth: '30px',
           }]
       }
       myChart.setOption(option)
   }
}