微信小程序+Echarts制图详细步骤

1.下载微信开发者工具

稳定版 Stable Build | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 根据自身电脑系统选择下载

2. 新建小程序

安装好后&＃xff0c;启动微信开发者工具&＃xff0c;点击&＃43;号新建小程序

 AppID的话&＃xff0c;要么选择自己注册过的ID&＃xff0c;要么点击红框中的“测试号”&＃xff0c;系统会自动给一个随机ID。模板选择Javascript。然后再点击确定。

 打开后界面长这样&＃xff1a;

 3. 新建页面

右击pages文件夹&＃xff0c;选择新建文件夹

 然后右击新建的文件夹“1”&＃xff0c;选择新建Page&＃xff0c;会自动生成4个文件

 4. 引入Echarts组件

关掉小程序。

打开链接&＃xff0c;点击克隆&＃xff0c;下载组件

mirrors / ecomfe / echarts-for-weixin · GitCodehttps://gitcode.net/mirrors/ecomfe/echarts-for-weixin?utm_source&＃61;csdn_github_accelerator&from_codechina&＃61;yes

 复制ec-canvas到小程序文件夹中

复制完后&＃xff1a;

 5. 绘制图表

以折线图为例。

打开小程序项目&＃xff0c;编写代码。

点击1.js


import * as echarts from &＃39;../../ec-canvas/echarts&＃39; // 这个是自己实际的目录
function initChart(canvas, width, height, dpr) { // 这部分是固定的不需要 是通用的const chart &＃61; echarts.init(canvas, null, {width: width,height: height});canvas.setChart(chart);// 这是 唯一需要更改的&＃xff0c;可根据实际情况api更改图标// option里根据需求修改var option &＃61; {color: [&＃39;#80FFA5&＃39;, &＃39;#00DDFF&＃39;, &＃39;#37A2FF&＃39;, &＃39;#FF0087&＃39;, &＃39;#FFBF00&＃39;],title: {//text: &＃39;Gradient Stacked Area Chart&＃39;},tooltip: {trigger: &＃39;axis&＃39;,axisPointer: {type: &＃39;cross&＃39;,label: {backgroundColor: &＃39;#6a7985&＃39;}}},legend: {data: [&＃39;Line 1&＃39;, &＃39;Line 2&＃39;, &＃39;Line 3&＃39;, &＃39;Line 4&＃39;, &＃39;Line 5&＃39;]},toolbox: {feature: {saveAsImage: {}}},grid: {left: &＃39;3%&＃39;,right: &＃39;4%&＃39;,bottom: &＃39;3%&＃39;,containLabel: true},xAxis: [{type: &＃39;category&＃39;,boundaryGap: false,data: [&＃39;Mon&＃39;, &＃39;Tue&＃39;, &＃39;Wed&＃39;, &＃39;Thu&＃39;, &＃39;Fri&＃39;, &＃39;Sat&＃39;, &＃39;Sun&＃39;]}],yAxis: [{type: &＃39;value&＃39;}],series: [{name: &＃39;Line 1&＃39;,type: &＃39;line&＃39;,stack: &＃39;Total&＃39;,smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: &＃39;rgb(128, 255, 165)&＃39;},{offset: 1,color: &＃39;rgb(1, 191, 236)&＃39;}])},emphasis: {focus: &＃39;series&＃39;},data: [140, 232, 101, 264, 90, 340, 250]},{name: &＃39;Line 2&＃39;,type: &＃39;line&＃39;,stack: &＃39;Total&＃39;,smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: &＃39;rgb(0, 221, 255)&＃39;},{offset: 1,color: &＃39;rgb(77, 119, 255)&＃39;}])},emphasis: {focus: &＃39;series&＃39;},data: [120, 282, 111, 234, 220, 340, 310]},{name: &＃39;Line 3&＃39;,type: &＃39;line&＃39;,stack: &＃39;Total&＃39;,smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: &＃39;rgb(55, 162, 255)&＃39;},{offset: 1,color: &＃39;rgb(116, 21, 219)&＃39;}])},emphasis: {focus: &＃39;series&＃39;},data: [320, 132, 201, 334, 190, 130, 220]},{name: &＃39;Line 4&＃39;,type: &＃39;line&＃39;,stack: &＃39;Total&＃39;,smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: &＃39;rgb(255, 0, 135)&＃39;},{offset: 1,color: &＃39;rgb(135, 0, 157)&＃39;}])},emphasis: {focus: &＃39;series&＃39;},data: [220, 402, 231, 134, 190, 230, 120]},{name: &＃39;Line 5&＃39;,type: &＃39;line&＃39;,stack: &＃39;Total&＃39;,smooth: true,lineStyle: {width: 0},showSymbol: false,label: {show: true,position: &＃39;top&＃39;},areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: &＃39;rgb(255, 191, 0)&＃39;},{offset: 1,color: &＃39;rgb(224, 62, 76)&＃39;}])},emphasis: {focus: &＃39;series&＃39;},data: [220, 302, 181, 234, 210, 290, 150]}]};chart.setOption(option);return chart;
}Page({data: {ec: {onInit: initChart}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})


其中&＃xff0c;option中的内容根据选择的图标样式而更改&＃xff0c;可以直接从Echarts官网中获取。

全选左边框中的代码&＃xff0c;对1.js中的option进行更改即可。

1.json

{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
}

1.wxml

1.wxss

/* pages/1/1.wxss */
/**index.wxss**/
ec-canvas {width: 100%; //宽度、高度自行调整height: 70%;}.container {position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;flex-direction: column;align-items: center;justify-content: space-between;box-sizing: border-box;} .picker-pos{margin-top: -130rpx;margin-left: 150rpx;color: blueviolet}

还有很关键的一步&＃xff0c;需要修改app.json中的内容&＃xff0c;不然你就会发现点击了编译后折线图没有出来&＃xff0c;还是维持原来页面。

之前“pages/1/1”在最下面&＃xff0c;“pages/index/index”在最上面&＃xff0c;会导致小程序先打开index页面&＃xff0c;所以1页面中的折线图显示不出来。要把“pages/1/1”挪到最上面。

 修改完后重新编译&＃xff0c;就会出现折线图了。