微信小程序_08_echart折线图

历史文章目录连接：

https://blog.csdn.net/yy763496668/article/details/113117040

此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

正文：

在业务上，有时候需要通过一些图表的方式展示数据，让用户一目了然的了解数据。本片文章记录的就是折线图。

准备工作：

下载echarts 插件地址：https://github.com/ecomfe/echarts-for-weixin

通过地址可以看出，这个插件是专门针对微信出的echarts插件

引入组件：

修改配置文件 userStatistics.json：

{"usingComponents": {"ec-canvas": "../../../components/ec-canvas/ec-canvas"},"navigationBarTitleText":"用户统计"
}

修改 userStatistics.wxml

编写图标样式 userStatistics.wxss:

.container1 {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;
}
ec-canvas {width: 100%;height: 100%;
}

编写 userStatistics.js:

// pages/statisticsPages/userStatistics/userStatistics.js
import * as echarts from '../../../components/ec-canvas/echarts';const app = getApp();function initChart(canvas, width, height) {const chart = echarts.init(canvas, null, {width: width,height: height});canvas.setChart(chart);var option = {//折线图标题title: {text: '用户统计',left: 'center'},// 折线图线条的颜色color: ["#37A2DA", "#67E0E3", "#9FE6B8","  #FFB6C1"],// 折线图的线条代表意义legend: {itemWidth:5,//小圆点的宽度itemGap:25,selectedModel:'single',//折线可多选inactiveColor:'#87CEEB',data: [{name: '新增用户数',icon: 'circle',textStyle: {color: '#000000',}},{name: '取消用户数',icon: 'circle',textStyle: {color: '#000000'}},{name: '净增用户数',icon: 'circle',textStyle: {color: '#000000'}},{name: '累积用户数',icon: 'circle',textStyle: {color: '#000000'}} ],bottom: 0,left: 30,z: 100},// 刻度grid: {containLabel: true},// 悬浮图标tooltip: {show: true,trigger: 'axis',position: function (pos, params, dom, rect, size) {var obj = { top: 60 };obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;return obj;}},xAxis: {type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],//show: false},yAxis: {x: 'center',type: 'value',splitLine: {lineStyle: {type: 'dashed'}},axisLine:{//y轴坐标是否显示show:true},axisTick:{//y轴刻度小标是否显示show:true}},series: [{name: '新增用户数',type: 'line',// 设置折线是否平滑smooth: false,data: [18, 36, 65, 100, 78, 40, 33]}, {name: '取消用户数',type: 'line',smooth: false,data: [12, 50, 51, 35, 70, 30, 20]}, {name: '净增用户数',type: 'line',smooth: false,data: [22, 11, 44, 66, 77, 10, 5]}, {name: '累积用户数',type: 'line',smooth: false,data: [10, 30, 31, 50, 40, 20, 10]}]};chart.setOption(option);return chart;
}Page({data: {ec: {onInit: initChart}},onLoad: function (options) {},onReady() {setTimeout(function () {// 获取 chart 实例的方式// console.log(chart)}, 2000);},onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

以上就是折线图的基本配置。

【关注、点赞，收藏】

关注公众号，您将第一时间收到文章更新

微信公众号：猿媛大本营

QQ群号：1056320746

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！