两分钟学会用js画动态表

最新推荐文章于 2022-09-21 18:48:53 发布

Romandisea

最新推荐文章于 2022-09-21 18:48:53 发布

阅读量123

点赞数

分类专栏： javascript从入门到放弃文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_49200148/article/details/107847454

版权

javascript从入门到放弃专栏收录该内容

8 篇文章 1 订阅

订阅专栏

这里需要用到一个插件echarts
先看一个最简单的效果图
在这里插入图片描述

代码来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <!-- 引入echarts脚本 -->
    <script src="js/echarts.js"></script>
</head>

<body>
    <div style="width: 1000px;height: 800px;"></div>
    <script>
        //初始化echarts示例，这里需要dom元素
        var cc = echarts.init($("div")[0]);
        //开始配置图标
        cc.setOption({
            title: { //标题
                text: '主标题'
            },
            legend: { //图例
                data: ['图例']
            },
            xAxis: { //表格x轴
                data: ['示例1', '示例2', '示例3', '示例4', '示例5']
            },
            yAxis: {}, //表格的y轴
            series: { //表格的主要内容
                name: '图例',
                type: 'bar', //表格类型，这里选的是柱形图
                data: [5, 23, 16, 33, 3]
            }
        })
    </script>
</body>

</html>