看到一个H5的图表， 忍不住想自己做一下。
刚开始的时候用了iChart.js这个插件， 后来发现这个插件并不支持H5， 哭~
后来网上找了百度的这个Echarts插件， 真的觉得挺不错的， 以后做图表的话就用它了！
1. https://codeload.github.com/ecomfe/echarts/zip/master 在这里下载整个echarts包；
2. 将包中的 esl.js 和 echarts.js 放在js文件夹下， 然后就开始编写代码啦；
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts Demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<div>
<div id="main" style="height:400px"></div>
</div>
</body>
<script>
// 路径配置
require.config({
paths: {
'echarts': 'js/echarts',
'echarts/chart/bar': 'js/echarts',
'echarts/chart/line': 'js/echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line'
],
function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
option = {
title: {
text: '环球集团公司（合并）',
subtext: '2012年07月',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
dataView: {
show: false,
readOnly: false
},
magicType: {
show: false,
type: ['line', 'bar']
},
restore: {
show: false
},
saveAsImage: {
show: false
}
}
},
legend: {
orient: 'horizontal',
y: 'bottom',
data: ['销售收入', '利润', '利润率']
},
xAxis: [{
type: 'category',
data: ['2012年05月', '2012年06月', '2012年07月']
}],
yAxis: [{
type: 'value',
name: '',
min: 0,
max: 1900,
interval: 380,
axisLabel: {
formatter: '{value}'
}
}, {
type: 'value',
name: '单位：万元',
min: 0,
max: 50,
interval: 10,
axisLabel: {
formatter: '{value} %'
}
}],
series: [{
name: '销售收入',
type: 'bar',
data: [945, 1445, 1845]
}, {
name: '利润',
type: 'bar',
data: [245, 645, 791]
}, {
name: '利润率',
type: 'line',
yAxisIndex: 1,
data: [26, 45, 43]
}]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</html>出来的效果233
