发现一个好用的图表创建工具：ECharts

爵特猛
2021-8-5 15:52
其它
3588

发现一个好用的图表创建工具：ECharts，一个基于 JavaScript 的开源可视化图表库。

可以方便快捷的生成各种折线图、柱形图或饼图。开发后台时，往往都需要统计各种数据并显示，给操作后台的管理阅览，直观的数据图可以方便管理员查看并作出分析。

引用简单：ECharts只需要引用echarts.min.js。echart.min.js可以在其官网上在线定制化下载，可以选择版本、需要打包的图表类型、是否压缩等，勾选自己需要用到的图表类型即可，之后点击下载，就能下载到自己定制的echart.min.js文件了。（ECharts在线定制下载）

爵特猛

使用简单：

1.在HTML页面中引入。

<script type="text/javascript" src="echarts.min.js" ></script>

2.绘制一个简单的图标。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));        // 指定图表的配置项和数据
        var option = {            
                title: {                
                    text: 'ECharts 入门示例'
                },            
                tooltip: {},            
                legend: {                
                    data:['销量']
                },            
                xAxis: {                
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },            
                yAxis: {},            
                series: [{                
                    name: '销量',                
                    type: 'bar',                
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };     
                       
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);    
     </script>
</body>
</html>

爵特猛