首页 > 代码库 > echarts+json笔记
echarts+json笔记
echart_test.html
<!DOCTYPE html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://www.mamicode.com/demo.js"></script> <title>ECharts</title> <script src="http://www.mamicode.com/echarts.common.min.js"></script> <script type="text/javascript"> </script> </head> <body onl oad="echarts_test(‘main‘, lolo_spec, lo_spec, hi_spec, hihi_spec, meas_spec, freq_spec);"> <input type="button" id="echarts_01" value="http://www.mamicode.com/echarts_01" onclick="echarts_test(‘main‘, lolo_spec, lo_spec, hi_spec, hihi_spec, meas_spec, freq_spec);"> <div id="main" style="height:400px;width:1000px"></div> <script type="text/javascript"> var json_var =‘{"json_var_01":[{index:2, freq:200, lo:120},{index:1, freq:100, lo:150}]}‘; var json_data = http://www.mamicode.com/eval("("+json_var+")"); console.log(json_data); function down(x, y) { return (x.freq > y.freq) ? 1 : -1 } json_data.json_var_01.sort(down); console.log(json_data); var lolo_spec = [100, 150, 100, 200, 100, 50, 400, 200, 500, 200]; var lo_spec = [200, 220, 200, 300, 300, 90, 500, 400, 700, 300]; var hi_spec = [500, 300, 400, 400, 550, 150, 600, 500, 880, 400]; var hihi_spec = [600, 400, 500, 500, 700, 200, 1000, 700, 1000, 500]; var meas_spec = [241, 260, 280, 400, 500, 100, 930, 560, 750, 350]; var freq_spec = [150, 200, 300, 400, 500, 600, 700, 800, 900, 1000]; </script> <dir id="branch" style="height:400px;width:1000px"></dir> </body>
demo.js
function demo_f01() { alert("demo_f01"); } function echarts_test (id, lolo_spec, lo_spec, hi_spec, hihi_spec, meas_spec, freq_spec) { // 基于准备好的dom,初始化echarts图表 var myChart = echarts.init(document.getElementById(id)); var option = { title:{ text:‘title_name‘, show:true, }, tooltip: { trigger:‘axis‘, axisPointer: { type: ‘line‘ }, show: true, }, legend: { data:[‘lolo‘,‘lo‘,‘hi‘,‘hihi‘,‘meas‘] }, xAxis : [ { type : ‘category‘, splitLine: { show: false, }, data : freq_spec, } ], yAxis : [ { type : ‘value‘, splitLine: { show: false, } } ], series : [ { name:"hihi", type:"line", smooth: false, data: hihi_spec, areaStyle: { normal: { opacity:0.5, color:‘#FF0000‘, } } }, { name:"hi", type:"line", smooth: false, data: hi_spec, areaStyle: { normal: { opacity:1, color:‘#FFFFFF‘, } } }, { name:"meas", type:"line", smooth: false, data: meas_spec, lineStyle: { normal: { opacity:1, color:‘#00BB00‘, width:3, } } }, { name:"lo", type:"line", smooth: false, data: lo_spec, areaStyle: { normal: { opacity:0.5, color:‘#FFD306‘, } } }, { name:"lolo", type:"line", smooth: false, data: lolo_spec, areaStyle: { normal: { opacity:1, color:‘#FFFFFF‘, } } }, ], dataZoom: [ { type: ‘slider‘, xAxisIndex: 0, start: 0, end: 100 }, { type: ‘inside‘, xAxisIndex: 0, start: 0, end: 100 }, ], toolbox: { feature: { restore:{}, dataView: { show:true, readOnly:true, lang:["Spectrum Data", "close"] }, saveAsImage: { show:true, excludeComponents :[‘toolbox‘], pixelRatio: 2, } } }, }; //myChart.showLoading(); // 为echarts对象加载数据 myChart.hideLoading(); myChart.setOption(option); }
echarts+json笔记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。