微信小程序使用echarts实现条形统计图功能

微信小程序使用echarts组件实现条形统计图功能

使用echarts实现在微信小程序中统计图的功能,其实很简单,只需要简单的两步就可以实现啦,具体思路如下:

  1. 引入echarts组件
  2. 调用相应的函数方法
    由于需要引入echarts组件,代码行数较多,无法在此粘贴,需要的友友们可以进我的主页,进行免费的资源下载,具体的实现结果截图如下:


    echarts组件代码较多,components文件夹的内容可在我主页的资源免费下载或者可前往echarts官网下载呦,引入的路径一定要正确。具体关于pages文件夹的代码如下:
    1、wxml代码:
html 复制代码
<view class="charts-box">
  <view style="height: 500rpx;">
    <ec-canvas canvas-id="mychart-bar" ec="{{spread}}"></ec-canvas>
  </view>
  <view class="charts-title">
    <view class="charts-pot"></view>
    <view>{{title}}</view>
  </view>
</view>

2、wxss代码:

css 复制代码
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: center;
  color: rgb(173, 173, 173);
  margin: 30rpx 0 10rpx;
}

.charts-pot {
  width: 46rpx;
  height: 24rpx;
  background-color: #fcadb0;
  margin-right: 10rpx;
  border-radius: 10rpx;
  margin-top: 2rpx;
}

3、js代码:

javascript 复制代码
import * as echarts from '../../components/ec-canvas/echarts.min';
let chart = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    title:'我的CSDN创作统计',
    spread: {
      onInit: initChart
    }
  },
})

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: ['文章总数', '经典界面', '微信小程序', '学习经验', '系统示例'],
      axisTick: {
        alignWithLabel: true
      }
    }],
    yAxis: [{
      type: 'value'
    }],
    series: [{
      name: '我的创作',
      type: 'bar',
      barWidth: '50%',
      data: [25, 1, 21, 2, 4],
      itemStyle: {
        color: '#fcadb0'
      }
    }]
  };
  chart.setOption(option);
  return chart;
}

4、json代码:

javascript 复制代码
{
  "component": true,
  "navigationBarTitleText": "echarts·条形统计图",
  "navigationBarBackgroundColor": "#008B8B",
  "usingComponents": {
    "ec-canvas":"../../components/ec-canvas/ec-canvas"
  }
}

我这里简单绘制的条形统计图,如需要其他的统计图,可自行学习或者进我主页,将分享更多内容呦~

小编创作不易,口干舌燥,可以的话,请我喝杯水吧!欢迎各位的批评指导呦~

相关推荐
小小小小宇4 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊4 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习5 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖5 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06276 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台6 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121386 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css