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

系统管理员 2022-12-19 08:39 556阅读 0赞

## 一、完整引入Echarts ##

1.  下载安装echarts包
    
        npm install echarts -S
        
         or
        
         yarn add echarts
2.  定义图表显示的容器，并进行渲染
    
        <template>
              <div id="myChart" ref="myChart"></div>     
         </template>
         <style>
             #myChart {
                 width: 95%;
                 height: 300px;
                 margin: 20px auto;
                 border: 1px solid #CCC
             }
         </style>
         <script>
         // 引入完整的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]
                             }
                         ]                       
                     })
                 }
             }
         }
         </script>

看效果：

![a2546086a058f8b96d6d1f36d40975eb.png][]

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，绘制图表
    
        <template>
             // ... 与上面实例相同
         </template>
         <style>
             // ... 与上面实例相同
         </style>    
         <script>
         // 重点：此位置引入的是你单独配置的echarts
         import echarts from '@/lib/echarts'
         export default {
             mounted () {
                 // ...与上面实例相同
             },
             methods: {
                 draw () {
                     // ... 与上面实例相同
                 }
             }
         }   
         </script>

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

## 三、引入插件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][https_echarts.apache.org_zh_theme-builder.html]进行主题的配置然后，下载主题色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

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

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

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

[a2546086a058f8b96d6d1f36d40975eb.png]: /images/20221120/f0155abbb40543f795da8d8e8a46a9c5.png
[https_echarts.apache.org_zh_theme-builder.html]: https://echarts.apache.org/zh/theme-builder.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: /images/20221120/cedc2499bbbf4894be3679a5f0d4b1c2.png