vue 趋势图组件动态渲染问题

2020-05-20 04:20:43 293 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

牛Kǎi牛牛牛� 墨衍会员 · AI 创作全网分发关注 + 加入社区

echarts进阶--销售趋势图 echarts进阶阶段，我们需要拿到后端接口数据，然后生成图表，接着在调节样式效果图我们可以将图表的渲染分成三个阶段初始化阶段、数据更新阶段、分辨率适配阶段。阅读详情

写了一个趋势图组件但是在页面上写该标签渲染不出来了大佬帮我看看是怎么回事吗

这是在home页面上的标签

这是趋势图文件代码

<template>

  <!--为echarts准备一个具备大小的容器dom-->

  <div id="main" style="width: 600px;height: 400px;"></div>

</template>

<script>

  import echarts from 'echarts'

  import { defineComponent} from '@vue/composition-api'

  export default defineComponent({

    name: '',

    props:{

      legendData: Array,

      firstList: Array,

      firstColor: String,

      secondColor: String,

      secondList: Array,

    },

    data() {

      return {

        charts: '',

        /*	opinion: ["1", "3", "3", "4", "5"],*/

        opinionData: ["3", "2", "4", "4", "5"],

        Datas: ["2", "2", "4", "5", "4"]

      }

    },

    methods: {

      drawLine(id) {

        this.charts = echarts.init(document.getElementById(id))

        this.charts.setOption({

          tooltip: {

            trigger: 'axis'

          },

          legend: {

            data: legendData

          },

          grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

          },



          toolbox: {

            feature: {

              saveAsImage: {}

            }

          },

          xAxis: {

            type: 'category',

            boundaryGap: false,

            data: ["1","2","3","4","5"]



          },

          yAxis: {

            type: 'value'

          },



          series: [

            {

            name: legendData[0],

            type: 'line',

            stack: '总量',

            data: this.opinionData

          },

            {

              name: legendData[1],

              type: 'line',

              stack: '总量',

              // itemStyle: {

              //   normal: {

              //     color: secondColor,

              //     lineStyle: {

              //       color: secondColor

              //     }

              //   }

              // },

              data: this.Datas

            }

          ]

        })

      }

    },

    //调用

    mounted() {

      this.$nextTick(function() {

        this.drawLine('main')

      })

    }

  })

</script>

<style scoped>

  * {

    margin: 0;

    padding: 0;

    list-style: none;

  }

</style>