多Y轴，下拉框渲染，相同类型不同数据
放上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轴，下拉框渲染，相同类型不同数据的更多相关文章
- layui下拉框渲染问题，以及回显问题
最近实习公司给的新人练手项目用的layui,layui之前自己也接触过但是也就是用了用table组件,没有用过layer弹层这些东西,所以就了解了一下. 首先遇到的一个问题就是下拉框没有样式,然后加样 ...
- Select下拉框使用ajax异步绑定数据
<!--前端样式--> <style> #searchs { width: 200px; position: absolute; border-top: none; margi ...
- element select下拉框绑定number类型
vue 开发中element-ui库的switch开关绑定number类型数据不成功问题 解决方法
- Ext 下拉框联动第一次显示不正常的问题
做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...
- ops-web运维平台-create.jsp-mootools下拉框-复选框
create.jsp页面的,body部分 <body onload="Page.init('${pageError}','${pageMessage}',${isSubmit},tru ...
- ExtJs 下拉单联动，次级下拉框查询模式
queryMode : 'local' 如果下拉框的值是本地数据,最好设定queryMode为local,这样可以提高用户的响应速度
- 使用jquery Ajax异步刷新 下拉框
一个下拉框 <label>产品类型:</label> <select id="protype" name="protype" on ...
- Android Spinner 下拉框简单应用 详细注解
目录 Android Spinner 代码部分 Spinner代码介绍 核心代码 说在最后 @ Android Spinner Spinner 提供下拉列表式的输入方式,该方法可以有效节省手机屏幕上的 ...
- jQuery动态生成<select>下拉框
前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...
随机推荐
- leetcode-hard-array- 227. Basic Calculator II
mycode 29.58% class Solution(object): def calculate(self, s): """ :type s: str :rtyp ...
- Python学习笔记—函数
函数 我们知道圆的面积计算公式为: S = πr2 当我们知道半径r的值时,就可以根据公式计算出面积.假设我们需要计算3个不同大小的圆的面积: r1 = 12.34 r2 = 9.08 r3 = 73 ...
- linux调用本地shell脚本
package com.haiyisoft.cAssistant.adapter.rest; import java.io.BufferedReader;import java.io.File;imp ...
- mongdb group聚合操作
1.数据准备 [{"goods_id":1,"cat_id":4,"goods_name":"KD876"," ...
- oracle 查看表空间使用比
select b.file_name 物理文件名, b.tablespace_name 表空间, b.bytes / / 大小M, (b.bytes - sum(nvl(a.bytes, ))) / ...
- npm install --save 和 npm install -d的区别
npm install -d 就是npm install --save-dev npm insatll -s 就是npm install --save 以前一直在纠结一个npm安装的包依赖管理的问题. ...
- Session中的方法概述
一.操作实体对象 delete()把持久化或游离转为删除状态 save()把临时状态变为持久化状态(交给Sessioin管理) saveOrUpdate()把临时或游离状态转为持久化状态 update ...
- Redis 分库
Redis 可以分库,相当于 MySQL 中的 database.控制数据库总数在 redis配置文件中设置,默认是 16 个.数据库名称是整数索引标识,而不是由一个数据库名称字符串. 选择数据库用 ...
- Java 多线程爬虫及分布式爬虫架构
这是 Java 爬虫系列博文的第五篇,在上一篇 Java 爬虫服务器被屏蔽,不要慌,咱们换一台服务器 中,我们简单的聊反爬虫策略和反反爬虫方法,主要针对的是 IP 被封及其对应办法.前面几篇文章我们把 ...
- caoz的梦呓：信息安全常识科普
猫宁!!! 参考链接:https://mp.weixin.qq.com/s/cl4TfOodBGSjUuEU8e0rGA 对方公众号:caoz的梦呓 前天在新加坡IC咖啡做了一场关于信息安全的常识普及 ...