IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 如何用kbone更高效的开发你真的不想知道?关于remechartsvant的引入你知道吗? -> 正文阅读

[JavaScript知识库]如何用kbone更高效的开发你真的不想知道?关于remechartsvant的引入你知道吗?

kbone中引用第三方插件

引入分类

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);

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-17 11:49:36  更:2021-07-17 11:52:07 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/28 21:42:38-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码