最近研究前端数据展示，发现了一个比较好用的前台图形化工具echarts,在这给大家分享一下，希望对大家有所帮助。（文章末尾附实例代码）        ECharts，一个使用 JavaScript 实现的开源可视化库。 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

       下面以折线图、柱状图、散点图、饼图、K线图、漏斗图等为例子介绍一下ECharts的基本使用步骤：
       一、准备工作，在eclipse中创建一个动态web工程，并导入ECharts相关资源文件，如图：
      
       二、创建页面，并且在页面上导入ECharts的主js文件echarts.js及图形展示的位置，如下：                    

       三、根据项目需要选择主题（即图的样式），并且根据后台获取的数据勾画图形，代码如下：

[JavaScript] 纯文本查看 复制代码

         require.config({
                paths : {
                        echarts : '../echart' //echart组件相对于当前html页面所在文件夹
                }
        });
        //下面'echarts'引用上面paths的echarts, 表明引入文件路径
        //'echarts/theme/macarons'加载主题，'echarts/chart/line'加载折线图使用的js文件，'echarts/chart/bar'加载柱状图使用js文件
        require([ 'echarts', 'echarts/theme/macarons', 'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
        'echarts/chart/bar' ], function(ec, theme) {
                var myChart = ec.init(document.getElementById('main'), theme);//获取页面上要嵌入图形的位置
                option = {//设置图形信息：图形展示的样式&图形的数据
                        title : {//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
                                text : '未来一周气温变化',
                                subtext : '纯属虚构'
                        },
                        tooltip : {//提示框，鼠标悬浮交互时的信息提示
                                trigger : 'axis'
                        },
                        legend : {//图例，每个图表最多仅有一个图例
                                data : [ '最高气温', '最低气温' ]
                        },
                        toolbox : {//工具箱
                                show : true, //是否展示
                                feature : {
                                        mark : {//辅助线开关 总共三个开关
                                                show : true
                                        },
                                        dataView : {//框选区域缩放开关 两个开关
                                                show : true,
                                                readOnly : false
                                        },
                                        magicType : {//数据视图开关(可以进行图形切换)  readOnly为是否只读开关 一个开关
                                                show : true,
                                                type : [ 'line', 'bar' ]
                                        },
                                        restore : {//表的还原
                                                show : true
                                        },
                                        saveAsImage : {//保存为图片    注意：IE8不支持
                                                show : true
                                        }
                                }
                        },
                        xAxis : [ {//横坐标（x）轴展示
                                type : 'category',
                                boundaryGap : false,//类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头
                                data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
                        } ],
                        yAxis : [ {//纵坐标（y）轴展示
                                type : 'value',
                                axisLabel : {//展示的label格式
                                        formatter : '{value} °C'
                                }
                        } ],
                        series : [ {//驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效，请注意适用类型
                                name : '最高气温',
                                type : 'line',
                                data : [ 11, 11, 15, 13, 12, 13, 10 ],
                                markPoint : {//数据标注内容
                                        data : [ {
                                                type : 'max',
                                                name : '最大值'
                                        }, {
                                                type : 'min',
                                                name : '最小值'
                                        } ]
                                },
                                markLine : {//数据标线内容
                                        data : [ {
                                                type : 'average',
                                                name : '平均值'
                                        } ]
                                }
                        }, {
                                name : '最低气温',
                                type : 'line',
                                data : [ 1, -2, 2, 5, 3, 2, 0 ],
                                markPoint : {
                                        data : [ {
                                                type : 'min',
                                                name : '周最低',
                                        }, {
                                                type : 'max',
                                                name : '周最高',
                                        } ]
                                },
                                markLine : {
                                        data : [ {
                                                type : 'average',
                                                name : '平均值'
                                        } ]
                                }
                        } ]
                };

                myChart.setOption(option);//把生成的图形写到页面
        });

       四、测试，把项目发布到应用服务器tomcat，访问 http://localhost:8080/echart/echartHtml/line_bar.html

        

       测试结果成功，页面图形根据数据正常展示！（本例中数据为静态数据，实际开发中可替换为从数据库获取的静态数据）
       总结：以上就是echarts的开发流程，别的图形的开发流程也和上面流程一样，具体代码可以参考第三步的代码，里面注解非常详细。散点图、饼图、K线图、漏斗图几个图形的代码可在项目中自行查看，注解也十分详细。

