文章目录
- 🌟前言
- 🌟效果展示
- 🌟使用Echarts
- 🌟Echarts官网
- 🌟体验示例小程序
- 🌟下载
- 🌟引入组件
- 🌟创建图表
- 🌟暂不支持的功能
- 🌟使用地图
- 🌟map组件
- 🌟创建图表
- 🌟写在最后
🌟前言
哈喽小伙伴们,小程序的新星计划在这周也进入了尾声,回顾一个月输出小程序相关文章以来,收获颇多充实了很多;大家一定在项目需求当中遇到过需要使用 Echarts
和 地图组件
吧;今天这篇文章我会带领大家去实际的操作一下;话不多说,咱们直接开整!🤘
🌟效果展示
🌟使用Echarts
🌟Echarts官网
Echarts官方介绍微信小程序使用Echarts
🌟体验示例小程序
在微信中扫描下面的二维码即可体验 ECharts Demo:
🌟下载
为了兼容小程序 Canvas,我们提供了一个小程序的组件,用这种方式可以方便地使用 ECharts。
首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
其中,ec-canvas
是我们提供的组件,其他文件是如何使用该组件的示例。
ec-canvas 目录下有一个 echarts.js,默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要,可以自行从 ECharts 项目中下载最新发布版,或者从官网自定义构建以减小文件大小。
🌟引入组件
在创建项目之后,可以将下载的 ecomfe/echarts-for-weixin
项目完全替换新建的项目,然后将修改代码;或者仅拷贝 ec-canvas
目录到新建的项目下,然后做相应的调整。
如果采用完全替换的方式,需要将 project.config.json
中的 appid
替换成在公众平台申请的项目 id
。pages
目录下的每个文件夹是一个页面,可以根据情况删除不需要的页面,并且在 app.json 中删除对应页面。
如果仅拷贝 ec-canvas
目录,则可以参考 pages/bar
目录下的几个文件的写法。下面,我们具体地说明。
🌟创建图表
首先,在
pages/echarts
目录下新建一个echarts
Page,会自动为我们生成echarts .js
、echarts .json
、echarts .wxm
l、echarts .wxss
。
echarts.json
配置如下:
{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
}
这一配置的作用是,允许我们在 pages/echarts/index.wxml 中使用
<ec-canvas>
组件。注意路径的相对位置要写对,如果目录结构和本例相同,就应该像上面这样配置。
echarts .wxml
中,我们创建了一个 组件,内容如下:
其中 ec
是一个我们在 echarts.js
中定义的对象,它使得图表能够在页面加载后被初始化并设置。echarts.js
的结构如下:
<!--pages/echarts/echarts.wxml-->
<view class="container"><ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
echarts.wxss
配置如下:
/* pages/echarts/echarts.wxss */
ec-canvas {width: 100%;height: 100%;
}
echarts.js
配置如下:
// pages/echarts/echarts.js
import * as echarts from '../../ec-canvas/echarts';let chart = null;function initChart(canvas, width, height, dpr) {chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});canvas.setChart(chart);var option = {tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器,坐标轴触发有效type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'},confine: true},legend: {data: ['热度', '正面', '负面']},grid: {left: 20,right: 20,bottom: 15,top: 40,containLabel: true},xAxis: [{type: 'value',axisLine: {lineStyle: {color: '#999'}},axisLabel: {color: '#666'}}],yAxis: [{type: 'category',axisTick: { show: false },data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],axisLine: {lineStyle: {color: '#999'}},axisLabel: {color: '#666'}}],series: [{name: '热度',type: 'bar',label: {normal: {show: true,position: 'inside'}},data: [300, 270, 340, 344, 300, 320, 310],itemStyle: {// emphasis: {// color: '#37a2da'// }}},{name: '正面',type: 'bar',stack: '总量',label: {normal: {show: true}},data: [120, 102, 141, 174, 190, 250, 220],itemStyle: {// emphasis: {// color: '#32c5e9'// }}},{name: '负面',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'left'}},data: [-20, -32, -21, -34, -90, -130, -110],itemStyle: {// emphasis: {// color: '#67e0e3'// }}}]};chart.setOption(option);return chart;
}
Page({/*** 页面的初始数据*/data: {ec: {onInit: initChart}},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {setTimeout(function () {// 获取 chart 实例的方式// console.log(chart)}, 2000);}
})
这对于所有 ECharts 图表都是通用的,用户只需要修改上面 option 的内容,即可改变图表。option 的使用方法参见 ECharts 配置项文档。对于不熟悉 ECharts 的用户,可以参见 5 分钟上手 ECharts 教程。
完整的例子请参见 ecomfe/echarts-for-weixin 项目。
🌟暂不支持的功能
ECharts 中的绝大部分功能都支持小程序版本,因此这里仅说明不支持的功能,以及存在的问题。
以下功能尚不支持,如果有相关需求请在 issue 中向我们反馈,对于反馈人数多的需求将优先支持:
- Tooltip
- 图片
- 多个 zlevel 分层
此外,目前还有一些 bug 尚未修复,部分需要小程序团队配合上线支持,但不影响基本的使用。已知的 bug 包括:
- 安卓平台:transform 的问题(会影响关系图边两端的标记位置、旭日图文字位置等)
- iOS 平台:半透明略有变深的问题
- iOS 平台:渐变色出现在定义区域之外的地方
🌟使用地图
🌟map组件
map组件 提供了地图展示、交互、叠加点线面及文字等功能,同时支持个性化地图样式,可结合地图服务 API 实现更丰富功能。
更多map组件配置项请查看 官方文档
🌟创建图表
首先,在
component/map
目录下新建一个map
Component,会自动为我们生成map.js
、map.json
、map.wxm
l、map.wxss
。
map.wxml
<map id="map" controls longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="14" style="width: 100%;height: 100%;"></map>
map.wxss
page{width: 100%;height: 100%;
}
map.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {markers: [],latitude: '',longitude: ''},lifetimes: {// 生命周期函数,可以为函数,或一个在methods段中定义的方法名attached: function () {console.log('QQmap');},moved: function () {},detached: function () {},},// 生命周期函数,可以为函数,或一个在methods段中定义的方法名attached: function () {}, // 此处attached的声明会被lifetimes字段中的声明覆盖ready: function () {this.getLocation()},pageLifetimes: {// 组件所在页面的生命周期函数show: function () {},hide: function () {},resize: function () {},},/*** 组件的方法列表*/methods: {//获取位置getLocation() {this.mapCtx = wx.createMapContext('myMap')// 调用接口wx.getLocation({type: 'gcj02',success: (res) => {// console.log("res", res)if (res) {this.setData({latitude: res.latitude,longitude: res.longitude,markersStatus: true,markers: [{id: 1,latitude: res.latitude,longitude: res.longitude,// 这个zIndex一定要有,并且不能是一个固定值,否则会出现标记点和label,callout层级混乱zIndex: 1}]})} else {wx.showToast({title: '定位失败',icon: 'none',duration: 1500})}// qqmapsdk.reverseGeocoder({// success: (res) => {// console.log('=============', res)// },// });},fail(err) {wx.hideLoading({});console.log("asafasfs", err)// wx.showToast({// title: '定位失败',// icon: 'none',// duration: 1500// })setTimeout(function () {// wx.navigateBack({// delta: 1// })}, 1500)}})}}
})
🌟写在最后
这篇文章给大家讲解了一下在小程序当中如何引入Echarts图表和地图组件,后续会持续更多小程序知识与API,尽请期待。各位小伙伴让我们 let’s be prepared at all times!
✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!