vue中使用echarts

最新推荐文章于 2024-09-27 10:54:32 发布

四月_h

最新推荐文章于 2024-09-27 10:54:32 发布

阅读量639

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/weixin_46389242/article/details/124664545

版权

在vue项目中使用echarts：
第一步，先下载echarts

npm install echarts --save

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

import * as echarts from 'echarts'
//import echarts from 'echarts'这种写法引入不生效
Vue.prototype.$echarts = echarts

第三步，使用方法


<template>
  <div class="Echarts">
    <div id="main" style="width: 600px;height: 400px;"></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>