app-AgricultureSmart/vue/src/views/manager/Shop/echarts.vue

<template>
  <div :id="id" :style="{width:width, height:height }"></div>
</template>
<script>
export default{
  name:"testStateMent",
  props:{
    width:{
      default:"400px",
      type:String
    },
    height:{
      default: "600px",
      type:String
    },
    id:{
      default:"echarts",
      type:String
    },
    options:{
      defalut:{},
      type:Object
    }
  },
  data(){
    return {

    }
  }
  ,mounted() {
    const statis = this.$echarts.init(document.getElementById(this.id),'dark')
    this.options = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    statis.setOption(this.options)
  }
}
</script>