示例代码：（因项目太大，无法上传，故分享百度云盘连接）
       链接：https://pan.baidu.com/s/11tfwyqDVz1jD3YoZYqvP-A 密码：pleg

       最近研究前端数据展示，发现了一个比较好用的前台图形化工具echarts,在这给大家分享一下，希望对大家有所帮助。（文章末尾附实例代码）        ECharts，一个使用 JavaScript 实现的开源可视化库。 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

       下面以折线图、柱状图、散点图、饼图、K线图、漏斗图等为例子介绍一下ECharts的基本使用步骤：
       一、准备工作，在eclipse中创建一个动态web工程，并导入ECharts相关资源文件，如图：
      
       二、创建页面，并且在页面上导入ECharts的主js文件echarts.js及图形展示的位置，如下：                    

       三、根据项目需要选择主题（即图的样式），并且根据后台获取的数据勾画图形，代码如下：

[JavaScript] 纯文本查看 复制代码

         require.config({
                paths : {
                        echarts : '../echart' //echart组件相对于当前html页面所在文件夹
                }
        });
        //下面'echarts'引用上面paths的echarts, 表明引入文件路径
        //'echarts/theme/macarons'加载主题，'echarts/chart/line'加载折线图使用的js文件，'echarts/chart/bar'加载柱状图使用js文件
        require([ 'echarts', 'echarts/theme/macarons', 'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
        'echarts/chart/bar' ], function(ec, theme) {
                var myChart = ec.init(document.getElementById('main'), theme);//获取页面上要嵌入图形的位置
                option = {//设置图形信息：图形展示的样式&图形的数据
                        title : {//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
                                text : '未来一周气温变化',
                                subtext : '纯属虚构'
                        },
                        tooltip : {//提示框，鼠标悬浮交互时的信息提示
                                trigger : 'axis'
                        },
                        legend : {//图例，每个图表最多仅有一个图例
                                data : [ '最高气温', '最低气温' ]
                        },
                        toolbox : {//工具箱
                                show : true, //是否展示
                                feature : {
                                        mark : {//辅助线开关 总共三个开关
                                                show : true
                                        },
                                        dataView : {//框选区域缩放开关 两个开关
                                                show : true,
                                                readOnly : false
                                        },
                                        magicType : {//数据视图开关(可以进行图形切换)  readOnly为是否只读开关 一个开关
                                                show : true,
                                                type : [ 'line', 'bar' ]
                                        },
                                        restore : {//表的还原
                                                show : true
                                        },
                                        saveAsImage : {//保存为图片    注意：IE8不支持
                                                show : true
                                        }
                                }
                        },
                        xAxis : [ {//横坐标（x）轴展示
                                type : 'category',
                                boundaryGap : false,//类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头
                                data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
                        } ],
                        yAxis : [ {//纵坐标（y）轴展示
                                type : 'value',
                                axisLabel : {//展示的label格式
                                        formatter : '{value} °C'
                                }
                        } ],
                        series : [ {//驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效，请注意适用类型
                                name : '最高气温',
                                type : 'line',
                                data : [ 11, 11, 15, 13, 12, 13, 10 ],
                                markPoint : {//数据标注内容
                                        data : [ {
                                                type : 'max',
                                                name : '最大值'
                                        }, {
                                                type : 'min',
                                                name : '最小值'
                                        } ]
                                },
                                markLine : {//数据标线内容
                                        data : [ {
                                                type : 'average',
                                                name : '平均值'
                                        } ]
                                }
                        }, {
                                name : '最低气温',
                                type : 'line',
                                data : [ 1, -2, 2, 5, 3, 2, 0 ],
                                markPoint : {
                                        data : [ {
                                                type : 'min',
                                                name : '周最低',
                                        }, {
                                                type : 'max',
                                                name : '周最高',
                                        } ]
                                },
                                markLine : {
                                        data : [ {
                                                type : 'average',
                                                name : '平均值'
                                        } ]
                                }
                        } ]
                };

                myChart.setOption(option);//把生成的图形写到页面
        });

       四、测试，把项目发布到应用服务器tomcat，访问 http://localhost:8080/echart/echartHtml/line_bar.html

        

       测试结果成功，页面图形根据数据正常展示！（本例中数据为静态数据，实际开发中可替换为从数据库获取的静态数据）
       总结：以上就是echarts的开发流程，别的图形的开发流程也和上面流程一样，具体代码可以参考第三步的代码，里面注解非常详细。散点图、饼图、K线图、漏斗图几个图形的代码可在项目中自行查看，注解也十分详细。

示例代码：（因项目太大，无法上传，故分享百度云盘连接）
       链接：https://pan.baidu.com/s/11tfwyqDVz1jD3YoZYqvP-A 密码：pleg