使用百度echart的图表功能的简单输入示例[附带源代码下载]

本文通过一个例子来说明如何利用百度电子技术实现图表功能。分享给大家参考，如下：

百度有一个开源的图表控件，号称是大数据时代最好的图表控件。刚才，当前项目需要用图表向客户展示数据，所以我们选择了这种三方控制。一般来说，使用这种控件应该不会太难。基本上就是按照json的规则来组装JSON数据。关键是配置以上。如果你刚刚开始，没有很好地理解它，你可能真的需要花一些时间去做。我整理了一个带有详细注释的基本条目示例，因此以这种方式加载相关的js没有问题：

！DOCTYPE html head meta charset=' GBK ' title echart/title/head dy！-为展示准备一个具备大小（宽高)的DOM-div id=' main ' style=' height :400 px '/div！-功能测试- !-电子艺术单文件引入-脚本src='http:/js/echart。js/路径配置要求。config({ path : { echart 3360 })./js ' } })；//使用需要([' echart '，' echart/chart/bar '//使用柱状图就加载酒吧模块，按需加载],函数(欧共体){ //基于准备好的多姆，初始化展示图表var myChart=EC。init(文档。getelementbyid(' main ')；var option={ tooltip : { trigger : ' axis '，axis port : {//坐标轴指示器，坐标轴触发有效键入："阴影"//默认为直线，可选为：' line' | 'shadow' } }，legend: { data:['直接访问， '邮件营销','联盟广告','视频广告','搜索引擎] }，toolbox: { show : false，feature : { mark : { show : true }，dataView : {show: true，readOnly: false}，magicType : { show: true，type 3:[' line '，' bar '，' stack '，' tiled']}，restore : { show: true }，saveAsImage :周一','周二','周三','周四','周五','周六','周日] } ],系列： [ { name: '直接访问，键入： '酒吧'，stack: '总量，ItemStyle : { normal : { label : { show : true，position: 'insideRight'}}}，data:[320，302，301，334，390，330，320] }，{ name: '邮件营销，键入： '酒吧'，stack: '总量，items tyle : { normal : { label : { show : true，position: 'insideRight'}}}，data:[120，132，101，134，90，230，210] }，name: '联盟广告，键入： '酒吧'，stack: '总量，ItemStyle : { normal : { label : { show : true，position: 'insideRight'}}})，data:[220，182，191，234，290，330，310] }，name: '视频广告，键入： '酒吧'，stack: '总量，items tyle : { normal : { label : { show : true，position: 'insideRight'}}}，data:[150，212，201，154，190，330，410] }，name: '搜索引擎，键入： '酒吧'，stack: '总量，ItemStyle : { normal : { label : { show : true，position: 'insideRight'}}}，data:[820，832，901，934，1290，1330，1320]} } } } }； //为展示对象加载数据myChart.setOption(选项);//根据窗口自动缩放窗户。onresize=MyChart。调整大小；//绑定事件测试var ecConfig=require(' echart/config ')；myChart.on(ecConfig .事件。单击，函数（参数){ //需要的参数都可以从这里面获取。警报（参数);}) } );/脚本/正文

整个例子代码下载，包含了百度展示包。

完整实例代码点击此处本站下载。

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript字符与字符串操作技巧总结》 、 《JavaScript数学运算用法总结》 、 《JavaScript中json操作技巧总结》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript遍历算法与技巧总结》

希望本文对JavaScript编程有所帮助。