小程序使用echarts(超详细教程)

小程序使用echarts第一步就是先引用到小程序里面,可以直接从这里下载

文件很多,我们值下载 ec-canvas 就好,下载完成后,直接放在pages同级目录下

index.js 在我们需要的页面的 js 文件顶部引入

javascript 复制代码
// pages/index/index.js
import * as echarts from '../../ec-canvas/echarts';

let chart = {};
Page({
  data: {
    ec: {
      lazyLoad: true
    }
  },
  onLoad(options) {
      this.initChart(1)
  },
  // 初始化组件
  initChart(status) {
    const data = this.selectComponent("#mychart-dom-bar" + status)
    data.init((canvas, width, height) => {
      chart[status] = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: 2
      });
      canvas.setChart(chart[status]);
      this.setOption(status);
      return chart[status];
    })
  },
  setOption(i) {
    chart[i].clear(); // 清除
    chart[i].setOption(this['getOption' + i](), true); //获取新数据
  },
  getOption1() {
    return {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: 0,
        bottom: 0,
        top: 25,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['洗美', '贴膜', '改装', '改色'],
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(0,0,0,0.45)',
          fontWeight: 'bold',
          lineHeight: 14,
          padding: [10, 0, 19, 0]
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(0,0,0,0.15)'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: 'rgba(0,0,0,0.45)',
          fontWeight: 'bold',
          lineHeight: 14,
          padding: [0, 8, 0, 0]
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0,0,0,0.15)'
          }
        }
      },
      series: [{
        data: [120, 200, 150, 80],
        type: 'bar',
        color: '#0E71B2',
        label: {
          show: true,
          position: 'top',
          color: '#0E71B2',
          fontSize: 16
        }
      }]
    }
  },
})

index.wxml

html 复制代码
  <!-- 折线图 -->
  <view class="echarts">
    <ec-canvas id="mychart-dom-bar1" canvas-id="mychart-bar1" ec="{{ec100}}"></ec-canvas>
  </view>
  <!-- 柱状图 -->
  <view class="echartsBar echarts">
    <ec-canvas id="mychart-dom-bar2" canvas-id="mychart-bar2" ec="{{ec200}}"></ec-canvas>
  </view>

index.wxss

css 复制代码
  .echarts {
    width: 90%;
    margin: 0 auto;
    height: 260rpx;
    position: relative;
    overflow-x: hidden;

    ec-canvas {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .echartsTime {
      display: flex;
      justify-content: space-between;
      font-size: 20rpx;
      color: #00263A;
      line-height: 28rpx;
      position: absolute;
      width: 90%;
      bottom: 0;
      left: 10%;
      margin: 0 auto;
    }
  }

  .echartsBar {
    height: 56rpx;
    margin-top: 20rpx;
  }

参考了大佬的文章

相关推荐
澄江静如练_3 小时前
微信小程序发体验版
微信小程序·小程序
张晓~183399481218 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero10 小时前
微信小程序61~70
微信小程序·小程序
汤姆yu1 天前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域1 天前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域1 天前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔1 天前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun1 天前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54581 天前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ3 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序