小程序使用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;
  }

参考了大佬的文章

相关推荐
2501_915918418 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张9 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差18 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张20 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬21 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063221 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI1 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220691 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld1 天前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄1 天前
mobx-miniprogram小程序的数据传输
小程序