echarts使用2

调用接口获取数据

一定要添加判断， 因为接口获取数据是异步的，不加判断会直接把初始化的空对象传给组件，所以需要加判断，等待接口获取到数据之后，再渲染折线图组件。

<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="8">
        <el-card shadow="always"> <bar-chart /> </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always"> 
          <line-chart :reportsList="reportsList" v-if="Object.keys(reportsList).length"  />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always"> <pie-chart /> </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top:15px">
      <el-col :span="24">
        <el-card shadow="always"> 中国地图 </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {reportsGet} from "@/http/request.js";
import BarChart from "@/components/BarChart.vue"
import LineChart from "@/components/LineChart.vue"
import PieChart from "@/components/PieChart.vue"
export default {
  data(){
    return {
      reportsList:{}
    }
  },
  components:{
    BarChart,
    PieChart,
    LineChart
  },
  created(){
    reportsGet('reports/type/1')
    .then(res=>{
      let {meta,data} = res.data;
      if(meta.status==200){
        this.reportsList  = data;
      }else{
        this.$message.error(meta.msg)
      }
    }).catch(err=>{
     this.$message.error(err)
    })
  },
   mounted(){
     window.onresize = function(){
       window.BarChart.resize(),
       window.LineChart.resize(),
       window.PieChart.resize()
     }
   }
};
</script>

<style>
</style>

利用组件传值，子组件接收传过来的值并给了一个默认图表

<template>
  <div class="bar-chart">
    <div id="main" ref="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "LineChart",
  data(){
    return {
      lineList:{}
    }
  },
  props:{
    reportsList:{
      type:Object,
      default:()=>{
        return {
              title: {
        text: "折线图",
      },
      tooltip: {},
      xAxis: {
          axisLabel:{
          interval:0,
          rotate:20,
          margin:15,
        },
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {
      },
      series: [
        {
          name: "销量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
        }
      }
    }
  },
  mounted() {
    //  var myChart = echarts.init(document.getElementById('main'));
     var myChart = echarts.init(this.$refs.main)
     
     this.lineList =JSON.parse(JSON.stringify(this.reportsList)) 
     this.lineList.grid = {
       width:'80%',
       left:"20%",
       top:"30%"
     };

     this.lineList.legend.top = '10%'
    this.lineList.xAxis[0].axisLabel={
      interval:0,
      rotate:30,
      margin:15,
    };
    this.lineList.series.forEach(r => {
      delete r.areaStyle;
      r.smooth=true
    });
    
    myChart.setOption( this.lineList)
    window.LineChart = myChart
  },
};
</script>

<style scoped lang="scss">
#main{
    height: 300px;
}
</style>