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

echarts+element+vue 水球图和一些css小样式（四个边框角）1、引入echartsnpm install echarts -snpm install echarts-liquidfill -s2、main.jsimport echarts from "echarts";Vue.prototype.$echarts = echarts;import 'echarts-liquidf

@曾经@

2825人浏览 · 2020-09-04 16:12:55

@曾经@ · 2020-09-04 16:12:55 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^