刚刚接触了百度的echarts,今天使用模仿数据试了一下,下面贴出一个折线图,供大家参考
<div id="main"> <div class="m_line"></div> <div id="main1" style="height:400px;width:1100px;"></div> </div> <div id="footer"> <div class="footer_inner"> <p>© 2015-2016 国际大数据版权所有</p> </div> </div> </div> <!-- ECharts单文件引入 --> <script type="text/javascript"> function HideDiv(){ $("#main1").hide(); } function ShowDiv(){ $("#main1").show(); } $("#mytab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/theme/macarons', 'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载 'echarts/chart/line', 'echarts/chart/pie' ], function (ec,them) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main1'),them); var option = { title : { text: '某写字楼冬日温度过高,气体干燥', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['温度','湿度'] }, toolbox: { show : true, feature : { mark : {show: true},//辅助线开关 dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar','radar','pie']},//类型是否转换?折线和柱形互转 restore : {show: true},//还原 saveAsImage : {show: true}//保存为图片 } }, calculable : true, xAxis : [ { type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'湿度', type:'line', data:[28.0, 24.9, 27.0, 23.2, 25.6, 26.7, 30.6], markPoint : { data : [ {type : 'max', name: '周最高'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'温度', type:'line', data:[22.6, 25.9, 29.0, 26.4, 28.7, 30.7, 27.6], markPoint : { data : [ {name : '周最高', value : 30.7, xAxis: 7, yAxis: 183, symbolSize:18}, {name : '周最低', value :22.6, xAxis: 11, yAxis: 3} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] } } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script>