vue中引入使用echarts

最新推荐文章于 2025-03-19 14:28:07 发布

Flower！important

最新推荐文章于 2025-03-19 14:28:07 发布

阅读量323

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/sanflow/article/details/107675732

版权

1，首先，当然是 npm install echarts -S

2，然后在main 中引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3，然后就可以用了下面举个简单栗子

  mounted () {
    this.init();
  },
  methods: {
    init () {
      var echarts = require('echarts');
      var myChart = echarts.init(document.getElementById('main'));
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    }
  }
}

4,按需引入

let echarts = require('echarts/lib/echarts')

require('echarts/lib/chart/bar')

require('echarts/lib/component/tooltip')

require('echarts/lib/component/title')

就ok了