echarts与highcharts使用经验
2016-08-19 14:08
113 查看
最近项目涉及到画图表,前后试用了一下highcharts与echarts。highcharts文档详细易懂,上手快捷。highcharts依赖于jQuery库;当结合基于jQuery的zepto使用也可以,例子如下:
但是项目商用使用highcharts需要付费,因此转用免费的echarts。由于文档不好理解(因此要耐心阅读),对模块化编程不熟悉,摸索了好久才了解如何按照项目需求配置。有三种引入方式:
模块化包引入
模块化单文件引入(推荐)
标签式单文件引入
现使用方式一,配置如下:
方式二:demo如下(用ajax异步加载数据时,需要将require放到ajax请求里面):
3.数组的元素为键值对时,动态添加元素方法:
4.如何找元素嵌套(雷达图比较麻烦):
暂且记录问题。。。。
<script src="style/js/zepto.min.js"></script> <script src="style/js/highcharts.js"></script> <script> $(function () { var chart; $(document).ready(function () { var choice = { chart: { renderTo: 'container', type: 'line' }, title: { text: '成绩概况', align: 'left', x: 0 //center }, credits: { enabled: false }, xAxis: { title:{ text:'成绩(/分)' } // categories: ['90+', '80+', '70+', '60+', '60以下'], }, yAxis: { title: { text: '次数(/次)' }, plotLines: [{//y轴分界色 value: 0, width: 1, color: '#808080' }] }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: false } }, tooltip: { valueSuffix: '(次)' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: '次数', // data: [9, 8, 4, 6, 7] }] }; $.ajax({ type:"post", url:"/", data:JSON.stringify(sendData), dataType:"json", contentType:"application/json", success:function (msg) { // }, error:function () { //出错 var msg={"array":[{"score":"90+","times":8},{"score":"80+","times":4},{"score":"70+","times":9},{"score":"60+","times":7}]}; var tempTimes=[]; var tempScore=[]; for(var i=0;i<msg.array.length;i++){ tempScore.push(msg.array[i].score); tempTimes.push(msg.array[i].times); } choice.xAxis.categories=tempScore; choice.series[0].data=tempTimes; chart=new Highcharts.Chart(choice); } }) }) }); </script> </html>
但是项目商用使用highcharts需要付费,因此转用免费的echarts。由于文档不好理解(因此要耐心阅读),对模块化编程不熟悉,摸索了好久才了解如何按照项目需求配置。有三种引入方式:
模块化包引入
模块化单文件引入(推荐)
标签式单文件引入
现使用方式一,配置如下:
/*require.config({ packages: [ { name: 'zrender', location: 'style/js/zrender-2.1.1/src', main: 'zrender' }, { name: 'echarts', location: 'style/js/echarts-2.2.7/src', main: 'echarts' } ] });*/
方式二:demo如下(用ajax异步加载数据时,需要将require放到ajax请求里面):
<script src="style/js/echarts-2.2.7/build/dist/echarts.js"></script> <script> //将请求数据的函数绑定到onchange()函数,两个下拉分别改变都调用同一个函数 function request() { require.config({ paths:{ echarts: 'style/js/echarts-2.2.7/build/dist' /*'echarts/chart/bar' : 'style/js/echarts-2.2.7/build/dist/chart/bar'*/ } }); var selectYear=$("#selectYear option").not(function(){ return !this.selected }).text();//zepto.js与jQuery获取下拉的函数不同 var selectTerm=$("#selectTerm option").not(function(){ return !this.selected }).val();//zepto.js与jQuery获取下拉的函数不同 /*var tempTerm=[]; var tempScore=[]; for (var i = 0; i < 6; i++) { tempTerm[i] = Math.random()*100; tempScore[i] = Math.random()*100; }; option.xAxis.data=tempTerm; option.series[0].data=tempScore;使用随机函数替代ajax请求也能正确显示数据*/ var sendData={ "year":selectYear, "semester":selectTerm, "account":201330661231 }; $.ajax({ type:"post", url:"/", data:JSON.stringify(sendData), dataType:"json", contentType:"application/json", success:function (msg) { // }, error:function () { //当将option与require放在error外面时,只能正确显示第一次的数据和图表 var option = { legend: { data:['成绩'] }, xAxis : { name:'学期', type : 'category', splitNumber:'8', //用不上 /*data : ['大一上','大一下','大二上','大二下','大三上','大三下','大四上','大四下'],*/ axisLabel:{ interval: 0, //解决只显示间隔的坐标 rotate:45, //倾斜度 -90 至 90 默认为0,令字体倾斜避免重叠 textStyle:{ color:'#35A3CB' } } } , yAxis : { name:'成绩(/分)', type : 'value', splitArea : {show : true}, axisLabel:{ textStyle:{ color:'#35A3CB' } } } , series : [ { name:'成绩',//用于tooltip的显示,legend 的图例筛选 type:'line', /* data:[80, 78, 90, 98, 50, 68, 76, 85],*/ itemStyle : { normal: {label : {show: true}}} } ], color:['#35A3CB'] }; var msg={"array":[{"term":"大一上","score":10},{"term":"大一下","score":20},{"term":"大二上","score":60},{"term":"大二下","score":30}, {"term":"大三上","score":90},{"term":"大三下","score":50},{"term":"大四上","score":70},{"term":"大四下","score":80}]}; var tempTerm=[]; var tempScore=[]; for(var i=0;i<msg.array.length;i++){ tempTerm.push(msg.array[i].term); tempScore.push(msg.array[i].score); } option.xAxis.data=tempTerm; option.series[0].data=tempScore; require( [ 'echarts', 'echarts/chart/line' ], function (ec) { var myChart = ec.init(document.getElementById('container')); myChart.setOption(option); } ) } }); } </script> <script> $(document).ready(function () { var str="201330551235";//学号 var distinct=0;//研究生或者本科生 var temp=parseInt(str.substr(0,4)); var length; if(distinct==1) { length = 4; } else if(distinct==0){ length=3; } var selectYear=document.getElementById("selectYear"); for(var i=0;i<length;i++) { var enroll=temp+"-"+(++temp); selectYear.options[i] = new Option(enroll);//动态添加option } request(); }) function change() { request(); } </script> </body>
3.数组的元素为键值对时,动态添加元素方法:
tempSubject.push({'text':msg.array[i].subject});
4.如何找元素嵌套(雷达图比较麻烦):
/*以下两句用于测试option字段变量的嵌套*/ alert(JSON.stringify(option.polar[0].indicator)); alert(JSON.stringify(option.series[0].data[0].value));
暂且记录问题。。。。
相关文章推荐
- 前端之echarts与highcharts的使用
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- 基于MVC+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- 画图工具除了echarts我使用highcharts
- (转)基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- gulp+webpack+angular1的一点小经验(第三部分使用一些angular1的插件ui-bootstrap与highcharts)
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts
- 关于Format函数使用经验,记下来
- 使用自定义用户控件的一些经验
- 使用自定义用户控件的一些经验
- VS.NET使用小经验 (转载)
- 以下一些使用ASP.NET和VISUAL STUDIO.NET2003的经验和技巧
- MRTG使用经验点滴
- ActiveReports使用的一点小经验
- 使用VC开发程序经验谈(一)
- 使用VC开发程序经验谈(二)
- VS.NET使用小经验
- 水晶报表使用经验谈1--建立水晶报表第一步及编译最易出现错误的解决方法及报表转换成pdf文档进行打印方法