Echarts的安装以及简单使用

丨Harald丨

已于 2023-04-18 15:33:29 修改

阅读量2.9k

点赞数 1

分类专栏： Echarts学习文章标签： echarts

于 2023-04-17 11:00:33 首次发布

本文链接：https://blog.csdn.net/qq_58093482/article/details/130195007

版权

Echarts学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何从官方网站下载并定制Echarts，然后在VScode中创建项目，导入echarts.min.js文件，以及展示一个简单的柱状图实例，包括HTML结构、Echarts初始化和配置项的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts的安装：

建议去官方网站直接安装，网址如下：

下载 - Apache ECharts

界面如下，单击“在线定制”，里面可以选择你想要的图标，坐标系，组件等。

选择完成后，单击“下载”。

等待官网“Buliding”，待末行出现“Completed”字样则表示安装完成。

Echarts的简单使用

打开VS code，为Echarts的使用创建所需的文件/文件夹，并导入echarts.min.js。

示例：

在“01Eharts的快速入门.html”文件中，有如下代码：

<!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>Document</title>
    <!--步骤1:引入echarts.js文件-->
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <!--步骤2:准备一个呈现图表的盒子-->
    <div style="width: 600px;height: 400px;"></div>
    <script>
        // 步骤3:初始化echarts实例对象
        // 参数，dom，决定图表最终呈现的位置
        var mCharts = echarts.init(document.querySelector('div'))
        // 步骤4:准备配置项
        var option ={
            xAxis:{
                type:'category',
                data:['张三','李四','王五']
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:[70,95,62]
                }
            ]
        }
        //步骤5:将配置项设置给echarts实例对象
        mCharts.setOption(option)
    </script>
</body>
</html>

完成后，在VS code右上角点击“运行和调试”