多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.动态生成下拉框的两种方 ...
随机推荐
- 解决autowaired注入时机问题
package com.haiyisoft.loveLifeWeb.config; import javax.annotation.PostConstruct; import org.springfr ...
- 搭建Java服务器，并且实现远程安全访问linux系统
1.通过ssh实现安全远程访问linux系统 ssh :secure shell 加密: 1. 对称加密 (加密密钥与解密密钥相同) des ...
- Numpy中matrix()和array()的区别
matrix() 和 array() 的区别,主要从以下方面说起: 1. 矩阵生成方式不同 import numpy as np a1 = np.array([[1, 2], [3, 4]]) b1 ...
- SQLSERVER大批量数据快速导入Redis
目的 把单表近5千万的某单个字段导入到Redis,作为一个list存储. 方案一: 使用sqlcmd工具(sqlserver自带),直接生成命令在Redis-cli中执行. 方案一. 使用sqlcmd ...
- Monkeyrunner 使用说明
monkeyrunner为android系统新公开的一个测试工具.有助于开发人员通过脚本部署较大规模的自动化测试. Monkeyrunner 本文档中包含 一个简单的monkeyrunne ...
- XML字符串和 java对象项目转换
这是之前写,仅供参考(如果缺少jar包可以私信我,CSDN现在下载的东西太费了,动不动就要积分,开源精神所剩无几了,也没办法都需要吃饭,可以理解) import javax.xml.bind.JAXB ...
- MySQL 5.7 中文全文检索
MySQL 5.7 中文全文检索 在 MySQL 5.7.6 之前,全文索引只支持英文全文索引,不支持中文全文索引,需要利用分词器把中文段落预处理拆分成单词,然后存入数据库.从 MySQL 5.7.6 ...
- paramiko实现登录主机
Paramiko模块使用 实现目的:192.168.0.61通过Paramiko模块登录192.168.0.63 一.下载安装 由于 paramiko 模块内部依赖pycrypto,所以先下载安装py ...
- hibernate之inverse=true相关配置讲解
首先inverse=”true”是在双向关联里面使用单向关联没有这个配置 inverse – 标记由哪一方来维护关联关系(双向关联中会用到) inverse默认值为false 如果inverse设 ...
- java：LeakFilling (Linux)
1.Nosql 列数据库,没有update,非关系型数据库: 为了解决高并发.高可扩展.高可用.大数据存储问题而产生的数据库解决方案,就是NoSql数据库. NoSQL,泛指非关系型的数据库,NoS ...