初识ECharts及配置

谁践踏了优雅 2024-03-25 09:38 110阅读 0赞

ECharts 提供了常规的折线图、柱状图、散点图、饼图等，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

### **获取ECharts安装方式：** ###

--------------------

[获取 ECharts - 入门篇 - Handbook - Apache ECharts][ECharts - _ - Handbook - Apache ECharts]

*  从 GitHub 获取([Releases · apache/echarts (github.com)][Releases _ apache_echarts _github.com])

*  从 npm 获取

*  从 CDN 获取

*  在线定制

本文在github中获取的，解压后将dist里的echars.min.js/echarts.js复制到项目下，新建html后就可以开始编写第一个ECharts图表啦。

![a6b3db4f0282f28a6c8bbd5a4040c93a.png][]

### 开始第一个示例 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <script src="echarts.min.js"></script>
    </head>
    <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的 DOM，初始化图表实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表配置项和数据
            var option = {
                title: {
                    text: 'ECharts entry example'
                },
                tooltip: {}, //提示框组件
                legend: {
                    data:['Sales']
                },
                xAxis: {
                    data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
                },
                yAxis: {},
                series: [{
                    name: 'Sales',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
    
            // 使用指定的配置项目和数据显示图表
            myChart.setOption(option);
        </script>
    </body>
    </html>

![7a3394ab213d35bb9b9df90186de4897.png][]

编写ECharts第一步就完成了，让我们继续接下来的学习之旅~

[ECharts - _ - Handbook - Apache ECharts]: https://echarts.apache.org/handbook/zh/basics/download/
[Releases _ apache_echarts _github.com]: https://github.com/apache/echarts/releases
[a6b3db4f0282f28a6c8bbd5a4040c93a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8c25faaa8241414b84b48ff19d4a3036.png
[7a3394ab213d35bb9b9df90186de4897.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/fcfe37c933914f06a9d2bfab8a54fd88.png