vue项目中Echarts图表完整引入、按需加载以及修改主题色

一、完整引入Echarts

1. 下载安装echarts包

    npm install echarts -S
   
    or
   
    yarn add echarts

2. 定义图表显示的容器，并进行渲染

    
         
        
    
    
        #myChart {
            width: 95%;
            height: 300px;
            margin: 20px auto;
            border: 1px solid #CCC
        }
    
    
    // 引入完整的echarts
    import echarts from 'echarts'
    export default {
        mounted () {
            // 调用绘制图表的方法
            this.draw();
        },
        methods: {
            draw () {
                // 实例化echarts对象
                myChart = echarts.init(this.$refs.myChart)
                
                // 绘制条形图
                myChart.setOption({
                    title: {
                        text: 'Echarts 入门实例',
                        top: 5,
                        left: 'center'
                    },
                    legend: {
                        data: ['衣服', '帽子', '裤子', '鞋子'],
                        top: 30
                    },
                    // X轴
                    xAxis: {
                        data: [
                            '一月', '二月', '三月', '四月'
                        ]
                    },
                    // Y轴
                    yAxis: {},
                    // 数据
                    series: [
                        {
                            name: '衣服',
                            type: 'bar',
                            data: [120, 100, 440, 320]
                        },
                        {
                            name: '帽子',
                            type: 'bar',
                            data: [200, 120, 240, 330]
                        },
                        {
                            name: 'bar',
                            type: 'line',
                            data: [120, 200, 240, 260, 300]
                        },
                        {
                            name: 'bar',
                            type: 'line',
                            data: [120, 200, 300, 140, 260]
                        }
                    ]                       
                })
            }
        }
    }
    
   

看效果：

Echarts的条形图bar

缺点：如果是完整的引入Echarts，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验。

二、Echarts 按需加载

1. 专门设置一个echarts配置文件

    // 文件路径 @/lib/echarts.js 自行配置
    
    // 加载echarts，注意引入文件的路径
    import echarts from 'echarts/lib/echarts'
    
    // 再引入你需要使用的图表类型，标题，提示信息等
    import 'echarts/lib/chart/bar'
    import 'echarts/lib/chart/line'
    import 'echarts/lib/component/legend'
    import 'echarts/lib/component/title'
    
    export default echarts
   

2. 在需要的组件内加载echarts，绘制图表

    
        // ... 与上面实例相同
    
    
        // ... 与上面实例相同
        
    
    // 重点：此位置引入的是你单独配置的echarts
    import echarts from '@/lib/echarts'
    export default {
        mounted () {
            // ...与上面实例相同
        },
        methods: {
            draw () {
                // ... 与上面实例相同
            }
        }
    }   
    
   

按此方式打包的项目，会只加载引用你所使用的图表、标题、提示信息等组件，降低了应用文件体积，实现按需加载

三、引入插件babel-plugin-equire,配合实现Echarts按需引入

在上面的实例中，我们单独配置的echarts文件，需要引入对应的图表、标题、提示信息等，都需要我们手动进行加载，比较麻烦。引入babel-plugin-equire插件，方便使用。

1. 下载babel-plugin-equire

    npm install babel-plugin-equire -D
    
    or
   
    yarn add babel-plugin-equire --dev
   

2. 在.babelrc文件中的配置

    "plugins": [
        "... 其他插件",
        "equire"
    ]
   

3. 修改@/lib/echarts文件

    // eslint-disable-next-line
    const echarts = equire([
        // 写上你需要的
        'bar',
        'line',
        'legend',
        'title'
    ])
    
    export default echarts
   

4. 和上面案例配置是相同的，可以更加愉快的玩耍...

     三、Echarts 修改主题色加载 

     1、在main.js里引入echarts主题的js，一般在  node_modules---echarts---theme---macarons.js。  theme里边有各种各样的主题，任意选一种，这里我选的是macarons。引入：

import  'echarts/theme/macarons.js'

或者在https://echarts.apache.org/zh/theme-builder.html进行主题的配置然后，下载主题色 

然后将下载的shine.js放到本地引入。 

  2、在echarts初始化时，使用主题。

let myChart = this.$echarts.init(document.getElementById('myChart01'),'macarons');