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

Tree_wws

已于 2022-08-11 15:25:18 修改

阅读量231

点赞数 2

分类专栏： eCharts 文章标签： javascript vue.js 前端 echarts

于 2022-06-23 17:54:22 首次发布

本文链接：https://blog.csdn.net/Trees__/article/details/125432065

版权

eCharts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第一部分 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>

总结

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

Tree_wws

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【eCharts】第一部分 eCharts的准备工作

导入echarts从 npm 获取从 CDN 获取推荐从 bootcdn引用 echarts。创建一个dom并且设置它的宽高书写配置,下面的案例可以显示一个简单的柱状图展示案例图:代码:总结以上就是今天要讲的内容，希望对大家有所帮助！！！......
复制链接

扫一扫

专栏目录