放上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="width: 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>

html

里面的url可以自己把上面的json数据放到一个json文件里面，url进行引入同样的效果

放上效果图：

多Y轴，下拉框渲染，相同类型不同数据的更多相关文章

  1. layui下拉框渲染问题，以及回显问题

    最近实习公司给的新人练手项目用的layui,layui之前自己也接触过但是也就是用了用table组件,没有用过layer弹层这些东西,所以就了解了一下. 首先遇到的一个问题就是下拉框没有样式,然后加样 ...

  2. Select下拉框使用ajax异步绑定数据

    <!--前端样式--> <style> #searchs { width: 200px; position: absolute; border-top: none; margi ...

  3. element select下拉框绑定number类型

    vue 开发中element-ui库的switch开关绑定number类型数据不成功问题 解决方法

  4. Ext 下拉框联动第一次显示不正常的问题

    做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...

  5. ops-web运维平台-create.jsp-mootools下拉框-复选框

    create.jsp页面的,body部分 <body onload="Page.init('${pageError}','${pageMessage}',${isSubmit},tru ...

  6. ExtJs 下拉单联动，次级下拉框查询模式

    queryMode : 'local' 如果下拉框的值是本地数据,最好设定queryMode为local,这样可以提高用户的响应速度

  7. 使用jquery Ajax异步刷新 下拉框

    一个下拉框 <label>产品类型:</label> <select id="protype" name="protype" on ...

  8. Android Spinner 下拉框简单应用 详细注解

    目录 Android Spinner 代码部分 Spinner代码介绍 核心代码 说在最后 @ Android Spinner Spinner 提供下拉列表式的输入方式,该方法可以有效节省手机屏幕上的 ...

  9. jQuery动态生成<select>下拉框

    前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...

随机推荐

  1. js调用后台接口进行下载

    js调用后台接口一定不能用ajax location.href=$$pageContextPath +'downfile/down.do?filname='+row.fileUrl;

  2. 【转载】如何在 Kaggle 首战中进入前 10%

    本文转载自如何在 Kaggle 首战中进入前 10% 转载仅出于个人学习收藏,侵删 Introduction 本文采用署名 - 非商业性使用 - 禁止演绎 3.0 中国大陆许可协议进行许可.著作权由章 ...

  3. [转] 运维知识体系 -v3.1 作者：赵舜东（赵班长）转载请注明来自于-新运维社区：https://www.unixhot.com

    [From]https://www.unixhot.com/page/ops [运维知识体系]-v3.1 作者:赵舜东(赵班长) (转载请注明来自于-新运维社区:https://www.unixhot ...

  4. Mac下的Pycharm教程

    除非你是用记事本写代码,或者用vim写代码的大牛,那么推荐使用PyCharm编写Python代码. PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效 ...

  5. Git-T

    或在命令行上创建一个新的存储库echo“#gittest”>> README.md git init git add README.md git commit -m“first commi ...

  6. 【DSP开发】TMS320C66x DSP SPI Nor Flash的程序烧写

    经过一段时间的研究终于把TMS320C6657单核和双核的SPI Nor Flash的程序烧写调通了.工具都是前辈的工作,有需要的可以留下邮箱,我有空可以发. 原理参考钱丰的<TI c66x 系 ...

  7. DDOS常见攻击类型和防御措施

    DDOS 攻击类型: SYN Flood 攻击 ACK Flood 攻击 UDP Flood 攻击 ICMP Flood 攻击 Connection Flood 攻击 HTTP Get 攻击 UDP ...

  8. GS7 安装使用Oracle19c 客户端的说明

    1. 最近Oracle放出了 windows版本的oracle19c的安装文件(具体时间不详, 自己知道的时候比较晚了) 2. 发现文件其实比较多如图示: 3. 经过自己测试实现发现 不能使用  如下 ...

  9. 中国高考志愿填报与职业趋势分析 - ActiveReports 大数据分析报告

    中国高考志愿填报与职业趋势分析 1977年中国高考制度恢复,重新开启了人才成长之门.40多年来,高考累积录取人数增长了27倍, 2.28亿人报名,9900万名高素质人才先后通过了中国高等教育的培养,高 ...

  10. Hive怎么使用远程连接

    HIVE的连接模式== 本地连接模式 直接启动hive命令 HIVE的远程连接 这里要启动HIVE的服务 thirft进行编写 hiveserver2 —- > 前台启动 后台启动 前台启动 h ...