引入分类

echarts

kbone中引用echarts的需求还是很普遍的，大概步骤官网有一个小demo20,需要的话可以拉下来参考，https://github.com/Tencent/kbone/tree/develop/examples/demo20。我也是在这里学习的，接下来总结下步骤，首先打开上述链接，找到chart.js，将其放入你的项目中，在需要使用echarts的页面中引入chart.js以及echarts，将原有盒子替换成canvas，之后将原有echarts方法执行即可。

// 数据自己替换
<template>
  <div style="display:flex">
	  <canvas
	    ref="canvas"
	    type="2d"
		style="margin-top: 20px;padding: 50px;"
	  >
	  </canvas>
    <!-- <div id="areaAddress" :style="{ width: '60%', height: '2rem' }"></div> -->
    <!-- <div id="areaRight" :style="{width:'40%',height:'2rem',overflowY:'auto'}">
        <div v-for="(item,index) in addressGroup" :key="index" style="height: .5rem;"><i :style="{background:color[index]}"></i><span class="addressname" style="font-size: .16rem;">{{item.name}}</span><span style="margin-left:0.15rem;color:#333;font-size: .16rem;">{{item.value}}个</span></div>
    </div> -->
  </div>
  
</template>
<script>
import echarts from 'echarts'
import {getChart} from './chart'

const systemInfo = wx.getSystemInfoSync()
export default {
  props:['address'],
  data() {
    return {
      numAll:0,
	  width: "",
	  height: "",
      addressGroup:[],
      color:["#87A2FF", "#48C9CE", "#32ABF6", "#FF87A1", "#E68DFF",'#FB9E74','#F46B53','#B69BFF','#9AE2A2','#8CB6FF']
    };
  },
  watch:{
      address:function(newVal, oldVal){
       
        let newValList = []
        let numAll = 0
        for(let i in newVal){
			
          numAll = numAll + newVal[i].area_count
          newValList.push({
            'value':newVal[i].area_count,
            'name':newVal[i].area_name
          })
          this.addressGroup = newValList
        }
        this.numAll = numAll
        // this.areaAddress();
      }
  },
 mounted() {
   // this.apiGetCompanyArea(); //区域分级列表
   let newValList = []
   let numAll = 0
 	for(let i in this.address){
 	  numAll = numAll +this.address[i].area_count
	  console.log(this.address[i].area_count)
 	 newValList.push({
 	    'value':this.address[i].area_count,
 	    'name':this.address[i].area_name
 	  })
 	  this.addressGroup = newValList
 	}
 	this.numAll = numAll
 	 getChart(this.$refs.canvas, echarts, {
		 
 	   devicePixelRatio: systemInfo.devicePixelRatio,
 	 }).then(this.initChart)
 },
  methods: {
 
    initChart( myChart) {
		console.log("进入3",systemInfo.devicePixelRatio)
      // var echarts = require("echarts");
      // var myChart = echarts.init(document.getElementById("areaAddress"));
      myChart.setOption({
        title: {
          text: "总项目",
          x: "center",
          y: "50%",
          textStyle: {
            fontSize: "1px",
            color: "#999999",
            fontWeight: "400",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
          
            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];
          
            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];
          
            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
          
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX - boxWidth;
            }
          
            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight;
            }
          
            return [x, y];
          }
        },
        graphic: {
          type: "text",
          left: "center",
          top: "40%",
          z: 2,
          style: {
            text: this.numAll,
            fill: "#5074FA",
            textAlign: "center",
            textVerticalAlign: "middle",
            center: true,
            fontSize: "15px"
          },
        },
        
        color: this.color,
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
             normal: {
               fontSize: 14
             }
            },
            data: this.addressGroup,
          },
        ],
      });
     
    },
  },
};
</script>
<style >
 #areaRight{
   padding-left: 0.12rem; }
  #areaRight div{
     display: flex;
     justify-content: flex-start;
     align-items: center;
     height: 0.35rem;
     color: #999999;
     white-space: nowrap;}
     .addressname{
        max-width: 0.73rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
     }
     #areaRight div i{
          width: 0.12rem;
          height: 0.12rem;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 0.08rem;
     }
   


</style>

rem

因为kbone是不支持rpx,所以rem的引入就更加有其必要性，在引入rem前的准备工作，创建rem.js文件至项目中，之后将以下代码放入文件中，之后在mp-webpack-plugin 中global添加配置项:rem:true,然后在项目中就可以开开心心的使用rem了。

// An highlighted block
window.onload = function() {
  if (process.env.isMiniprogram) {
    // 小程序
    document.documentElement.style.fontSize = wx.getSystemInfoSync().screenWidth / 16 + 'px'
  } else {
    // Web 端
    document.documentElement.style.fontSize = document.documentElement.getBoundingClientRect().width / 16 + 'px'
  }
}

vant

kbone中ui框架还不完善，其自带的kbone-ui东西更是少的可怜，最主要的是原来做的vue项目用的就是vant框架，所以在做迁移时对于vant的引入还是有必要的，我用的是按需引入，不说废话进主题：首先在你有使用vant的页面对应的main.mp.js文件中引入对应组件即可

// 推荐按需引入
import 'vant/lib/index.css';
import { Button, Icon, Tabbar, TabbarItem, Form,Field, } from 'vant';
Vue.use(Button).use(Tabbar).use(TabbarItem).use(Icon).use(Form).use(Field);