2回答

慕UI8195017

提问者

2021-04-22

<template>
  <common-card title="累计订单量" :value="totalOrders_total">
    <template v-slot:chart>
      <div id="totalOrdersChart" :style="{width:'100%', height:'100%'}"></div>
    </template>
    <template v-slot:footer>
      <span>昨日订单量:</span>
      <span class="emphasis">{{totalOrders_yesterdayTotal}}</span>
      <!-- <span class="emphasis">{{orderTrend}}</span> -->
    </template>
  </common-card>
</template>
<script>
import commonCardMixin from '../../../mixins/commonCardMixin'
import commonDataMixin from '../../../mixins/commonDataMixin'
import commonApiMixin from '../../../mixins/commonApiMixin'

const echarts = require('echarts')
export default {
  mixins: [commonCardMixin, commonDataMixin, commonApiMixin],
  mounted () {
    const chartDom = echarts.init(
      document.getElementById('totalOrdersChart')
    )
    // console.log(this.orderTrend)
    chartDom.setOption({
      xAxis: {
        type: 'category',
        show: false
      },
      yAxis: {
        show: false
      },
      grid: {
        top: 0,
        bottom: 0,
        right: 0,
        left: 0
      },
      series: [{
        type: 'line',
        lineStyle: {
          width: 0
        },
        itemStyle: {
          opacity: 0
        },
        data: this.orderTrend,
        areaStyle: {
          color: 'purple'
        },
        smooth: true
      }]
    })
  }
}
</script>
<style lang="scss" scoped>
@import "../../../style/mixins.scss";

.emphasis {
  @include commonEmphasis;
}
</style>
老师我的api调用的那个模块命名可能和老师的不一样，但效果是一样，同样也是得到orderTrend，但我因为开发的是vue3.x的版本，所以没有使用v-chart

0

0

扬_灵

2021-04-22

同学你好，可以把你的代码上传一下，我在本地帮你测试一下。

0

6

扬_灵

回复

慕UI8195017

同学你好，把mounted中的渲染通过监听来实现，项目中有使用watch的案例，你可以参考一下。

2021-04-23

共6条回复