Vue中使用echarts图表插件

Vue中使用echarts图表插件
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

一、安装echarts依赖

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

二、创建图表

  • 首先需要全局引入
  • 在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元素已经挂载到页面中

 

Vue中使用echarts图表插件

 

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

三、按需引入

  • 由于全局引入会将所有的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

四、以组件的形式用echarts

  • 从上边可以看出,你每次在使用echarts的时候,都必须要重复的引入,这样很不方便
  • vue作为一个组件化开发的框架,我们可以使用组件的方式进行集成。每次我们引入组件,进行使用,这样就方便的多。

对echarts进行的一个简单的vue组件的集成。
在echarts中

  • 子组件:

Vue中使用echarts图表插件

 

props部分是我接收到的参数,父组件获取数据分发,data是父组件分发给echarts的数据源。

  • 父组件:

Vue中使用echarts图表插件

 

 

 

本文来源huayang183,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/18569

发表评论