Echarts使用

最新推荐文章于 2023-05-12 11:35:29 发布

软小乖乖

最新推荐文章于 2023-05-12 11:35:29 发布

阅读量314

点赞数

文章标签： css echarts

本文链接：https://blog.csdn.net/weixin_43945122/article/details/116693204

版权

https://www.jsdelivr.com/package/npm/echarts 下载echarts.main.js 引入到要使用的页面

示例图：
在这里插入图片描述

详情使用代码如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Echarts文件 -->
    <!-- 通过标签方式直接引入构建好的escharts文件 -->
    <script src="./echarts.min.js"></script>
    <script src="./westeros.js"></script>
</head>

<body>
    <!-- 在 -绘制的时候给escharts准备一个具备宽高的dom容器-->
    <div id="main" style="width:900px;height:600px;"></div>
    <!-- 然后通过echarts.init方法初始化一个escharts实例并通过setOption方法生成一个简单的柱状图 -->
    <script type="text/javascript">
        // 基于准备好的dom舒适化echarts实例
        var box = document.getElementById("main")
        var myEchart = echarts.init(box, "westeros");

        // //指定突变的配置项和数据
        var option = {
            title: {//标题
                text: '家谱输出列表',//标题名称
                subtext: '装评输出', //副标题 
                textStyle: {
                    color: "#516b91",
                    // fontStyle:"italic",// 
                }
            },
            tooltip: { background: "#59c4e6" },
            legend: {//图例组件
                data: ["输出", "装评","门派积分","莫得感情","高昌","家园"],
            },
            xAxis: {//x轴
                data: ["姜哲", "南方", "北方", "俞迟", "红糖"]
            },
            yAxis: {},
            series: [
                {
                    name: "输出",
                    type: "bar",
                    data: [12000, 5000, 6000, 5000, 3000]
                },
                 {
                    name: "装评",
                    type: "bar",
                    data: [2000, 14000, 15000, 16000, 10000]
                },
                {
                    name: "门派积分",
                    type: "bar",
                    data: [10000, 2000, 1500, 1600, 1000]
                },
                {
                    name: "莫得感情",
                    type: "bar",
                    data: [3000, 3000, 3000, 3000, 3000]
                },
                 {
                    name: "高昌",
                    type: "line",
                    data: [50000, 30000, 40000, 20000, 40000]
                },
                 {
                    name: "家园",
                    type: "pie",
                    width:"20%",
                    left:"60%",
                    height:"40%",
                    top:"10%",
                    data: [12000, 1200, 1000, 1000, 3000]
                },
            ],
            datasets: [
        
            ]

        };
        // // 使用刚指定的配置项和数据显示图标 
        myEchart.setOption(option)
    </script>
</body>

</html>

软小乖乖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts使用

https://www.jsdelivr.com/package/npm/echarts 下载echarts.main.js 引入到要使用的页面示例图：详情使用代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