数据可视化第一天

最新推荐文章于 2024-07-11 17:17:41 发布

-*summer*-

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量123

点赞数

分类专栏：笔记文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/summer_66/article/details/121126019

版权

笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1.Echarts使用

第一步：下载echarts插件

第二步：引入js文件

第三步：写一个具有宽高的盒子

第四步：实例化实例化的时候是echarts.init(DOM对象) 括号里必须是DOM对象

let myChart = echarts.init(document.querySelector('元素'));

第五步：准备配置项配置项必须是一个对象

let option = {};

第六步：设置配置项

myChart.setOption(option);

series中的data属性，有两种设置方式：data[23,36]; data[{value: 23 name:'xxx'}, {value: 36}] 里面可以有name属性

2.Echarts基础配置

series：一系列图表 type值是line是线性，bar是柱状图，pie是饼状图

xAxis：x轴

yAxis：y轴

grid：网格如果想四周都是网格就是show:true;

title：图表的标题

legend：图表实例，必须有name属性

tooltip：提示框组件，放在轴上会显示

let option = {
                      xAxis: {
                          type: 'category',
                          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                      },
                      yAxis: {
                          type: 'value'
                      },
                      // 表格
                      grid : {
                        show : true,
                      },
                      title : {
                        text : '年度统计',
                      },
                      tooltip : {
                        trigger : 'axis',
                      },
                      legend : {
                        data : ['销量统计'],
                      },
                      series: [{
                          name:'销量统计',
                          data: [820, 932, 901, 934, 1290, 1330, 1320],
                          type: 'line'
                      }],
                      color : ['#8df'],
                  };

3.JS中rem适配

(function () {
      let setFont = function () {
        // 获取html
        let html = document.documentElement;
        // 获取html的宽
        let width = html.clientWidth;
        // 除以80
        let fontSize = width / 80 + 'px';
        // 设置给html的字体大小
        html.style.fontSize = fontSize;
      };
      setFont();
      // 给window窗口添加resize事件
      window.addEventListener('resize', function () {
        setFont();
      });
})();

4.边框图片

boder-image:url() 裁切大小 / 图片边框宽度平铺；

裁切大小按照上右下左顺序切

图片边框的宽度默认是盒子中boder的宽度

平铺repeat从中间扩散，环绕也是从中间平铺，但是放不开了就会适应

<style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
            width: 350px;
            height: 160px;
            border: 20px solid #ccc;
            margin-top: 20px;
        }
        li:nth-child(1){
            /*border-image: url("images/border.jpg") 167/20px round;*/
            border-image-source: url("images/border.jpg");
            border-image-slice: 167 167 167 167;
            border-image-width: 20px;
            /*环绕  是完整的使用切割后的图片进行平铺*/                    
            border-image-repeat: round; 
        }
        li:nth-child(2){
            /*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/                                         border-image: url("images/border.jpg") 167/20px repeat;
        }
        li:nth-child(3){
            /*默认的平铺方式*/
            border-image: url("images/border.jpg") 167/20px stretch;
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

-*summer*-

关注

0
点赞
踩
0

收藏

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

1.Echarts使用第一步：下载echarts插件第二步：引入js文件第三步：写一个具有宽高的盒子第四步：实例化实例化的时候是echarts.init(DOM对象) 括号里必须是DOM对象let myChart = echarts.init(document.querySelector('元素')); 第五步：准备配置项配置项必须是一个对象let option = {}; 第六步：设置配置项myChart.setOption(option)
复制链接

扫一扫