vue2 + echarts + 地图项目学习笔记

最新推荐文章于 2023-10-31 10:01:05 发布

子玖

最新推荐文章于 2023-10-31 10:01:05 发布

阅读量1.6k

点赞数 15

分类专栏：学习笔记文章标签： echarts vue.js

本文链接：https://blog.csdn.net/weixin_61463372/article/details/120616101

版权

本文记录了使用Vue2和Echarts构建地图项目的步骤，包括Echarts的引入、组件使用、Element组件的集成、父子组件通信、vue-echarts组件的使用、地图样式设置、百度地图的引入和样式定制，以及词云图的实现。通过实例详细讲解了每个环节的操作方法和技术要点。

摘要由CSDN通过智能技术生成

### vue2 + echarts + 地图项目学习笔记

##### 一、echarts引入

1. echarts的安装

控制台输入` cnpm install echarts@4.9.0`

因为版本问题，可以使用4.9.0的版本

2. 保证里面的"dependencies"引入了echarts

packge.json

```json
"dependencies": {
"core-js": "^3.6.5",
"echarts": "^5.2.1",
"element-ui": "^2.15.6",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
```

3. 到main.js中引入

``` js
import Echarts from 'echarts'
Vue.prototype.$echarts = Echarts
```

##### 二、components组件使用

1. ` components`文件下新建 ` TopView`, ` SalesView`,` BottomView`,` MapView`

2. 举个例子，在里面的文件新建index.vue

components/BottomView/index.vue

```vue
<template>
<div>bottom view</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

```

3. 引入BottomView

views/Home.vue

```vue
<template>
<div class="home">
<bottom-view />
</div>
</template>

export default {
name: 'Home',
components: {
BottomView
}
}
```

##### 三、element组件使用

1. 如果在components/TopView/index.vue中使用鼠标悬浮效果

```vue

<template>
<div class="top-view">
<el-card shadow="hover">
鼠标悬浮时显示
</el-card>
</div>
</template>
```

2. 在plugins文件中按需引入

plugins/element.js

```js
import Vue from 'vue'
import { Card } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Card)
```

##### 四、复习父向子传参props

1. 父组件：

```vue
<template>
<common-card
title="累计销售额"//传入的关键字
value="￥ 32,039,165"
/>
</template>

<script>
import CommonCard from '../components/CommonCard'
// 引入子组件
export default {
components: {
CommonCard // 注册子组件
}
}

</script>

<style>

</style>

```

2. 子组件：

```vue

<template>
<div class="common-card">
<div class="title">{ {title}}</div>
<div class="value">{ {value}}</div>
</div>
</template>

```

##### 五、父组件传入标签可以用slot

1. 父组件：

```vue
<template>
<common-card>
// 需要template 加上v-slot：name
<template v-slot:footer>
<span>昨日销售量</span>
<span>￥30，000,000</span>
</template>
</common-card>
</template>
```

2. 子组件：

```vue

<template>
<div class="common-card">
// 写入slot标签，加上名字
<slot name="footer"></slot>
</div>
</template>
```

##### 六、vue-echarts组件入了门

为什么需要vue-echarts组件呢？

答：为了更好的优化复杂的自定义组件

##### 七、v-echart组件

使用一些简单的场景中使用，更快更简单

适用：快速生成样式，不需要做过多修改

难点：修改时需要了解很多默认属性

下载：`npm i v-charts echarts -S`

1. 申明v-charts

```javascript
// main.js
import './plugins/vcharts'

```

2. 按需导入

```js
// src\plugins\vcharts.js
// vchart.js

import Vue from 'vue'
// 引入折线图
import VEline from 'v-charts/lib/line.common'

// 注册折线图,这样注册是因为VEline是一个组件
Vue.component('ve-line', VEline)
```

3. salesView页面使用

```vue

<template>

<ve-line :data="data" />
</template>

```

##### 八、设置element样式

1. el-menu水平垂直

````vue
<el-menu mode="horizontal"></el-menu>
````

2. 设置选中状态

```vue
(1)方法一
<el-menu mode="horizontal" :default-active="'1'" >
// :default-active="'1'"设置选中的是‘1’
<el-menu-item index="1">销售额</el-menu-item>
// index="1"为选需要选中的队列，但是个传递出去是个字符串1
// 需要上面默认选中也设置成一个格式
<el-menu-item index="2">访问量</el-menu-item>
</el-menu>
```

```vue
(2)方法二
// 在方法里面设置
<script>
export default {
data () {
return {
activeIndex: '1'
}
}
}
</script>

//然后去调用
<el-menu mode="horizontal" :default-active="activeIndex" >
<el-menu-item index="1">销售额</el-menu-item>
<el-menu-item index="2">访问量</el-menu-item>
</el-menu>
```

3. 设置监听salect

```vue
<el-menu mode="horizontal" :default-active="