Vue项目中集成Echarts

r囧r小猫 2023-03-01 09:04 51阅读 0赞

# Vue项目中集成Echarts #

### 这里主要使用两个`封装Echarts`的库： ###

### `v-charts`和`Vue-Echarts` ###

## v-charts ##

### [github地址][github] ###

### [v-charts官网][v-charts] ###

### 使用 ###

#### 安装 ####

npm i v-charts echarts -S

#### 结合Element一起使用 ####

<template>
        <div id="charts">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">
              <ve-Scatter :data="chartData"></ve-Scatter>
            </el-tab-pane>
          </el-tabs>
        </div>
    </template>
    
    <script>
      //按需引入 
      import VeScatter from 'v-charts/lib/scatter.common'
      export default { 
        components: {  VeScatter },
        name: "charts",
        data () { 
          return { 
            chartData: { 
              columns: ['日期', '访问用户', '下单用户', '年龄'],
              yAxisName:'demo',
              xAxisName:'demo',
              rows: [
                {  '日期': '2020/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
                {  '日期': '2020/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
                {  '日期': '2020/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
                {  '日期': '2020/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
                {  '日期': '2020/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
                {  '日期': '2020/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
              ]
            },
            activeName: 'first'
          }
        },
        methods: { 
          handleClick(tab, event) { 
            console.log(tab, event);
          }
        }
      }
    </script>
    
    <style scoped>
      #charts{ 
        height: 300px;
      }
    </style>

#### 效果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]

### 评价： ###

#### 优点： ####

因为是`饿了么`团队出的，所以结合`Element`使用非常好，使用起来很简单

#### 缺点： ####

##### （1）封装的图表类型有限 #####

包含折线图、柱状图、条形图、饼图  
环图、瀑布图、漏斗图、雷达图、地图、桑基图、热力图、散点图、K线图、仪表盘、树图、水球图等十几个类型，但`关系图`类型并没有封装，就需要使用`Vue-ECharts`

##### （2）官网配置不全 #####

需要到Echarts中自行查询更详细的配置

## Vue-ECharts ##

### [github地址][github 1] ###

### 使用 ###

#### 安装 ####

npm install echarts vue-echarts

#### 使用 ####

##### 全局注册： #####

//main.js
    ...
    //全局引入
    import ECharts from 'vue-echarts'
    
    ...
    //注册全局组件
    Vue.component('v-chart', ECharts)

##### vue.config.js配置 #####

module.exports = { 
        devServer: { 
            open: true,
            port: 8878
        },
        transpileDependencies: [
          'vue-echarts',
          'resize-detector'
        ]
    }

##### 组件中使用 #####

<template>
        <v-chart :options="polar"/>
    </template>
    
    <script>
    
        import ECharts from 'vue-echarts'
        //按需引入
        import 'echarts/lib/chart/graph'
        import 'echarts/lib/component/polar'
    
        export default { 
          components: { 
            'v-chart': ECharts
          },
          name:"Graph",
          data () { 
            return { 
              //这里的配置是直接从Echarts中copy的
              polar: { 
                title: { 
                  text: ''
                },
                tooltip: { },
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                label: { 
                  normal: { 
                    show: true,
                    textStyle: { 
                      fontSize: 12
                    },
                  }
                },
                legend: { 
                  x: "center",
                  show: false,
                  data: ["1", "2", '3']
                },
                series: [
    
                  { 
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 45,
                    focusNodeAdjacency: true,
                    roam: true,
                    categories: [{ 
                      name: '1',
                      itemStyle: { 
                        normal: { 
                          color: "#009800",
                        }
                      }
                    }, { 
                      name: '2',
                      itemStyle: { 
                        normal: { 
                          color: "#4592FF",
                        }
                      }
                    }, { 
                      name: '3',
                      itemStyle: { 
                        normal: { 
                          color: "#3592F",
                        }
                      }
                    }],
                    label: { 
                      normal: { 
                        show: true,
                        textStyle: { 
                          fontSize: 12
                        },
                      }
                    },
                    force: { 
                      repulsion: 1000
                    },
                    edgeSymbolSize: [4, 50],
                    edgeLabel: { 
                      normal: { 
                        show: true,
                        textStyle: { 
                          fontSize: 10
                        },
                        formatter: "{c}"
                      }
                    },
                    data: [{ 
                      name: '节点0',
                      draggable: true,
                    }, { 
                      name: '节点1',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点2',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点3',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点4',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点5',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点6',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点7',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点8',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点9',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点10',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点11',
                      category: 1,
                      draggable: true,
                    }, { 
                      name: '节点12',
                      category: 1,
                      draggable: true,
                    }],
                    links: [{ 
                      source: 0,
                      target: 1,
                      category: 0,
                      value: '0-1'
                    }, { 
                      source: 0,
                      target: 2,
                      value: '0-2'
                    }, { 
                      source: 0,
                      target: 3,
                      value: '0-3'
                    }, { 
                      source: 0,
                      target: 4,
                      value: '0-4'
                    }, { 
                      source: 1,
                      target: 2,
                      value: '1-2'
                    }, { 
                      source: 0,
                      target: 5,
                      value: '0-5'
                    }, { 
                      source: 4,
                      target: 5,
                      value: '4-5'
                    }, { 
                      source: 2,
                      target: 8,
                      value: '2-8'
                    }, { 
                      source: 0,
                      target: 12,
                      value: '0-12'
                    }, { 
                      source: 6,
                      target: 11,
                      value: '6-11'
                    }, { 
                      source: 6,
                      target: 3,
                      value: '6-3'
                    }, { 
                      source: 7,
                      target: 5,
                      value: '7-5'
                    }, { 
                      source: 9,
                      target: 10,
                      value: '9-10'
                    }, { 
                      source: 3,
                      target: 10,
                      value: '3-10'
                    }, { 
                      source: 2,
                      target: 11,
                      value: '2-11'
                    }],
                    lineStyle: { 
                      normal: { 
                        opacity: 0.9,
                        width: 1,
                        curveness: 0
                      }
                    }
                  }
                ]
              }
            }
          }
      }
    
    </script>
    
    <style scoped>
      .echarts { 
        width: 100%;
        height: 100%;
      }
    </style>

### 效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]

### 评价 ###

#### 优点 ####

可以使用Echarts中的任何组件，而且可以直接拷贝Echarts实例的代码使用

#### 缺点 ####

配置略为繁琐

[github]: https://github.com/ElemeFE/v-charts
[v-charts]: https://v-charts.js.org
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]: /images/20230209/ff1c1bc38e43417488aa6ec75d3088a6.png
[github 1]: https://github.com/ecomfe/vue-echarts
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200723102420365.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx,size_16,color_FFFFFF,t_70