童童童彤-CSDN博客

原创 echarts 柱状图图例点击事件并动态调整平均值

今天来记录一下之前遇到的问题，当时有个需求是点击柱状图的图例，显示不同的堆叠图，并且其中有一条虚线来显示当前高亮的堆叠图的数据平均值，页面功能效果实现代码如下 myChart.on('legendselectchanged', barfunction) function barfunction(obj) { let selectedItem = [] // 当前选中的高亮名 let totalArr = [] // 分母 let unitP

2021-08-16 16:04:24 903

原创 layui栅格布局适配屏幕、适配ie8

响应式布局栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理第一件事，最近写的项目里用到了layui这个框架里面的栅格布局，之前没有注意太多，直接就用了layui-col-md，没有仔细去看这些有什么区别，但是当放大缩小页面的时候会发现原本整齐的栅格布局就全都乱了，成了堆叠排列。后来仔细看了一下这些，改用layui-col-sm、layui-col-lg，由于需求需要，各种大小屏幕都要去适配，我就去官方文档看了一下改用lay

2021-08-16 15:59:43 741

原创 echarts地图各地市中点上下方展示不同内容

有些ecahrts图不光要展示各个地市的名称，还要展示其地市的部分内容，例如一些数据量、备注信息等等，这是我最近在写东西时用到的{ name: itemInfo[0], //各个地市的名称 type: 'scatter', xAxisId: idx, // grid直角坐标系x yAxisId: idx, // grid直角坐标系y itemStyle: { color: 'rgba(0,0,0,0)', }, label: { normal: { show: true,

2021-06-09 15:47:40 583

原创 echarts温度计柱状图效果实现

现在官网有部分的温度计图，但是很多都是一个温度计，最近工作过程中遇到了一个需要有很多温度计的柱状图，并且还要根据不同字段的值来改变每个温度计的颜色，稍微研究了一下，这里面的实现方式在这里给大家简单讲解一下吧。我也很烦那些写了半天的话，代码还是零零散散的，那我就话不多说直接上整体代码吧（里面有讲解，肯定还有可以优化的地方，望大家多多指导）var echartOption = { thermometer: function (data, tagId, color) { let barSerise =

2020-12-14 16:05:04 4055

原创 Vue中引入json数据（不用向后台发送请求）

把 json 数据放入一个 .js 文件中放在src文件下的assets中（一般情况下），例如叫data.js文件，用exports导出module.exports = { 'tempData: [ {'name': 'LiMing'} ],}最后在所需要引入 json 数据的 .vue 文件中引入import data from '@/assets/data.js' // 引入// 使用created () { console.log(data) // 得到data

2020-10-10 15:20:37 627

原创 Element组件被Antd覆盖解决办法

在一个项目里引了两个组件库，第一个引入的组件库有的时候就会被覆盖掉，导致不能使用，这是因为后引入的组件库会将前一个覆盖掉（组件名称重复的情况下），所以样式和使用方法都会出现问题，导致第一个引入的组件库部分不能使用，在一个项目里建议是只引入一个组件库。当然啦，如果引入两个组件库也不是没有办法的，可以在src下面的main.js文件中进行更改来实现两个组件在一个项目里都可以使用。就比如说Vue.prototype.$message和Vue.prototype.$confirmElement和Antd都是相同的

2020-09-24 10:43:21 2105 2

原创 vue表格背景轮播

其实实现表格背景轮播，主要是通过给所需高亮的那一行添加class类名，在mounted（加载完成之后执行）中通过setInterval() 方法来实现轮播效果<table> <thead> <tr> <th v-for="(item, index) in tableColumns" > {{ item.label }} </th> </tr> </thead> <tbody>

2020-09-03 15:36:45 572

原创 echarts散点图实现轮播

为了让echarts散点图中每个点实现轮播，散点高亮（highLight）+显示提示框（showTip），具体的去看我上一篇写到的 echarts API action 之 dispatchAction 吧。现在来写一下echarts散点图中每个点实现轮播，首先来屡一下思路：第一，需要一个定时器，每隔5秒执行一遍，还需要定义一个count计数器，当count值等于数据数组的长度时，让count等于0，重新轮播散点先执行一遍downplay取消所有高亮指定的数据图形，再给当前第count个散点指定hig

2020-08-27 11:11:32 2340 1

原创 echarts API action 之 dispatchAction

ECharts 中支持的图表行为，通过 dispatchAction 触发。highLight 高亮指定的数据图形dispatchAction({ type: 'highlight', // 可选，系列 index，可以是一个数组指定多个系列 seriesIndex?: number|Array, // 可选，系列名称，可以是一个数组指定多个系列 seriesName?: string|Array, // 可选，数据的 index dataInde

2020-08-27 10:45:14 5802 3

原创自动生成头部注释vscode插件-koroFileHeader

想起来很久以前领导要求找到所写代码的负责人，要每个文件都要备注上修改人和修改时间，趁着这段时间正好优化了一下代码，下载了这个插件，大致的了解了一下怎么使用首先在vscode应用商店中搜索koroFileHeader，点击安装下载完成之后进行相关配置点击左下角设置按钮 > 设置在搜索框中输入 fileheader 出现下图第一个配置是插件配置选项第二个是在光标处插入函数注释"fileheader.cursorMode": { "description":"", "param":"

2020-08-24 16:34:11 851 2

原创用Vue的动态样式加上Css写进度条

用Vue的动态样式加上Css写进度条用Vue的动态样式加上Css写进度条用Vue的动态样式加上Css写进度条进度条主要是由两部分组成：由底层的一个100%长度的总条（背景条）和一个上层任意长度（可以根据后台调用的数据来动态改变上层的进度条长度）的进度条组成，类名"progress_out"是底层的背景条，类名"progress_in"是上层的进度条，"progress_width"是自己在定义的变量，当然啦这个变量要在0~100之间，进度条不能超过底层的背景条。我这里给宽度定义的是90%，vue的写法

2020-08-21 10:33:14 1539

童童童彤