vue中引入echarts的两种方式

最新推荐文章于 2024-10-18 21:42:59 发布

coldriversnow

最新推荐文章于 2024-10-18 21:42:59 发布

阅读量4.2k

点赞数

文章标签： vue

原文链接：https://www.cnblogs.com/whblogs/p/10510701.html

版权

1.安装echarts依赖

　　npm install echarts -S

2.创建图表

a:全局引入

main.js页面

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Hello.vue页面

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

<script>
export default {
  name: 'FuncFormsBase',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.drawLine();
  },
  methods: {
    drawLine () {
      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]
        }]
      });
    }
  }
}
</script>

<style scoped>
</style>

b:按需引入

上面全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需引入。

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: 'ECharts 入门示例' },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    }
  }
}

转载于：https://www.cnblogs.com/whblogs/p/10510701.html

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~

我的示例是在vue-cli搭建

安装echarts依赖

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

作者：margery
链接：https://www.jianshu.com/p/cf0a54374419
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

创建图表

首先需要全局引入
在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在Echarts.vue中

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

这样一个简单的图表就完成了，是不是觉得很简单？假如在一个大型的项目中，而且数据是非常复杂的？那么该如何操作？

按需引入

由于全局引入会将所有的echarts图表打包，导致体积过大
在Echarts.vue文件中

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

使用 require 而不是 import

基于前面的疑问，加上实际运用到项目中遇到的一些问题，我思考使用组件的形式。