看到一個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
