ehcarts vue 水球图、边框四个角样式 页面布局

最新推荐文章于 2024-03-26 15:51:59 发布
最新推荐文章于 2024-03-26 15:51:59 发布
阅读量2.6k 收藏 7
点赞数 3
分类专栏： elementUI echarts css3动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41628411/article/details/108406140
版权
elementUI 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
echarts
13 篇文章 0 订阅
订阅专栏
css3动画
3 篇文章 0 订阅
订阅专栏

echarts+element+vue 水球图和一些css小样式（四个边框角）

在这里插入图片描述

1、引入echarts

npm install echarts -s
npm install echarts-liquidfill -s

2、main.js

import echarts from "echarts";
Vue.prototype.$echarts = echarts;
import 'echarts-liquidfill'

3、页面调用

// 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        let option = {
            backgroundColor: 'rgb(3,16,84)',
            title: {
                text: '',
                textStyle: {
                    color:'#fff',
                    fontWeight: 'bold',
                    fontSize: 18
                }
            },
            series: [{
                type: 'liquidFill',
                radius: '80%',
                center: ['50%', '50%'],
                data: [0.6, 0.55, 0.5, 0.45], // data个数代表波浪数
                backgroundStyle: {
                        borderWidth: 1,
                        // color: 'rgb(223,242,250)'
                    },
                label: {
                    normal: {
                        color: 'red',
                        insideColor: '#f2f2f2',
                        fontSize: 20,
                        formatter:'水温13.1℃\n------\nPH:6.6'
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 基于准备好的dom，初始化echarts实例
        let myCharts = this.$echarts.init(document.getElementById("mains"));
        // 指定图表的配置项和数据
        var colors = ['#ff0000', '#00ff00'];

        let options = {
            backgroundColor: 'rgb(3,16,84)',
            color: colors,
            grid: {
                top: '40',
                bottom:'40'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#333333'
                        },
                    },
                    axisLabel: {
                        textStyle: {
                        color: '#fff',  //更改坐标轴文字颜色
                        fontSize : 14      //更改坐标轴文字大小
                        }
                    },
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '水温',
                    min: 0,
                    max: 40,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: '#333333'
                        }
                    },
                    axisLabel: {
                        formatter: '{value} °C',
                        textStyle: {
                        color: '#fff',  //更改坐标轴文字颜色
                        fontSize : 14      //更改坐标轴文字大小
                        }
                    },
                    splitNumber:1
                },
                {
                    type: 'value',
                    name: 'PH值',
                    min: 0,
                    max: 10,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: '#333333'
                        },
                    },
                    axisLabel: {
                        textStyle: {
                        color: '#fff',  //更改坐标轴文字颜色
                        fontSize : 14      //更改坐标轴文字大小
                        }
                    },
                    splitNumber:1
                }
            ],
            series: [
                {
                    name: '水温',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 16.7, 15.6, 12.2, 32.6, 20.0, 6.4, 3.3, 6.4, 3.3]
                },
                {
                    name: 'PH值',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [2.0, 7.2, 3.3, 4.5, 6.3, 1.2, 2.3, 3.4, 3.0, 6.5, 2.0, 6.2, 2.0, 6.2]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myCharts.setOption(options);

template

<template>
  <div id="app">
      <div class="main_content">
        <div class="container">
            <div class="angle angle-right-top"></div>
            <div class="angle angle-right-bottom"></div>
            <div class="angle angle-left-top"></div>
            <div class="angle angle-left-bottom"></div>
            <div class="wrap_content">
                <p class="title">水箱水质</p>
                <div id="main" style="width: 200px;height:200px;"></div>
            </div>
            <div class="wrap_content wright">
                <p class="title">14日水质变化趋势图</p>
                <div id="mains" style="width: 520px;height:200px;"></div>
            </div>
        </div>
        <div class="container fl1">
            <div class="angle angle-right-top"></div>
            <div class="angle angle-right-bottom"></div>
            <div class="angle angle-left-top"></div>
            <div class="angle angle-left-bottom"></div>
        </div>
        <div class="container fl1">
            <div class="angle angle-right-top"></div>
            <div class="angle angle-right-bottom"></div>
            <div class="angle angle-left-top"></div>
            <div class="angle angle-left-bottom"></div>
        </div>
      </div>
  </div>
</template>

css

<style>
html,body{
    width: 100%;
    height: 100%;
    padding:0;
    margin: 0;
    background: rgb(0,9,74);
}
.main_content{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.container{
    width: 725px;
    height: 246px;
    background: rgb(3,16,84);
    margin: 10px;
    position: relative;
    padding: 24px;
        display: flex;
    justify-content: center;
    align-items: flex-start;
}
.wrap_content{
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.fl1{
    flex: 1;
}
.wright{
    width: 520px;
}
.title{
    color: #f2f2f2;
    font-size: 18px;
    font-weight: bold;
    margin: 12px 0 0 0;
    text-align: center;
    width: 200px;
}
.angle {
    position: absolute;
    width: 20px;
    height: 20px;
}
.angle-left-top {
    top: 0;
    left: 0;
    border-left: 4px solid rgba(7,185,255,0.5);
    border-top: 4px solid rgba(7,185,255,0.5);
}
.angle-left-top::after{
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    top: -4px;
    right: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid rgb(28,32,122);
    border-bottom: 4px solid rgb(28,32,122);
}
.angle-left-top::before{
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    bottom: 0;
    left: -4px;
    border-top: 4px solid transparent;
    border-right: 4px solid rgb(28,32,122);
    border-bottom: 4px solid rgb(28,32,122);
}
.angle-left-bottom {
    bottom: 0;
    left: 0;
    border-bottom: 4px solid rgba(7,185,255,0.5);
    border-left: 4px solid rgba(7,185,255,0.5);
}
.angle-left-bottom:before {
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    top: 0;
    left: -4px;
    border-bottom: 4px solid transparent;
    border-top: 4px solid rgb(28,32,122);
    border-right: 4px solid rgb(28,32,122);
}
.angle-left-bottom:after {
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    bottom: -4px;
    right: 0;
    border-left: 4px solid transparent;
    border-top: 4px solid rgb(28,32,122);
    border-right: 4px solid rgb(28,32,122);
}
.angle-right-top {
    top: 0;
    right: -2px;
    border-right: 4px solid rgba(7,185,255,0.5);
    border-top: 4px solid rgba(7,185,255,0.5);
}
.angle-right-top:before {
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    top: -4px;
    left: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid rgb(28,32,122);
    border-bottom: 4px solid rgb(28,32,122);
}
.angle-right-top:after {
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    bottom: 0;
    right: -4px;
    border-top: 4px solid transparent;
    border-left: 4px solid rgb(28,32,122);
    border-bottom: 4px solid rgb(28,32,122);
}
.angle-right-bottom {
    bottom: 0;
    right: -2px;
    border-right: 4px solid rgba(7,185,255,0.5);
    border-bottom: 4px solid rgba(7,185,255,0.5);
}
.angle-right-bottom:before {
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    top: 0;
    right: -4px;
    border-bottom: 4px solid transparent;
    border-top: 4px solid rgb(28,32,122);
    border-left: 4px solid rgb(28,32,122);
}
.angle-right-bottom:after {
    content: "";
    border-radius: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
    padding: 0;
    bottom: -4px;
    left: 0;
    border-right: 4px solid transparent;
    border-top: 4px solid rgb(28,32,122);
    border-left: 4px solid rgb(28,32,122);
}
</style>
@曾经@
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
01-19
话不多说，直接上问题图片 这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面 网上搜到的解决方案有两种， 一种是监听页面高度（我采用的这种） 一种是监听软键盘事件（ios和安卓实现方式不同，...
echarts水波球特效（附带外边框进度条）
z19960925的博客
07-16 5751
echarts水波球特效（附带外边框进度条） 1.话不多说先上效果图 2.这里用到了echarts的liquidFill图表，需要加载liquidFill插件 npm i echarts-liquidFill --save 3.在main.js入口文件中引入 4.也可通过script标签形式引入 <script src="http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfil
div只有四个角有边框（vue组件）
qingwu1104的博客
03-09 3845
<template lang="html"> <div class="frameDiv"> <div class="frame"> <div class="title">{{ title }}</div> <div class="num">{{ num }}</div> ...
Echarts 水球图echarts-liquidfill
最新发布
weixin_44443380的博客
03-26 345
（1）先安装，npm install。
css四个角边框
九亿宅男的梦的博客
09-24 2915
.rect{ 　　background: linear-gradient(to left, #196aa8, #196aa8) left top no-repeat, 　　　　　　　　linear-gradient(to bottom, #196aa8, #196aa8) left top no-repeat, 　　　　　　　　linear-gradient(to left, #196aa8, #...
vue 生成圆形图案
weixin_35756373的博客
12-30 1832
可以使用 Vue.js 中的 <template> 和 <style> 标签来创建圆形图案。 在 <template> 中，你可以使用 <div> 标签来创建一个圆形，然后在 <style> 中使用 border-radius 属性来将这个圆形的边角变成圆形。 例如： <template> <div class="c...
盒子模型你了解吗？
m0_73032457的博客
08-03 614
盒模型又称盒模型、盒子模型、框模型（box model），其由内容区（content）边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部。边框（border） 内边距（padding） 外边距（margin）.（3）、border-xxx-width 特指。* 影响盒子大小的元素：内容区，边框，内边距 ，外边距不影响盒子的大小。border-bottom:颜色，大小，样式;border-right:颜色，大小，样式;dotted 点状虚线。border-left:颜色，大小，样式;...
Vue在页面右上角实现可悬浮/隐藏的系统菜单
08-27
主要介绍了Vue在页面右上角实现可悬浮/隐藏的系统菜单,实现思路大概是通过props将showCancel这个Boolean值传递到子组件，对父子组件分别绑定事件，来控制这个系统菜单的显示状态。需要的朋友可以参考下
vue终极解决多个页面Echart随页面窗口大小而改变图形大小方法
09-03
vue终极解决多个页面Echart随页面窗口大小而改变图形大小
基于VUE选择上传图片并页面显示（图片可删除）
08-30
主要为大家详细介绍了基于VUE选择上传图片并页面显示，图片可以删除的效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue将页面导出为图片或者PDF
10-16
主要为大家详细介绍了Vue导出页面为PDF格式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
边框，圆角和阴影以及浮动布局的应用！
id2359955624的博客
07-20 937
边框，圆角和阴影以及浮动布局的应用！
echarts之环形图
weixin_34228617的博客
07-20 290
环形图，实际上就是饼图，，先贴上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--引入echarts文件--> <script src="../js/echarts.min.js"></scr...
element和echarts的坑
weixin_51097961的博客
05-16 365
element与echarts一起使用时宽高异常的问题 在这里插入图片描述 原因：tabs组件在你进入这个标签卡时已经渲染好了，但是canvas是默认大小，所以就导致了这个问题 解决：让echarts延迟加载 方案1. setTimeout(() => { //中间写入需要渲染在页面上的echarts getChart1(this.$refs.chart1);//这是我封装的加载echarts图表 }, 1000); //
Echarts5.3.2可视化案例-布局篇
IT从业者的成长历程
04-13 3063
可视化大屏布局案例
初试vue写echarts可视化布局
hongsir的博客
10-15 1409
初试vue写echarts可视化布局项目初始化创建全局样式表并导入iconfont字体文件全局挂载echarts对象初始化ScreenPage主体视图页面和各个组件配置路由主屏幕的布局分析期望最终效果图修改全局样式global.less页面布局分析@jiaminghi/data-view大屏数据可视化开源组件的使用安装并引入边框组件的使用效果图如何使用echarts组件template代码生成echarts图表为了更方便操作echarts，将echarts的option配置进行拆分 项目初始化 创建全局样式
用Vue整合Echarts做数据展示：整合ElementUI，实现布局
weixin_43326165的博客
10-04 5226
ElementUI官网 Element开发指南 安装ElementUI 【ctrl+`】打开终端 输入 npm i element-ui -S 在main.js中为我们的项目引入ElementUI // The Vue build version to load with the `import` command // (runtime-only or standalone) has b...
ECharts可视化大屏学习笔记【1】（整个结构布局搭建）
Enchanted to meet U
07-09 1767
一、基本效果
echarts 饼图取消legend图例的点击事件，保留鼠标悬浮legend上显示tooltie提示信息的事件
热门推荐
扬帆前行
06-13 1万+
echarts 饼图 因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏，进行了数据的二次处理，所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件，会关闭一个块，此时就需要重新去计算数据并重新渲染echarts，需求并没有要求做点击关闭部分块在占比图中，网上大部分资源是说设置selectedMode:false，但是这个一旦设置为false，那么点击事件和鼠标悬浮显示tooltie事件就会都取消，显然不符合，经过查官方文档发现legendselectchang
vue设计四个盒子上下左右布局
06-09
您可以使用Vue的模板语法和CSS来实现这个布局，以下是一个简单的例子： ``` <template> <div class="container"> <div class="box top"></div> <div class="box left"></div> <div class="box center"></div> <div class="box right"></div> <div class="box bottom"></div> </div> </template> <style> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100vh; } .box { width: 100px; height: 100px; } .top { order: 1; } .left, .right { order: 2; } .center { order: 3; } .right { order: 4; } .bottom { order: 5; } @media (max-width: 768px) { .box { width: 50px; height: 50px; } } </style> ``` 在这个例子中，我们使用了flex布局来实现盒子的上下左右布局。我们给容器设置了`display: flex`和`flex-wrap: wrap`，这样子元素就会按照我们定义的顺序和规则布局。 每个盒子都有一个不同的类名，以便我们能够在CSS中对它们进行样式设置。我们使用了`order`属性来控制它们的顺序。 此外，我们还针对不同屏幕尺寸使用了媒体查询来调整盒子的大小。 你可以根据你自己的需求来调整这个例子，并将其应用到你的Vue项目中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值