首页 > 代码库 > echart使用
echart使用
1. <script src="http://www.mamicode.com/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使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。