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

参考了大佬的文章

相关推荐
丁总学Java1 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域2 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8683 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165023 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦10 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck15 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23417 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟17 小时前
小程序跳转另一个小程序
小程序
20 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
1 天前
微信小程序运营日记(第四天)
微信小程序·小程序