weixin_52406641-CSDN博客

let report7Arr = [ //查询条件 { name:'2月', value:6.70, }, ] //方法 function filterSeries(arr,array,name1,name2){ array.map((item)=>{ if(arr[1].value == item.value && arr[1].na...

2022-04-21 18:20:32 1488

原创 Echarts动态设置length里面的文字宽度

mounted() { let _this = this; this.option = { tooltip: { trigger: "item", axisPointer: { type: "line", lineStyle: { type: "dashed".

2022-04-20 11:38:03 1229 1

原创 Echarts可视化x轴或y轴文字换行，添加省略号

这里写自定义目录标题x轴文字换行，y轴同理效果图文字太多想添加省略号效果图x轴文字换行，y轴同理 xAxis: [{ type: "category", splitLine: { show: false }, axisLabel: {

2022-04-19 11:47:18 2231

原创 div写扇形进度条

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2022-01-26 17:26:46 191

原创 echarts设置legend文字位置

legend: { textStyle: { color: '#82CCE1', fontStyle: 12, fontWeight: 100, padding:[0,0,25,-45]//主要就是用这个，可以把文字上下调整 }, },legend:{　　//设置位置文字在右，图例在左（图例纵向排列在图表右侧的时候）　　　　align:'left',//这个是可以左右调整的}...

2022-01-26 11:49:14 7568 4

例子：<template> <div id="wrapper" :style="{ backgroundImage: `url(${getImg(bgImg)})` }"> </div></template>methods: { getImg(res) { //必须拼接一下 return require(`@/img/${res}.svg`);//res就是图片的名字 }, },如果这些帮到您了，别忘了点赞关注加评论，

2022-01-26 09:59:15 813

原创 vue+echarts平面地图和飞线

记得引入文件3Dworld.js链接链接: https://download.csdn.net/download/weixin_52406641/76700540https://download.csdn.net/download/weixin_52406641/76700540，免费的

2022-01-19 17:29:35 9320 4

原创判断请求的是form还是json格式

这是form格式的这是json格式的如有不对的请及时留言提出，小编将加以改正

2021-12-22 11:23:56 1392 1

原创 CSS实心小圆点依次出现动画

<template> <div class="loadings"> <div class="loading5"> <div class="loading-circle"></div> <div class="loading-circle"></div> <div class="loading-circle"></

2021-12-22 11:12:52 602

原创 Echarts地图

<template> <div> <h2>地图</h2> <div id="canvas5" style="width: 1000px;height:400px;"></div> </div></template><script>export default { data(){ return{ } },

2021-12-17 14:12:09 181

原创 Echarts雷达图

<template> <div> <h2>雷达图</h2> <div id="canvas2" style="width: 1000px;height:400px;"></div> </div></template><script>export default { data(){ return{ } },

2021-12-17 14:11:18 248

原创 Echarts调色盘

<template> <div> <h2>调色盘</h2> <div id="canvas3" style="width: 1000px;height:400px;"></div> </div></template><script>//所有样式都遵循就近原则export default { mounted() { let

2021-12-17 14:10:28 238

原创 Echarts仪表盘

<template> <div> <h2>仪表盘</h2> <div id="canvas6" style="width: 1000px;height:400px;"></div> </div></template><script scr="./essos.js">//自定义主题</script><script>export d

2021-12-17 14:09:16 133

原创 Echarts的一些动画配置

<template><div> <h1>动画配置</h1> <div id="canvas7" style="width: 1000px;height:400px;"></div></div></template><script>export default { data() { return { } }, mou

2021-12-17 14:08:05 747

原创 Echarts的折线图

<template><div> <h2>折线图</h2> <div id="canvas4" style="width: 1000px;height:400px;"></div></div></template><script>export default { data() { return { } }, mounted(

2021-12-17 14:03:26 115

原创 Echarts的一些通用配置

/** * 通用配置： * 1、title:{ * //控制标题的样式 * textStyle:{color:'red',},设置标题的样式 * //控制标题的边框 * borderWidth:5,//设置标题的边框 * borderColor:'red',//边框颜色 * borderRadius:3,/

2021-12-17 14:01:58 169

原创 vue3的一些配置

vue3的一些配置前言一、程序主入口文件 main.js二、下面是一些vue2和vue3的一些对比2.组件间的通信toRefs祖孙级通信：祖级：孙级：当然vue3也可以直接绑定css的方法前言提示：vue3配置的一些问题：一、程序主入口文件 main.jsimport { createApp } from 'vue';import{ router} from './router/index'import store from './store/index'import App from

2021-12-17 13:47:36 490

原创 vue3的一些总结（二）

这一篇主要是来将第一篇的一些细节补全setup细节问题: //setup细节问题： //setup是在beforCreate生命周期回调之前就执行了，而且就执行一次 //由此可以推断出：setup在执行的时候，当前的组件还没有创建出来，也就意味着：组件实例对象this根本就不能用 //this是undefined,说明就不能通过this再去调用data/computed/methods/props中的相关内容了 //其实所有的composi

2021-12-17 13:27:07 80

原创 vue3的一些总结（一）

这里写自定义目录标题vue2和vue3的一些区别首先是生命周期：vue3的API的变化ref与reactivewatch与watchEffectComputed和WatchCustomRef的使用vue2和vue3的一些区别首先是生命周期：vue2生命周期vue3生命周期说明beforeCreatesetup组件创建之前createdsetup组件创建之前beforeMountonBeforeMount组件挂载之前mountedonMounted

2021-12-17 11:30:56 796

原创 input框的自定义指令和保留小数后四位

废话少说上代码：过滤：//保留小数点后四位//保留n位小数四舍五入Vue.filter("decimal", function (num, n) { //默认4位小数 n = parseInt(n) || 4; if (isNaN(n)) { n = 4; } num = parseFloat(num); if (isNaN(num)) { return 0; } else { let mul = Math.pow(10, n); ret

2021-08-26 18:17:04 1054

原创 swiper插件在vue中的使用方法

1.安装swiper，执行npm install vue-awesome-swiper --save命令2.在main.js中添加下面三行import 'swiper/dist/css/swiper.css'import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)　　在html部分添加<swiper :options="swiperOption">　　<swiper-slide&

2021-07-15 16:46:10 259

原创 js冒泡排序的三种方法

更新个基础知识比较简单仅供参考 //参考排序的数组 var arr = [3, 2, 5, 1, 4]这种方法冒泡排序比较相邻的两个元素,如果前一个比后一个大，则交换位置。第一轮把最大的元素放到了最后面。由于每次排序最后一个都是最大的，所以之后按照步骤1排序最后一个元素不用比function arr_sort(data) { var temp for(var i = 0; i<data.length-1;i++) { for(var j = 0; j<data..

2021-05-13 20:07:01 128

原创 element-ui的按需引入和可视化视图

vue add element function getChart() { //创建Echarts对象 var myEchart = echarts.init(document.getElementById("box")); var options = { title: { text: "Echarts入门", }, tooltip: {},

2021-05-12 20:44:31 285

原创在vue中使用Echarts

第一步：安装echartsnpm i echarts -S在需要的组件中引入Echarts// 引入echartsimport * as Echarts from 'echarts'第三步：创建一个div容器并创建化图表对象html: //创建一个div容器 <div ref="box" style="width: 900px; height: 400px"></div> JS: //创建化图表对象 let myChart = Echa.

2021-05-07 19:50:25 93

原创如何操作富文本

Vue-Quill-Editor地址：https://www.npmjs.com/package/vue-quill-editor使用步骤：1.安装 npm install vue-quill-editor --save2.引入 //引入富文本编辑器 import VueQuillEditor from 'vue-quill-editor' //引入vue-quill-editor相关样式 import 'quill/dist/quill.core.css' import

2021-05-06 20:15:10 147

原创使用element-ul中tab标签中的问题

如果不做区分那么他的文本框就会使用同一个属性绑定，这时可以再可以再声明一个属性，但是如果使用了for循环的话，就用这个方法直接在每一个数据里面添加一个绑定变量的数据，//获取参数的方法 async getGoodsCateParams() { const res = await getGoodsCateParamsAPI(this.current_Cate_Id, { sel: this.activeName, }); res.forEach.

2021-04-29 19:17:30 180

原创今天遇到的一些问题解决方案

核心思路：通过css隐藏小圆圈，并扩大小圆圈的显示范围,然后设置visibility为hidden.el-cascader-panel .el-radio { position: absolute; width:100%; height:100%; // border: 1px solid #f00; right:-10px;}.el-cascader-panel .el-radio .el-radio__input { visibility: hidden;}如果无法

2021-04-28 20:54:09 51

原创 vue-table-with-tree-grid使用及插件参数使用说明

vue-table-with-tree-grid使用及插件参数使用说明 1.安装vue-table-with-tree-grid npm i vue-table-with-tree-grid -S 2.在main.js中引入 import ZkTable from 'vue-table-with-tree-grid' 3.在main.js中引入注册全局组件Vue.component('tree-table', ZkTable)import BreadCrumb fro

2021-04-27 20:04:41 185

3Dworld.js echarts的文件

空空如也