最近项目涉及到画图表，前后试用了一下highcharts与echarts。highcharts文档详细易懂，上手快捷。highcharts依赖于jQuery库；当结合基于jQuery的zepto使用也可以，例子如下：
<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));
暂且记录问题。。。。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
