小程序引入echarts

本文主要是介绍小程序引入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: 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')
    })
  },

})

这篇关于小程序引入echarts的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！