Ts中的echarts写法

 

<template>
  <div style="height: 100%; width: 100%; overflow: hidden">
    <div style="width: 100%; height: 100%" ref="chartArea"></div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import PageBase from '@src/views/PageBase'
import { Route } from 'vue-router'
import { getConfigByName } from '@src/baseConfigs'
import * as echarts from 'echarts'
// *****************************************************************
/***流量计信息 */
@Component({
  components: {}
})
export default class Index extends PageBase {
  @Prop({
    default: () => {
      return []
    }
  })
  charData: any
  @Watch('charData', { deep: true, immediate: true })
  private watchData(val: any) {
    if (val.length > 0) {
      this.chartsRendered(val)
    }
  }
  private myChart: any = null
  private data: any = ''
  private async chartsRendered(val) {
    this.data = await this.getInventoryInfoFn(val)
    if (!this.myChart) {
      this.myChart = echarts.init(this.$refs.chartArea as any)
    }

    this.myChart.setOption(
      {
        title: {
          text: '库存信息',
          subtext: '',
          left: 'left',
          textStyle: {
            color: '#04b5b2'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: this.data.legendData,

          textStyle: {
            color: '#fff'
          },
          formatter: function (name) {
            return echarts.format.truncateText(name, 130, '12px Microsoft Yahei', '…')
          }
        },
        series: [
          {
            name: '名称：',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            data: this.data.seriesData,
            label: {
              color: '#fff',
              formatter(param) {
                param.name = param.name.toString()
                var maxlength = 7
                if (param.name.length > maxlength) {
                  return param.name.substring(0, maxlength - 1) + '...' + ' (数量:' + param.value + ')'
                } else {
                  return param.name + ' (数量:' + param.value + ')'
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      false
    )
    this.myChart.resize()
  }

  private async getInventoryInfoFn(val) {
    let legendData = []
    let seriesData = []
    for (var i = 0; i < val.length; i++) {
      const element = val[i]
      var name = element.materialtypeName
      legendData.push(name)
      seriesData.push({
        name: name,
        value: element.remainingQuantity
      })
    }
    return {
      legendData: legendData,
      seriesData: seriesData
    }
  }
}
</script>
<style lang="less" scoped></style>