小程序之echarts采坑记

开发小程序,需求是点击柱状图中的某一条,要弹出一个模态框,然后里面是点击的这条数据里面的数据,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.init((canvas, width, height) => {
          
    // console.log(app3.xdata)
    // console.log(app3.yvalue)
    // console.log(this)
   
    // console.log(that.app4)
     chart= echarts.init(canvas,null,{
      width: width,
      height: height
    })
   
    var option= {
       color: ['#3398DB'],
    tooltip: {
      position: ['10%','10%']
      
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        name: '元',
        nameTextStyle:{
          color:'#999',
          fontSize:16,
          padding:[3, 5, 10, 20]
        },
        nameGap:-30,
        data: that.app4.xdata,
        splitLine: false,
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          lineStyle: {
            color: '#EBEBEB'
          }
        },
        axisLabel: {
          interval:0,
          textStyle: {
            color: '#666',  //更改坐标轴文字颜色
            
          },
          rotate:45
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: '#EBEBEB'
          }
        },
        name:'',
        nameTextStyle:{
          color:'#999',
          fontSize:16,
          padding:[3, 4, 10, 30]
        },
        data: that.app4.xdata,
        splitLine: false,
        axisLabel: {
          interval:0,
          textStyle: {
            color: '#666',  //更改坐标轴文字颜色
          }
        }
      }
    ],
    
    series: [
      {
        name: '按区域划分',
        type: 'bar',
        barWidth: '50%',
        data: that.app4.yvalue,
        itemStyle: {
            normal: {
 // 渐变色
    color: function(params) {
        // build a color map as your need.
        
        var colorList = [
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#92D4F1'
          }, {
              offset: 1,
              color: '#3993BA'
          }]),
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#B3F9C8'
          }, {
              offset: 1,
              color: '#75C78D'
          }])
        ];
        return colorList[params.dataIndex]
      }
            }
        }
      }
    ]
    }
    chart.setOption(option);

    chart.on('click', function (params) {
       
      
      })
      return chart;
      });
    }

点击事件

chart.on('click', function (params) {
       that.hiddenmodal = !that.hiddenmodal
       that.firstShow = !that.firstShow
       that.$apply()
        that.getParames()
        var chartRegionDates = that.regionDates
        for (let index = 0; index < chartRegionDates.length; index++) {
          if(chartRegionDates[index].name == params.name){
           that.currentCode = chartRegionDates[index].code
          //  console.log(that.currentCode)
           break;
          }
        }
        // console.log(that.dateSelectYear)
   //  判断,如果没有选择归口,调用归口统计的接口;如果选择了归口,调用项目统计接口

      if(that.manageCode=='all'){
          // 调归口统计的接口
          // 调归口统计的接口发请求
          wx.request({
            url: 'https://test.gongwt.cn:8888/gyrr-agsubsidy-cz-consumer/ags/supervise/tallyGrantByManageType.json',
            method: 'POST',
            data: {
              regionCode: that.currentCode,
              year: that.dateSelectYear,
              manageTypes:that.manageParamCode
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded' // 默认值
            },
            success(res) {
              console.log(res)
            // 初始化发放进度图表
                var modalResult = res.data.data.xAxis
                that.modalData.yvalue = res.data.data.data
                that.modalData.xdata = []
                that.modalData.managedataArray=[]
                
                that.modalData.xdata = modalResult
                for(var i = 0;i<modalResult.length;i++){
                var json = {};
                  for(var j=0;j<that.modalData.yvalue.length;j++){
                    if(i==j){
                      json.value = that.modalData.yvalue[j];
                      json.name = modalResult[i];
                      that.modalData.managedataArray.push(json);
                    }
                  }
                }
              that.$apply()
              that.pieComponent = that.$wxpage.selectComponent('#modalChart');
              that.initModal()
            }
          })
      }
      
      })

初始化

that.barComponent = that.$wxpage.selectComponent('#zone');
that.initzone()

这样的初始化才好使,研究了好久才弄出来的,孺子可教也,,,哈哈哈

2,echarts图中手机端和开发工具里面的字体不一致(太小)

在series的label里面添加一个rich:{}对象,字号就正常了。

label: {
              normal: {
                  show: true,
                  fontSize: 12,
                  rich: {}
              },
              emphasis: {
                  show: true
              }
 }

但是有个缺点就是:点击文字,没反应。。。。。。,因为要点击饼图里面的某条数据,可能有一条数据占比是99.6%,而有一条是0.03%,占比差距相当大,可能点不着,所以想点击文字显示相关信息,(ps:已经设置了最小的扇形区域范围,是能点掉数据了,但是视觉上体验不是很好。)。有木有大神遇到过这个问题???

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页