vue-echarts 渲染后台数据

父组件

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

  <template>
      <div class="bar-chart">
          <div id="main" ref="main">
          </div>
      </div>
    </template>
    <script>
    import * as echarts from 'echarts';
    export default {
        props:['str'],
        created(){
            console.log(this.str);
        },
        data(){
            return {
                list:[]
            }
        },
        mounted(){
            var myChart = echarts.init(this.$refs.main);
            /* 深拷贝一下 生成两个不同的对象 */
            this.list=JSON.parse(JSON.stringify(this.str))
            this.list.title={
                //设置标题名位置
                text:'折线图',
                left:'40%'
            }
            this.list.grid={
            //设置折线图的位置
                top:'30%',
                left:'15%',
                height:'50%'
            }
            this.list.legend={
            //设置分类的高度
                top:'10%',
            }
            this.list.xAxis[0].axisLabel={
              /* 显示所有的x轴的数据 */
              interval: 0,
              /* 放不下的倾斜角度 */
              rotate:30,
              /* 数据距离刻度线的距离 */
              margin: 15,
            },
            this.list.series.forEach(r=>{
                //把折线图的所属区域删掉
                //删除折线下的影音
                delete r.areaStyle
                //让折线图变得丝滑
                r.smooth=true
            })
            // 绘制图表
            myChart.setOption(this.list)
            window.LineChart=myChart
        },

    }
    </script>

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