小程序之echarts采坑记

最新推荐文章于 2025-06-26 11:06:52 发布

王冬阳

最新推荐文章于 2025-06-26 11:06:52 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序前端---技术博客

本文链接：https://blog.youkuaiyun.com/wangdongyanglys/article/details/96976930

在开发小程序中，遇到了Echarts图表与弹窗数据交互的挑战。详细讲述了如何在柱状图和饼图点击事件中，正确获取并展示data中的数据。针对手机端与开发工具字体大小不一致的问题，通过在series的label中添加rich对象解决了字体过小的困扰，但由此带来的点击响应问题仍有待解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发小程序，需求是点击柱状图中的某一条，要弹出一个模态框，然后里面是点击的这条数据里面的数据，web端很好写，但是，小程序中，会有些问题，以柱状图和饼图为例。

1，弹出框获取不到data里面的数据

界面部分

      <!-- 图形部分 -->
      <view class="chart zoneChart" hidden="{
  
  {firstShow}}">
        <!-- <view class="provideTitle">资金量/亿</view> -->
        <ec-canvas id="zone" canvas-id="zone" ec="{
  
  { ec }}" class="ec-canvas"></ec-canvas>
      </view>
    </view>
    <!-- 弹框 -->
    <modal class="content contentModal" hidden="{
  
  {hiddenmodal}}" title="" confirm-text=" "  cancel-text="重置" bindcancel="cancel" bindconfirm="confirm" no-cancel='true' no-confirm= 'true'>
      <view class="chart modalChart">
        <!-- <view class="provideTitle">资金量/亿</view> -->
        <ec-canvas id="modalChart" canvas-id="modalChart" ec="{
  
  { ec }}" class="ec-canvas"></ec-canvas>
      </view>
    </modal>

函数

因为小程序里面的变量，都是在data里面定义的，而我点击柱状图的时候，参数需要用到data里面的数据。所以函数就不能写到全局了，要写跟data平级，不能写到最外面的function里面，获取不到data里的数据

  initzone() {
    var that = this
    that.barComponent.i

最低0.47元/天解锁文章

200万优质内容无限畅学