放上json文件：
{ "2017年3月": { "outKou": "5525.86", "inKou": "420833.61", "outLooper": null, "inLooper": null }, "2017年4月": { "outKou": "6508.79", "inKou": "252569.23", "outLooper": null, "inLooper": null }, "2017年5月": { "outKou": "4649.94", "inKou": "139571.47", "outLooper": "-28.56", "inLooper": "-44.74" }, "2017年6月": { "outKou": "3363.42", "inKou": "73648.86", "outLooper": "-27.67", "inLooper": "-47.23" }, "2017年7月": { "outKou": "2978.7", "inKou": "284503.52", "outLooper": "-11.44", "inLooper": "286.3" }, "2017年8月": { "outKou": "7093.42", "inKou": "287138.07", "outLooper": "138.14", "inLooper": "0.93" }, "2017年9月": { "outKou": "4675.65", "inKou": "275385.15", "outLooper": "-34.08", "inLooper": "-4.09" } }
数据格式就是这样的，先放上效果图再放上代码：
（js插件就不放了，找往期的可以找到，看日期找最新的图表实战就可以了）
<!-- 环比 --> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/getParam.js" type="text/javascript" charset="utf-8"></script> <script src="js/dark.js" type="text/javascript" charset="utf-8"></script> <script src="js/macarons.js" type="text/javascript" charset="utf-8"></script> <script src="js/wonderland.js" type="text/javascript" charset="utf-8"></script> <script src="js/purple-passion.js" type="text/javascript" charset="utf-8"></script> <script src="js/chalk.js" type="text/javascript" charset="utf-8"></script> <title></title> </head> <body> <div> <select id="sel" > <option value="macarons">macarons</option> <option value="dark">dark</option> <option value="wonderland">wonderland</option> <option value="chalk">chalk</option> <option value="purple-passion">purple-passion</option> </select> <select id="inout"> <option value ="outKou">出口</option> <option value ="inKou">进口</option> </select> </div> <div id="main" style=" 100%; height: 600px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById("main"),"chalk"); var option=null; var date=[]; var inKou=[]; var outKou=[]; var outLooper=[]; var inLooper=[]; function start(){ $.ajax({ dataType:"json", url:"", success:function(data){ for(var key in data){ date.push(key) } // console.log(date) for(var i=0;i<date.length;i++){ outKou.push(data[date[i]].outKou) inKou.push(data[date[i]].inKou) outLooper.push(data[date[i]].outLooper) inLooper.push(data[date[i]].inLooper) } var inKou1 = ChangeCommasOne(inKou); var outKou1 = ChangeCommasOne(outKou); var outLooper1 = ChangeCommasOne(outLooper); var inLooper1 = ChangeCommasOne(inLooper); option={ title:{ text:"进出口量以及环比" }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, toolbox: { feature: { dataView: {show: true, readOnly: false}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { show:false }, xAxis: { type: 'category', data: date }, yAxis: [ { type: 'value', name: '环比', position: 'right', axisLabel: { formatter: '{value} %' } }, { type: 'value', name: '产量', axisLabel: { formatter: '{value} 万吨' } }, ], series: [ { name:'进出口量', type:'bar', yAxisIndex: 1, data:outKou }, { name:'进口环比', type:'line', data:outLooper }, ] } myChart.setOption(option) $("#inout").change(function(){ date=date; var inoutval=$("#inout").val(); // myChart.dispose(); if(inoutval == "inKou"){ console.log(1) myChart.setOption({ series: [ { name:'进出口量', type:'bar', yAxisIndex: 1, data:inKou }, { name:'进口环比', type:'line', data:inLooper }, ] }) }else if(inoutval == "outKou"){ myChart.setOption(option) } }) window.addEventListener("resize", function() { myChart.resize(); }); } }) $('#sel').change(function() { myChart.dispose(); let Theme = $(this).val(); myChart = echarts.init(document.getElementById('main'), Theme); myChart.setOption(option); }); } start(); </script> </body> </html>
里面的url可以自己把上面的json数据放到一个json文件里面，url进行引入同样的效果
放上效果图：
