vue-cli 中引入 ECharts

安装好vue-cli后，cd 到项目目录下，npm 安装ECharts

npm install echarts --save

安装好后就正式开始:

方式一

在 src >> assets 下新建名为 js 的文件夹，并在该文件夹下创建 myCharts.js 文件
这个文件用来写所有的 ECharts 图表方法都封装在这里

import echarts from 'echarts'
let install = function(Vue) {
    Object.defineProperties(Vue.prototype, {
        $chart: {
            get() {
                return {
                    //一个简单的示例
                    first_bar: function (id) {
                        this.chart = echarts.init(document.getElementById(id));
                        this.chart.clear();
                        const optionData = {
                            title: {
                                text: 'ECharts 入门示例'
                            },
                            tooltip: {},
                            xAxis: {
                                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                            },
                            yAxis: {},
                            series: [{
                                name: '销量',
                                type: 'bar',
                                data: [5, 20, 36, 10, 10, 20]
                            }]
                        };
                        this.chart.setOption(optionData);
                    },
                }
            }
        }
    })
}
export default {
    install
}

在 main.js 文件内引入刚刚所创建的文件

import myCharts from '@/assets/js/myCharts' //引入eCharts 文件
Vue.use(myCharts)

在需要引入ECharts图表的插件页，调用已封装的方法，在页面上画出图表

<template>
    <div id="chart"></div>
</template>

<script>
export default {
    name: 'Home',
    mounted() {
        this.$chart.first_bar('chart'); //方法调用
    }
}
</script>

<style scoped>
    #chart {
        width: 300px;
        height: 300px;
    }
</style>

最后，在页面上就可以看到画好的图表了

示例截图.png

方式二（推荐）

不同于方式一，这种方式不需要新建单独文件，也不需要在main.js中引入，只需要在需要编辑图表的组件中，如下：

import echarts from 'echarts' //引入echarts
export default {
    name: 'comRadar', //组件名
    data(){ //子组件中定义data,必须是一个方法，并返回实例值，data:function(){return{}}
        return {
            myChart: {},
        }
    },
    methods:{//方法
        Init:function() {  //父级div大小改变，图表跟着变化，也可以写成 Init(){}
            window.addEventListener('resize', function() {
                this.myChart.resize()
            }.bind(this))
        }
    },
    mounted() {//生命周期钩子
        this.myChart = echarts.init(document.getElementById("radar_case"));
        let optionData = {
            //图表数据（略）
        };
        this.myChart.setOption(optionData)
        this.Init() //方法调用
    },

这样就可以了，同时这种方式，图表大小可以根据窗口改变大小。