ECharts学习之简单图表的绘制_编程设计

1.获取ECharts

　　官网下载：http://echarts.baidu.com/download.html

2.在html页面中引入ECharts文件

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>ECharts练习</title> 
        <script type="text/javascript" src="js/echarts.min.js" ></script>//这里是引入ECharts的js文件 
    </head> 
    <body> 
    </body> 
</html>

文件的目录结构：

3.绘制一个简单的图表

<!DOCTYPE html> 
<html> 
 
    <head> 
        <meta charset="UTF-8"> 
        <title>ECharts练习</title> 
        <script type="text/javascript" src="js/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>

4.效果图展示

本文参考链接：https://www.cnblogs.com/wgl1995/p/6229730.html