走进小程序【十一】微信小程序【使用Echarts 和 腾讯地图】
文章目录
- 🌟前言
- 🌟效果展示
- 🌟使用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目录下新建一个echartsPage,会自动为我们生成echarts .js、echarts .json、echarts .wxml、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目录下新建一个mapComponent,会自动为我们生成map.js、map.json、map.wxml、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！
✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！