熟悉有你的地方-CSDN博客

原创 Echarts之水库水位

echarts版本：4.8.0效果图：实现：<template> <div id="chart" style="width: 480px; height: 650px; background: #020f2b" ></div></template><script>export default { data() { return {}; }, created() {}, mounted(

2021-09-29 11:28:01 2843 2

原创 css实现timeline时间线

效果：实现：<template> <ul class="timeline"> <li class="timeline-item"> <div class="time"> <p>XX年XX月XX日</p> <p>00:00:00</p> </div> <i class="circle"></i>

2021-08-29 22:20:36 644

原创 Echarts之饼图鼠标移入突出高亮

Echarts版本：4.8.0，鼠标移入饼图时突出高亮，主要在series里配置需求：鼠标移入：实现：<template> <div id="pie-highlight" style="width: 700px; height: 300px; background: #020f2b" ></div></template><script>export default { data() { re

2021-08-13 16:08:13 5086

原创 Echarts之横向柱状图椭圆背景颜色

Echarts的 v5.x 版本提供了属性支持椭圆背景，但是 v5.x 版本之前是不支持的，解决方式：设置两条柱状图重叠在一起即可需求：鼠标移入：

2021-07-25 10:19:27 3086

需求：要点：通过transform: skew(-20deg); //设置倾斜度注意点：不要直接给最外层容器设置倾斜角度，否则会导致容器里的子元素也会随之倾斜，如下图：（文字会跟随倾斜）实现：<template> <div class="parallelogram"> <div class="parallelogram-1">平行四边形</div> <div class="parallelogram-2">

2021-06-19 12:21:24 617

原创 tab切换之图片切换

需求：分析：当鼠标点击时，图片切换为高亮图实现：<template> <div class="my-tab"> <div class="tab-item" @click=" () => { tabClick(item, index); } " v-for="(item, index) in tabList" :key="index"

2021-06-15 18:07:36 19173

原创 Echarts之仪表盘式进度条

需求：实现：<template> <div class="progress" style="width: 300px; height: 400px; background: rgba(2, 15, 43, 0.7)" > <div id="progressChart" style="width: 300px; height: 400px"></div> <div class="rank">

2021-05-15 12:44:51 3999 2

原创 Echarts之饼图内外圆重叠且图例不统一

需求：鼠标移入：外圆：内圆：实现：<template> <div id="chart" style="width: 500px; height: 200px; background: rgba(2, 15, 43, 0.7)" ></div></template><script>export default { data() { return { data: [

2021-05-14 16:49:53 545

原创 Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示

需求：鼠标移入表头：关键点：1、样式中添加.el-table .cell { word-break: keep-all !important; white-space: nowrap !important; }2、在需要悬浮显示的表头文字过长处添加:show-overflow-tooltip="true":render-header="renderHeader"3、methods中添加：renderHeader(h, data) { return

2021-05-11 11:52:05 4418

原创 Echarts之折线图背景区域等级划分

需求：鼠标移入：实现：<template> <div class="grade"> <div id="grade-echart"></div> <div class="legend-list"> <div class="legend-item" v-for="(item, index) in legendList" :key="index"> <span

2021-04-12 22:51:18 1188 1

原创 Element UI 之table表格的封装

需求：鼠标移入：实现：<template> <el-table class="table-list" :data="tableData" height="440" style="width: 1000px" :border="false" :cell-style="cellStyle" :header-cell-style="{ background: '#1C2E45', height: '40

2021-04-03 23:17:22 510

原创 Element UI 之table表格样式

需求：鼠标移入：<template> <el-table :data="tableData" style="width: 800px" height="500px" :header-cell-style="{ background: '#1C2E45', height: '40px', padding: '0', color: '#a0b2d3', }" :cell-style="ce

2021-03-31 23:07:16 2922

原创 Echarts之柱形图--每个柱形图颜色不同且带图例

需求：鼠标移入：1、容器：<div id="bar" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>2、在methods中methods:{ initChart() { // 源数据 let datas = [ { value: 1048, name: "搜索引擎" }, { value: 735, na

2021-03-04 12:45:22 4075 2

原创 Echarts之带箭头的折线图

需求：鼠标移入：1、容器：<div id="line" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>2、在methods中methods:{ initChart() { let up = "image://data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAdCAMAAADb7h9dAAAABG

2021-03-03 14:27:01 3763

原创 Echarts之双横向柱状对比图

需求：鼠标移入：1、容器： <div id="bar" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>2、在methods中：methods:{ initChart() { let manData = [100, 200, 300, 400, 500]; let womanData = [100, 200, 300, 400,

2021-03-02 15:13:22 4358 6

原创 echarts之含百分比的横向柱状图

需求：鼠标移入：1、容器：<div id="bar" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>2、在methods中methods:{ bar() { function contains(arr, dst) { var i = arr.length; while ((i -= 1)) {

2021-03-01 11:55:50 3002 1

原创 Vue自定义指令之拖拽

PC端：全局拖拽指令//在main.js中添加如下代码：Vue.directive('drag', { // 全局拖拽指令 bind: function (el, binding, vnode) { let oDiv = el; let self = vnode.context; oDiv.onmousedown = (e) => { let disX = e.clientX - oDiv.offsetLeft; let disY = e.cli

2021-02-28 22:29:46 301

原创 Echarts之气泡图图例

需求：鼠标移入：1、容器<div id="syscBubleChart" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)" ></div>2、data中的数据export default { data() { return { plantCap: [ { name: "2018", va

2021-02-27 22:50:40 5238 7

原创 Echarts之饼图图例格式化

需求：鼠标移入时：容器：<div id="pieChart" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>在methods中：methods:{ initChart() { let colors = ["#5599EC", "#00EA9C", "#F9CE16", "#FF913F", "#00FFF8"]; let name =

2021-02-26 17:33:21 2013 2

原创 Element UI之 Timeline时间线样式

需求：Element UI提供的：Timeline时间线：https://element.eleme.cn/#/zh-CN/component/timeline// 时间线/deep/ .el-timeline { // 每一个item /deep/ .el-timeline-item { // 线 /deep/ .el-timeline-item__tail { border-left: 2px solid #28567f; } // 圆

2021-02-25 18:15:13 10157

原创 Element UI之Radio单选框组样式

需求：Element UI提供的：Radio单选框组：https://element.eleme.cn/#/zh-CN/component/radio.radio { /deep/ .el-radio-group { height: 20px; width: 60px; /deep/ .el-radio { margin: 0; height: 20px; } }}/deep/ .el-radio__inner { width

2021-02-25 17:18:11 3145

原创 Elemnet UI之tab切换样式

需求：Elemnet UI提供的：tabs：https://element.eleme.cn/#/zh-CN/component/tabs修改：/deep/ .el-tabs { // background: rgba(2, 15, 43, 0.7);背景颜色 /deep/ .el-tabs__header { // margin-bottom: 0.1rem; // // margin-bottom: 0; /deep/ .el-tabs__nav {

2021-02-25 16:53:03 485

原创 echarts常用属性

文章目录1、title 标题2、legend 图例3、grid 网格4、xAxis x轴5、yAxis y轴6、tooltip 提示框7、series 图表类型8、backgroundColor 图表的背景颜色9、color 图表中各系列的颜色10、完整示例echarts的使用是通过配置项来实现的，配置项对应网址：https://echarts.apache.org/zh/option.html#title，常用的配置如下：属性释义title标题legend

2021-02-24 15:38:00 1009

原创 Vue中使用echarts

文章目录一、安装echarts二、导入echarts三、页面中使用四、最终效果一、安装echartsnpm install echarts //默认安装最新版本npm install echarts@4.8.0 //安装指定版本二、导入echarts在 main.js 文件中引入，全局使用import Vue from 'vue'//引入import echarts from 'echarts'Vue.prototype.$echarts = echarts //将echarts放在vu

2021-02-24 11:23:35 156

原创 js删除数组末尾为0的数据

//原始数据 arr: [ "1.10", "1.30", "1.37", "2.11", "1.47", "1.32", "1.58","1.59", "1.39", "2.36", "0.00", "0.00"], //最终数据arrNew: ["1.10", "1.30", "1.37", "2.11", "1.47", "1.32", "1.58", "1.59", "1.39", "2.36"]//=>将数组末尾为 "0.00" 的数据全部去除var arr=[ "1.10",

2021-02-02 10:51:37 860

原创 echarts网站

官网：http://echarts.apache.org/zh/index.htmlhttps://www.makeapie.com/explore.html#sort=ranktimeframe=allauthor=all

2021-01-17 17:35:27 1291 1

qq_43519782的博客