微信小程序使用echarts組件實(shí)現(xiàn)條形統(tǒng)計(jì)圖功能

使用echarts實(shí)現(xiàn)在微信小程序中統(tǒng)計(jì)圖的功能，其實(shí)很簡(jiǎn)單，只需要簡(jiǎn)單的兩步就可以實(shí)現(xiàn)啦，具體思路如下：

1. 引入echarts組件
2. 調(diào)用相應(yīng)的函數(shù)方法
   由于需要引入echarts組件，代碼行數(shù)較多，無(wú)法在此粘貼，需要的友友們可以進(jìn)我的主頁(yè)，進(jìn)行免費(fèi)的資源下載，具體的實(shí)現(xiàn)結(jié)果截圖如下：
   
   
   echarts組件代碼較多，components文件夾的內(nèi)容可在我主頁(yè)的資源免費(fèi)下載或者可前往echarts官網(wǎng)下載呦，引入的路徑一定要正確。具體關(guān)于pages文件夾的代碼如下：
   1、wxml代碼:

<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代碼：

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代碼：

import * as echarts from '../../components/ec-canvas/echarts.min';
let chart = null;

Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    title:'我的CSDN創(chuàng)作統(tǒng)計(jì)',
    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: ['文章總數(shù)', '經(jīng)典界面', '微信小程序', '學(xué)習(xí)經(jīng)驗(yàn)', '系統(tǒng)示例'],
      axisTick: {
        alignWithLabel: true
      }
    }],
    yAxis: [{
      type: 'value'
    }],
    series: [{
      name: '我的創(chuàng)作',
      type: 'bar',
      barWidth: '50%',
      data: [25, 1, 21, 2, 4],
      itemStyle: {
        color: '#fcadb0'
      }
    }]
  };
  chart.setOption(option);
  return chart;
}

4、json代碼：

{
  "component": true,
  "navigationBarTitleText": "echarts·條形統(tǒng)計(jì)圖",
  "navigationBarBackgroundColor": "#008B8B",
  "usingComponents": {
    "ec-canvas":"../../components/ec-canvas/ec-canvas"
  }
}

我這里簡(jiǎn)單繪制的條形統(tǒng)計(jì)圖，如需要其他的統(tǒng)計(jì)圖，可自行學(xué)習(xí)或者進(jìn)我主頁(yè)，將分享更多內(nèi)容呦~
小編創(chuàng)作不易，口干舌燥，可以的話，請(qǐng)我喝杯水吧！歡迎各位的批評(píng)指導(dǎo)呦~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-860878.html

到了這里，關(guān)于微信小程序使用echarts實(shí)現(xiàn)條形統(tǒng)計(jì)圖功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！