微信小程序使用echarts图表

最新推荐文章于 2023-12-15 17:48:45 发布

止语之语

最新推荐文章于 2023-12-15 17:48:45 发布

阅读量413

点赞数

文章标签： echarts 微信小程序

本文链接：https://blog.csdn.net/qq_36685539/article/details/129598617

版权

该文章介绍了如何在微信小程序中集成并使用Echarts图表插件，特别是展示了树形图的配置和初始化过程。通过设置组件和导入Echarts库，然后在页面onReady时初始化图表，并提供了加载和释放图表的方法。

摘要由CSDN通过智能技术生成

微信小程序的图表插件，自认为echarts还是比较方便的

程序码

在这里插入图片描述

组件案例

在这里插入图片描述

安装使用

下载代码，链接
ec-canvas 目录是需要的组件，pages里各案例代码
ec-canvas 直接复制添加到小程序文件内

json文件

  "usingComponents": {
    "ec-canvas": "../../component/ec-canvas/ec-canvas",
    "van-popup": "/miniprogram_npm/@vant/weapp/popup/index"
  }
}

js 文件

import * as echarts from '../../component/ec-canvas/echarts';

const app = getApp();

function setOption(chart) {
  var data1 = {"name":"1","children":[{"name":"2"},{"name":"3","children":[{"name":"44"},{"name":"5"},{"name":"6"},{"name":"7"},{"name":"8"}]}]};

  const option = {
    series: [{
      type: 'tree',

      initialTreeDepth: -1,

      name: 'tree1',

      data: [data1],

      top: '5%',
      left: '20%',
      bottom: '2%',
      right: '15%',

      symbolSize: 10,
      symbol: 'circle',

      label: {
        normal: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'right',
          color: 'black'
        }
      }

    }]
  };
  chart.setOption(option);
}

Page({

  onReady: function () {
    // 获取组件
    this.ecComponent = this.selectComponent('#mychart-dom-bar');
  },

  data: {
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    },
    isLoaded: false,
    isDisposed: false
  },

  // 点击按钮后初始化图表
  init: function () {
    this.ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      setOption(chart);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      this.setData({
        isLoaded: true,
        isDisposed: false
      });

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },

  dispose: function () {
    if (this.chart) {
      this.chart.dispose();
    }

    this.setData({
      isDisposed: true
    });
  }
});

wxml 文件

<style>
 /**index.wxss**/
.container{
  
  width: 100%;
  height: 90vh;

}
ec-canvas {
  position: absolute;
  top: 80px;
  bottom: 0;
  left: 0;
  right: 0;
}

button {
  margin: 10px;
}
</style>
<view class="container">
  <button bindtap="init" wx:if="{{!isLoaded}}">加载图表</button>
  <button bindtap="dispose" wx:if="{{isLoaded && !isDisposed}}">释放图表</button>
  <ec-canvas wx:if="{{!isDisposed}}" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>