• 【eCharts】第一部分 eCharts的准备工作

    第一部分 eCharts的准备工作

    文章目录

    1.eCharts的准备工作

    第一步:

    导入echarts

    从 npm 获取

    npm install echarts --save

    • 1

    从 CDN 获取

    推荐从 bootcdn引用 echarts。

    第二步:

    创建一个dom并且设置它的宽高

    第三步:

    书写配置,下面的案例可以显示一个简单的柱状图

    展示案例图:

    在这里插入图片描述

    代码:

    <!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>eCharts的基本使用</title>
    <!-- 第一步导入 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.js"></script>
</head>
<body>
    <!-- 第二步 创建一个dom -->
    <div class="box1" style="width:800px;height: 400px;"></div>
</body>
<script>
    // 基于准备好的dom，初始化echarts实例
    let box1 = document.querySelector('.box1')
    // 使用init方法,初始化echarts的实例
    let myCharts1 = echarts.init(box1)
    // 设置配置项
    myCharts1.setOption({
        // title配置项专门设置标题
        title:{
            text:'echarts的基本使用(我是主标题)',
            subtext:'我是副标题',
            // 设置标题的位置
            left:'center',
            // 设置主标题字体样式
            textStyle:{
                color:"red",
                fontWeight:'bold',
                fontFamily:'微软雅黑'
            },
            // 设置副标题字体样式
            subtextStyle:{
                color:"#555",
                fontWeight:'lighter',
                fontFamily:'微软雅黑'
            }
        },
        // x轴
        xAxis:{
            data:['衣服','食品','生活用品','家具','厨具','裤子']
        },
        // y轴
        yAxis:{
            // 设置是否显示y轴线
            axisLine:{
                show:true
            },
            // 设置是否显示y轴刻度
            axisTick:{
                show:true
            }
        },
        // 设置图表的类型
        series:[
            {
                type:'bar',
                data:[10,45,23,67,30,12]
            }
        ]
    })



    
</script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69

    总结

    以上就是今天要讲的内容，希望对大家有所帮助！！！

  • 相关阅读:
    stable-diffusion-webui官方版本地安装教程
    数字信号处理-8-自相关
    MybatisPlus【SpringBoot】 7 通用枚举
    BIOMOD2模型、MaxEnt模型物种分布模拟，生物多样性生境模拟，论文写作
    Redis的非关系型数据库
    2022年9月电子学会C语言等级考试试卷（四级）答案解析
    编程语言是都一样的，吗？
    防火墙NAT配置
    在jupyter中使用R
    Visual Studio Code 1.73发布！
  • 原文地址：https://blog.csdn.net/Trees__/article/details/125432065