第一部分 eCharts的准备工作

文章目录

第一部分 eCharts的准备工作
1.eCharts的准备工作
总结

1.eCharts的准备工作

第一步:

导入echarts

从 npm 获取

npm install echarts --save

从 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>