1. <script src="
2.<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(//通過動態加載使用echarts
[
'echarts',
'echarts/chart/bar', // 使用柱狀圖就加載bar模塊，按需加載
'echarts/chart/line', //折線圖
// 'echarts/chart/scatter',//散點圖
// 'echarts/chart/k', //k線圖
'echarts/chart/pie', //餅狀圖
// 'echarts/chart/radar', //雷達圖
// 'echarts/chart/force', //力導和絃圖
// 'echarts/chart/chord', //和鉉圖
// 'echarts/chart/map', //地圖
'echarts/chart/gauge', //儀表盤
'echarts/chart/funnel', //漏斗圖
// 'echarts/chart/eventRiver'//事件河流圖
],
function (ec) {
//=================================柱狀圖===============================
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
// 爲echarts對象加載數據 ,數據來源eahartView.js
myChart.setOption(optionCharts);
});
var optionCharts = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高','最低']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
dataZoom : {
show : true,
realtime : true,
start : 20,
end : 80
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push('2013-03-' + i);
}
return list;
}()
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'最高',
type:'line',
data:function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random()* 30));
}
return list;
}()
},
{
name:'最低',
type:'line',
data:function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random()* 10));
}
return list;
}()
}
]
};
</script><div id="line" style="height:400px"></div>