多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.动态生成下拉框的两种方 ...
随机推荐
- python 面对对象 类(继承, 多态)
继承,继承其它实例化样本的属性和方法,需要在声明里重新定义和使用 class School(object): def __init__(self, name, addr): self.name = n ...
- [占位符 ]
在做项目的时候,数据库中的数据会存在空值;这样,我们需要在前台给它加以判断, 如果我们不加以判断也是可行的,我们需要添加一个空白占位符 空白占位符 是个不错的选择,这样我们的页面显示数据的时候就不会 ...
- [SQL Server创建视图时的注意点]
创建视图的查询语句必须要遵守一定的限制 1. 要对某些列取别名,并保证列名的唯一 (具有相同的列名的表,在创建视图的时候,需要使用别名,表名.列名 也是不可以的) 当我们在通过新建视图来创建视图的话, ...
- LC 667. Beautiful Arrangement II
Given two integers n and k, you need to construct a list which contains n different positive integer ...
- 车载导航应用中基于Sketch UI主题实现
1.导读 关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类: 内置主题(应用内自定义style) 外部加载方式(资源apk形式.压缩资源.插件等) 其实,针对不同的主题定制实 ...
- ES5与ES6常用语法教程之 ④展开运算符...在数组和对象中的作用
展开操作符(spread) 展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以 ...
- 手写一个简单到SpirngMVC框架
spring对于java程序员来说,无疑就是吃饭到筷子.在每次编程工作到时候,我们几乎都离不开它,相信无论过去,还是现在或是未来到一段时间,它仍会扮演着重要到角色.自己对spring有一定的自我见解, ...
- 快速排序基本思想，递归写法，python和java编写快速排序
1.基本思想 快速排序有很多种编写方法,递归和分递归,分而治之法属于非递归,比递归简单多了.在这不使用代码演示.下面我们来探讨一下快速排序的递归写法思想吧. 设要排序的数组是A[0]……A[N-1], ...
- 【机器学习】Learning to Rank之Ranking SVM 简介
Learning to Rank之Ranking SVM 简介 排序一直是信息检索的核心问题之一,Learning to Rank(简称LTR)用机器学习的思想来解决排序问题(关于Learning t ...
- 临时更换pip国内源
源 地址 阿里云 http://mirrors.aliyun.com/pypi/simple/ 豆瓣 http://pypi.douban.com/simple/ 清华大学 https://pypi. ...