在Vue中使用echarts

一、在Vue中使用echarts

1、安装 echarts 依赖：echarts

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

2、创建图表

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

3、按需引入

// 由于全局引入会将所有的echarts图表打包，导致体积过大
// 在Echarts.vue文件中
// 使用 require 而不是 import

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

二、Apache ECharts 官网

1、新版官网

2、旧版官网