如何在VUE项目中使用Echarts图表

Amore﹉

已于 2022-07-18 16:51:13 修改

阅读量497

点赞数

文章标签： echarts vue.js javascript

于 2022-07-18 16:46:51 首次发布

本文链接：https://blog.csdn.net/xz_yy/article/details/125854655

版权

第一步，先下载echarts

npm install echarts --save

第二步，可根据项目需求，如果是多页面引用，需在main.js文件中全局引用

import * as echarts from 'echarts' 

Vue.prototype.$echarts = echarts

第三步，使用

<template>

  <div class="Echarts">

    <div id="main" style="width: 500px;height: 300px;"></div>

  </div>

</template>



<script>

export default {

  name: 'Echarts',

  methods: {

    myEcharts(){

      var myChart = this.$echarts.init(document.getElementById('main'));

      //配置图表

      var option = {

        title: {

          text: 'echarts入门示例',

        },

        tooltip: {},

        legend: {

          data: ['销量']

        },

        xAxis: {

          data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']

        },

        yAxis: {},

        series: [{

          name: '销量',

          type: 'bar',

          data: [5,20,36,10,10,20]

        }]

      };

      myChart.setOption(option);

    }

  },

  mounted(){

    this.myEcharts();

  }

}

</script>



<style></style>