vue项目中引入echarts图表

一、 在vue项目开发中使用echarts,推荐使用vue-echarts官方地址

二、vue项目集成vue-echarts

• 1、使用vue-cli创建一个项目

• 2、安装依赖包

  yarn add vue-echarts
  

• 3、在组件中使用

  <template>
    <div>
      <chart :options="chartPieData" auto-resize ref="chartPie" :style="{width: '100%'}"></chart>
    </div>
  </template>
  
  <script>
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/pie'
  export default {
    data () {
      return {
        chartPieData: {
        		// 直接去echarts官方复制,里面的api跟echarts官网的一样
        }
      }
    },
    methods: {
      // 重置图表大小
      chartResize () {
        window.setTimeout(() => {
          this.$refs.chartPie.resize()
        }, 60)
      }
    },
    mounted () {
      window.addEventListener('resize', this.chartResize)
    },
    destroyed () {
      window.removeEventListener('resize', this.chartResize)
    },
    components: {
      chart: ECharts
    }
  }
  </script>
  
  <style scoped>
  </style>
  
  

• 4、更多信息可以查看相应的api

三、代码下载

四、查看博主更多文章