数据可视化

1.canvas初体验

<!-- canvas画布：是html5中新增特性 -->
    <!-- 自带宽度高度  300*150 -->
    <!-- 浏览器认为canvas标签是一张图片 -->
    <!-- 给canvas画布添加文本内容没有意义，不会显示 -->
    <!-- 添加子节点也是没有意义 -->
    <!-- 在canvas操作必须用js来完成 -->
    <!-- 切记不能通过样式来显示文字 线条，必须通过js -->
    <!-- 宽度和高度必须通过canvas标签属性来添加，不能通过样式写 -->
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    // canvas标签的任何操作务必通过js完成
    // 通过js当中‘笔’去完成
    let canvas=document.querySelector('canvas');
    // 获取画布的笔（上下文）
    let ctx=canvas.getContext('2d');//它是个对象
    // 绘制线段:绘制线段起点的设置
    ctx.moveTo(100,100);
    // 其他点的设置，其他点可以有多个
    ctx.lineTo(100,200);
    ctx.lineTo(200,100);
    // 设置颜色 设置图形填充的颜色
    ctx.fillStyle='red'  
    ctx.fill();
    // 设置线段的颜色
    ctx.strokeStyle='purple'
    ctx.lineWidth='20'
    // 可以设置起点与最终结束点连接在一起
    ctx.closePath();
    ctx.stroke()

2.绘制矩形

<body>
    <canvas width="400" height="400"></canvas>
</body>
</html>
<script>
   let canvas=document.querySelector('canvas');
   let ctx=canvas.getContext('2d');
   //绘制矩形第一种方式 参数为x y w h  只能描边
   ctx.strokeRect(100,200,100,200);
//    绘制矩形第二种方式   可以填充颜色
// 绘制图形之前设置填充颜色
ctx.fillStyle='cyan'
   ctx.fillRect(300,200,100,200)

3.绘制圆形

<body>
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    let canvas=document.querySelector('canvas');
    let ctx=canvas.getContext('2d');
    //绘制圆形
    ctx.beginPath();
    // 绘制圆形的方法：x y r  起始弧度 结束弧度 是否逆时针绘制
    ctx.arc(100,100,50,0,2*Math.PI,true);
    // 设置填充颜色
    ctx.fillStyle='red'
    ctx.fill()
    // 绘制圆形
    ctx.stroke();

4.绘制字体和清除画布

<body>
    <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    let canvas=document.querySelector('canvas');
    let ctx=canvas.getContext('2d');
    ctx.fillRect(100,200,100,200)
    // 清除画布
    ctx.clearRect(100,200,100,200);
    // 设置文字字体
    ctx.font='20px 微软雅黑'
    // 绘制文字
    ctx.fillText('数据可视化',50,20);

5.SVG

创建一条直线

创建折线

创建矩形

创建圆

创建圆和椭圆

创建多边形

通过指定点以及点和点之间的线来创建任意形状

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <!-- svg双闭合标签：默认宽度与高度300*150 svg绘制图片务必在标签内部使用 -->
    <svg class="box">
        <!-- 绘制直线 x1 y1 第一个点的坐标 x2 y2 第二个点的坐标 -->
        <line x1="100" y1="100" x2="200" y2="200" stroke="red" ></line>
        <line x1="100" y1="200" x2="200" y2="100" stroke="red" ></line>
        <!-- 绘制折线 可以多个点，最好带有逗号 -->
        <polyline points="300 300,150 150,120 400"></polyline>
        <!-- 绘制矩形 fill:设置填充颜色 fill-opacity： 设置透明度 -->
        <rect x="400" y="200" width="150" height="50" fill="pink"></rect>
        <!-- 绘制圆 -->
        <circle cx="70" cy="95" r="50"></circle>
    </svg>

6.ECharts入门

 <!-- 引入echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <!-- 准备一个容器，就是显示图标的区域 -->
    <div></div>
