多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.动态生成下拉框的两种方 ...
随机推荐
- Workflow-产品：泛微工作流引擎
ylbtech-Workflow-产品:泛微工作流引擎 1.返回顶部 1. 工作流引擎平台技术架构 TECHNOLOGY FRAMEWORK 高度协同系统各应用模块 泛微工作流引擎平台是整个协同办公平 ...
- js 中文字符串转base64
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 堆的ptmalloc机制
ptmalloc下堆的分配和回收 ptmalloc内存分配 1) 获取分配区的锁,为了防止多个线程同时访问同一个分配区,在进行分配之前需要取得分配区域的锁.线程先查看线程私有实例中是否已经存在一个分配 ...
- MongoDB数据节点基础操作
1.查看集群中各节点的状态: rs0:PRIMARY> rs.status() 2.查看集群中各节点配置情况: rs0:PRIMARY> rs.conf() 3.主节点降级为从节点: rs ...
- javascript中 if条件语句中的判断条件类型总结
在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢? 例如如何几行,只是少了一个括号,真假就完全不同,到底表示什么含义呢 var obj={}; obj.Fu ...
- spring 给容器中注册组件的几种方式
1.@Bean 导入第三方的类或包的组件 2.包扫描+组件的标注注解(@ComponentScan: @Controller,@service,@Reponsitory,@Componet), 自己写 ...
- 白盒测试笔记之:Junit 单元测试以及测试覆盖率
单元测试: 单元测试是从代码层面验证代码的正确性. 一般考虑接口中的数据结构是否正确,变量的临界条件,如空字符串,空集合等. Junit入门 参考: Junit 入门教程: https://ww ...
- NXP-PN511-antenna-design-quide
NXP-PN511-antenna-design-quide 文库有下载 C1 C2
- 通过java 来实现对多个文件的内容合并到一个文件中
现在有多个txt文本文件,需要把这么多个文件的内容都放到一个文件中去 以下是实现代码 package com.SBgong.test; import java.io.*; public class F ...
- 【转帖】网卡多队列技术与RSS功能介绍
网卡多队列技术与RSS功能介绍 2017年02月08日 15:44:37 Murphy_0806 阅读数 10665 标签: rss网卡dpdk 更多 个人分类: DPDK https://blog. ...