广州网站建设方案案例,新闻类网站备案,云主机 网站吗,免费装修效果图大全微信小程序使用echarts组件实现饼状统计图功能
使用echarts实现在微信小程序中统计图的功能#xff0c;具体的实现步骤思路可进我主页查看我的另一篇博文https://blog.csdn.net/weixin_45465881/article/details/138171153进行查看#xff0c;本篇文章主要使用echarts组件实…微信小程序使用echarts组件实现饼状统计图功能
使用echarts实现在微信小程序中统计图的功能具体的实现步骤思路可进我主页查看我的另一篇博文https://blog.csdn.net/weixin_45465881/article/details/138171153进行查看本篇文章主要使用echarts组件实现饼状统计图功能用性别作此示例具体的实现结果截图如下 echarts组件代码较多components文件夹的内容可在我主页的资源免费下载或者可前往echarts官网下载呦引入的路径一定要正确。具体关于pages文件夹的代码如下 1、wxml代码:
view classcharts-boxview classcharts-titleview classcharts-pot/viewview{{title}}/view/viewview styleheight: 500rpx;ec-canvas canvas-idmychart-bar ec{{sex}}/ec-canvas/view
/view2、wxss代码
page {background-color: #f1f1f1;
}.charts-box {background-color: white;margin: 20rpx;border-radius: 15rpx;padding: 20rpx;
}.charts-title {display: flex;flex-direction: row;font-size: 24rpx;align-items: center;justify-content: flex-start;color: rgb(173, 173, 173);margin-top: 10rpx;
}.charts-pot {width: 46rpx;height: 24rpx;background-color: #fcadb0;margin-right: 10rpx;border-radius: 10rpx;margin-top: 2rpx;
}3、js代码
import * as echarts from ../../components/ec-canvas/echarts.min;
let chart null;Page({/*** 页面的初始数据*/data: {title: CSDN粉丝性别占比,sex: {onInit: initChart}},
})function initChart(canvas, width, height, dpr) {chart echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});canvas.setChart(chart);let attr [{value:175,name:男性},{value:120,name:女性},{value:36,name:未知}]let option {tooltip: {trigger: item},legend: {top: 90%,left: center},color: [#fcbd71, #fcadb0, #FF82AB],series: [{name: 性别,type: pie,radius: [52.87%, 36.25%,10.88%],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: #fff,borderWidth: 2},label: {show: false,position: center},emphasis: {label: {show: true,fontSize: 16,}},labelLine: {show: false},data: attr}]};chart.setOption(option);return chart;
}4、json代码
{component: true,navigationBarTitleText: echarts·饼状统计图,navigationBarBackgroundColor: #008B8B,usingComponents: {ec-canvas:../../components/ec-canvas/ec-canvas}
}我这里简单绘制的饼状统计图如需要其他的统计图可自行学习或者进我主页将分享更多内容呦~ 小编创作不易口干舌燥可以的话请我喝杯水吧欢迎各位的批评指导呦~
