• 小程序引入echarts


    https://github.com/ecomfe/echarts-for-weixin  下载ec-canvas插件

    index.wxml

    <ec-canvas id="mychart-dom-pie" force-use-old-canvas="true" canvas-id="mychart-pie"  ec="{{ moduleEc }}"></ec-canvas>

    index.json

    "usingComponents": {
        "ec-canvas": "../../ec-canvas/ec-canvas",
      }
    

    index.js

    import * as echarts from '../../ec-canvas/echarts';
    // 饼图
    let moduleEchart = null
    let moduleData = [
      {name: '可售房', value: 0},
      {name: '占用房', value: 0},
      {name: '维修房', value: 0},
    ]
    let moduleRoomCount = ''
    function initTab5Chart(canvas, width, height) {
      moduleEchart = echarts.init(canvas, null, {
         width,
        height: height
      });
      canvas.setChart(moduleEchart);
      var option = {
        title: {
          x: '60%',
          subtext: `总房数:${0}`,
          textStyle: {
              color: '#bcbcbc',
              fontWeight: 600,
              fontSize:  16
          },
          subtextStyle: {
            color:'#343D54',
            fontSize: 14,
            fontWeight: '600'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {c}"
        },
        legend: {
          selectedMode: false,
          orient: 'vertical',
          icon: "circle",
          itemWidth: 10, 
          itemGap: 19,
          x: '60%',
          y: 'center',
          textStyle:{
            fontSize: 12,
            color: '#343D54'
          },
          data: ['可售房', '占用房', '维修房']
        },
        series: [{
          name: '',
          label: {
            normal: {
              fontSize: 14,// 字体大小调整
              position: 'inner',// 去掉指示线指示文字
              color: '#fff',
              show : true,
              formatter: function(data){
                let num = data.value == 0 ? '' : data.value
                return num
              }
            }
          },
          type: 'pie',
          center: ['30%', '50%'],
          data: moduleData
        }]
      }
      moduleEchart.setOption(option);
      return moduleEchart;
    }
    
    Page({
        data: {
            moduleEc: {
                 onInit: initTab5Chart
             },
        },
        getList(){
        let that = this
        wx.showLoading({
          title: '正在加载…',
          mask: true
        })
        console.log(params)
        api.$https('POST',api.apiList.GetRoomStatus,params,
        function(res){
          wx.hideLoading()
          let datas = res.data.result
          if(res.data.code == 0){
            that.setData({
              list: res.data.result,
            })
            moduleData = [
              {name: '可售房', value: datas.emptycount},
              {name: '占用房', value: datas.fullcount},
              {name: '维修房', value: datas.maintaincount},
            ]
            moduleRoomCount = datas.roomcount
            // Echarts图表
              moduleEchart.setOption({
                title: {
                    subtext: `总房数:${moduleRoomCount}`
                },
                series: [
                  {
                    data: moduleData //全局变量
                  }
                ]
              });
          } 
        },function(res){
          wx.hideLoading()
          console.log('error')
        })
      },
    })
  • 相关阅读:
    18. 4Sum(双指针)
    17. Letter Combinations of a Phone Number(bfs)
    16. 3Sum Closest(双指针)
    15. 3Sum(字典) (双指针)
    14. Longest Common Prefix(暴力循环)
    8. String to Integer (atoi)
    54. Spiral Matrix(剑指offer--19)
    Baidu 推荐技术平台(offer)
    134. Gas Station(数学定理依赖题)
    187. Repeated DNA Sequences(建立词典,遍历一遍 o(n))
  • 原文地址:https://www.cnblogs.com/xhrr/p/15153711.html
Copyright © 2020-2023  润新知