Echarts数据可视化2

A-sleep

已于 2022-04-12 17:04:35 修改

阅读量379

点赞数

分类专栏：数据可视化文章标签： javascript 前端 html

于 2022-01-07 14:13:45 首次发布

本文链接：https://blog.csdn.net/FellAsleep/article/details/122363007

版权

边框背景图资源
border-image-source: url(./images/border.jpg);

边框背景图剪裁是边框的上右下左宽度注意点：这个属性不能写单位要写数字
border-image-slice: 167 167 167 167;

背景图平铺、均匀平铺
border-image-repeat: repeat; round;

注意点1：不规则边框背景图，需要根据每一个边单独设置border宽度 */
border: 48px solid transparent;
border-width: 51px 38px 21px 132px; //width 与 slice 背景图剪裁尺寸对应
在这里插入图片描述
简写:
border:1px solid transparent;
border-image: url(…/image/border.png ) 50 40 25 130/50px 40px 25px 130px;
// 面板默认内边距
padding: 20px 30px;

<!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>1.6日数据可视化</title>
    <!-- 引入Css样式 -->
    <link rel="stylesheet" href="./css/index.css">


    <!-- 引入echarts文件 -->
    <script src="./index.js/echarts.js"></script>
    <!-- 引入js文件 -->
    <script src="./index.js/index1.js"></script>
</head>

<body>
    <!-- 版心 -->
    <div class="contains">
        <!-- 左侧用户信息 -->
        <div class="left pannel">
            <form action="">
                <div class="userinfo">
                    <div class="usertitle">
                        姓名: <input type="text" class="uname">
                        评分: <input type="text" class="score">
                        薪资: <input type="text" class="salary">
                        <button class="btn">新增</button>
                    </div>
            </form>
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>评分</th>
                        <th>薪资</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr hidden>
                        <td>测试</td>
                        <td>测试2</td>
                        <td>测试3</td>
                        <td> <a href="javascript:" class="delete">删除</a>
                        </td>
                    </tr> -->
                </tbody>
            </table>
            
            <!-- 地图模块 -->
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart"></div>
            </div>
        </div>
    </div>

    <!-- 右侧 -->
    <div class="right">
        <!-- 评分展示 -->
        <div class="scoreshow pannel">
            <h3>评分图示</h3>
            <!-- 柱状图 -->
            <div class="bar">
            </div>
        </div>
        <!-- 薪资展示 -->
        <div class="newshow pannel">
            <h3>薪资图示</h3>
            <!-- 柱状图 -->
            <div class

最低0.47元/天解锁文章

A-sleep

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts数据可视化2

边框背景图资源border-image-source: url(./images/border.jpg);边框背景图剪裁是边框的上右下左宽度注意点：这个属性不能写单位要写数字border-image-slice: 167 167 167 167;背景图平铺、均匀平铺border-image-repeat: repeat; //// round;注意点1：不规则边框背景图，需要根据每一个边单独设置border宽度 */border: 48px solid transpar
复制链接

扫一扫

专栏目录