vue2 + echarts + 地图项目学习笔记 |
您所在的位置：网站首页 › echarts引入高德 › vue2 + echarts + 地图项目学习笔记 |
vue2 + echarts + 地图项目学习笔记
|
一、echarts引入
echarts的安装 控制台输入 cnpm install [email protected] 因为版本问题，可以使用4.9.0的版本 保证里面的"dependencies"引入了echarts packge.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" }, 复制代码 到main.js中引入 import Echarts from 'echarts' Vue.prototype.$echarts = Echarts 复制代码 二、components组件使用components文件下新建 TopView, SalesView, BottomView, MapView 举个例子，在里面的文件新建index.vue components/BottomView/index.vue bottom view export default { } 复制代码引入BottomView views/Home.vue // @ is an alias to /src import BottomView from '../components/BottomView' export default { name: 'Home', components: { BottomView } } 复制代码 三、element组件使用如果在components/TopView/index.vue中使用鼠标悬浮效果 鼠标悬浮时显示 复制代码在plugins文件中按需引入 plugins/element.js import Vue from 'vue' import { Card } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Card) 复制代码 四、复习父向子传参props父组件： import CommonCard from '../components/CommonCard' // 引入子组件 export default { components: { CommonCard // 注册子组件 } } 复制代码子组件： {{title}} {{value}} export default { // 设置title传入的值为字符型 props: { title: String, value: String } } 复制代码 五、父组件传入标签可以用slot父组件： // 需要template 加上v-slot：name 昨日销售量 ￥30，000,000 复制代码子组件： // 写入slot标签，加上名字 复制代码 六、vue-echarts组件入了门为什么需要vue-echarts组件呢？ 答：为了更好的优化复杂的自定义组件 七、v-echart组件使用一些简单的场景中使用，更快更简单 适用：快速生成样式，不需要做过多修改 难点：修改时需要了解很多默认属性 下载：npm i v-charts echarts -S 申明v-charts // main.js import './plugins/vcharts' 复制代码 按需导入 // src\plugins\vcharts.js // vchart.js import Vue from 'vue' // 引入折线图 import VEline from 'v-charts/lib/line.common' // 注册折线图,这样注册是因为VEline是一个组件 Vue.component('ve-line', VEline) 复制代码 salesView页面使用 export default { //这条语句必须写，不然会报错 /* eslint-disable */ data () { return { data: { columns: ['日期', '销售额'], rows: [ { '日期': '1月1日', '销售额': 123 }, { '日期': '1月2日', '销售额': 1223 }, { '日期': '1月3日', '销售额': 2123 }, { '日期': '1月4日', '销售额': 4123 }, { '日期': '1月5日', '销售额': 3123 }, { '日期': '1月6日', '销售额': 7123 } ] } } } } .echarts { width: 100%; height: 100%; } 复制代码 八、设置element样式 el-menu水平垂直 复制代码 设置选中状态 (1)方法一 // :default-active="'1'"设置选中的是‘1’ 销售额 // index="1"为选需要选中的队列，但是个传递出去是个字符串1 // 需要上面默认选中也设置成一个格式 访问量 复制代码 (2)方法二 // 在方法里面设置 export default { data () { return { activeIndex: '1' } } } //然后去调用 销售额 访问量 复制代码 设置监听salect 销售额 访问量 // 监听事件为onMenu export default { data () { return { activeIndex: '1' } }, methods: { // 监听menu的点击事件 onMenuSalect (index) { this.activeIndex = index console.log(this.activeIndex) } } } 复制代码日期表组件： 设置可以选择一段时间的效果 复制代码 设置中间的文字现在是条杠-:class="+item.no |
【本文地址】
今日新闻 |
推荐新闻 |