</body>
</html>
<script>
    // 基于准备好的dom初始化echarts实例
    let dom=document.querySelector('div');
    // 创建echarts实例
    let mycharts=echarts.init(dom);
    // 指定图标的配置项与数据
    mycharts.setOption({
        // 图标的标题
        title:{
            // 主标题的设置
         text:'数据可视化',
        //  子标题
        subtext:'echarts的基本使用',
        // 主标题的颜色
        textStyle:{
            color:'cyan'
        },
        // 设置标题位置
        left:'center'
        },
        // x轴的配置对象
        xAxis:{
            // 数据
            data:['衣服','直播','电影','游戏']
        },
        //y轴的配置项
        yAxis:{
            // 显示y轴的线
            axisLine:{
                show:true,
            },
            // 显示y轴的刻度
            axisTick:{
                show:true
            }
        },
        // 系列的设置：绘制什么样类型的图标 数据的展示在这里设置
        series:[
            {
                // 图表类型的设置  bar柱状图 line 折线图 pie饼图
                type:'bar',
                // 图标的数据
                data:[10,20,30,40],
                color:'red'
            }
        ]
    })
</script>

6.1Echarts新特性 数据集

 // 基于准备好的dom初始化echarts实例
    let dom=document.querySelector('div');
    // 创建echarts实例
    let mycharts=echarts.init(dom);
    // 数据集
    let data=[
        ['衣服',10,22,'x',10],
        ['直播',12,55,'y',30],
        ['电影',16,44,'z',60],
        ['游戏',19,32,'t',30],
    ]
    // 指定图标的配置项与数据
    mycharts.setOption({
        // 设置字符集
        dataset:{
        //  数据源
        source:data
        },
        // 图标的标题
        title:{
            // 主标题的设置
         text:'数据可视化',
        //  子标题
        subtext:'echarts的基本使用',
        // 主标题的颜色
        textStyle:{
            color:'cyan'
        },
        // 设置标题位置
        left:'center'
        },
        // x轴的配置对象
        xAxis:{
            // 数据
            // data:['衣服','直播','电影','游戏']
        },
        //y轴的配置项
        yAxis:{
            // 显示y轴的线
            axisLine:{
                show:true,
            },
            // 显示y轴的刻度
            axisTick:{
                show:true
            }
        },
//         legend: {
//     orient: "vertical",
//     left: "left",
//     data: ["x", "y", "z", "t"]
//   },
        // 系列的设置：绘制什么样类型的图标 数据的展示在这里设置
        series:[
            // 柱状图
            {
                // 图表类型的设置  bar柱状图 line 折线图 pie饼图
                type:'bar',
                // 图标的数据
                // data:[10,20,30,40],
                color:'red',
                encode:{
                   y:1,
                }
            },
            // 折线图
            {
                type:'line',
                // data:[10,20,30,40],
                color:'pink',
                encode:{
                    y:2
                }
            },
            // 饼图
            {
                type:'pie',
                encode:{
                    // 饼图旁边文字用的是谁
                    itemName:3,
                    value:4
                },
                // 饼图你可以显示文字，data写法如下
            //     data:[{
            //         name:'x',
            //         value:10
            //     },
            //     {
            //         name:'y',
            //         value:20
            //     },
            //     {
            //         name:'z',
            //         value:30
            //     },
            //     {
            //         name:'t',
            //         value:40
            //     }
            // ],
            // 饼图的宽度高度半径
            width:150,
            height:150,
            left:150,
            top:100,
            radius:25
                
            },
        ]
    })

6.2Echarts组件

let dom=document.querySelector('.box');
    let mycharts=echarts.init(dom);
    mycharts.setOption({
        dataZoom:{},
        title:{
            text:'echarts组件'
        },
        xAxis:{
            data:['游戏','电影','直播','娱乐']
        },
        yAxis:{},
        series:[
            {
                name:'柱状图',
                type:'bar',
                data:[20,30,40,50]
            },
            {
                name:'折线图',
                type:'line',
                data:[30,40,50,60]
            }
        ],
        // 提示组件
        tooltip:{
           textStyle:{
            color:'red'
           }
        },
        // 系列切换组件
        legend:{
              data:['柱状图','折线图']
        },
        // 工具栏组件
        toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: "none"
      },
      dataView: {
        readOnly: false
      },
      magicType: {
        type: ["line", "bar"]
      },
      restore: {},
      saveAsImage: {}
    },
  },
  // 调整布局
  grid: {
        left:30,
        right:0
    },
    })
posted @   前端4u  阅读(28)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS3笔记
·  React
·  ECharts可视化数据大屏
·  JS 数据可视化
·  HTML5-数据可视化学习笔记-进阶之路
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae