博客

Echarts的安装以及简单使用

  • Post author:
  • Post category:其他


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右上角点击“运行和调试”

注意：

若想使用其他浏览器打开，可在“扩展”选项中输入“@category:debuggers HTML”

选择你想使用的浏览器。

执行结果：


版权声明：本文为qq_58093482原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。