标签：echart图表
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>
标签：echart图表
原文地址：http://9707789.blog.51cto.com/9697789/1587521
