多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.动态生成下拉框的两种方 ...
随机推荐
- 依赖注入框架之butterknife
主页: https://github.com/JakeWharton/butterknife 用途: 主要用来简化各种初始化控件的操作 配置: 1. 在app/build.gradle文件中depen ...
- tensorflow二进制文件读取与tfrecords文件读取
1.知识点 """ TFRecords介绍: TFRecords是Tensorflow设计的一种内置文件格式,是一种二进制文件,它能更好的利用内存, 更方便复制和移动,为 ...
- 动态加载、移除css文件
修改样式有通过修改class属性来更改,也可以通过动态引入外部的css文件来改变对应的样式展示. 这里就介绍动态引入.移除css文件 ///添加平板样式文件 function loadStyles() ...
- SQL学习（一）相关基础知识
RDBMS基础知识 1.数据库是按照数据结构来组织.存储和管理数据的仓库:数据库是一些关联表的集合. 2.数据表是数据的矩阵,在一个数据库中的表看起来像一个简单的电子表格. 3.列:一列包含了相同的数 ...
- go 基础 变量和常量
package main import "fmt" //全局变量,赋值 var( PI float32 = 3.1415 Count ) //全局变量,无值 var( x stri ...
- 工具类 分页工具类PageParamBean
自己编写的分页工具类,根据不同的数据库类型,生成对应的分页sql信息,分享给大家,希望大家共勉,工具类有些地方,大家可能不需要,请根绝自己的需要进行修改使用,核心逻辑都在,如果大家觉得有什么不妥,欢迎 ...
- Eclipse常用快捷方式
Suggestions (Ctrl+1) 建议,比如创建局部变量 File Search (Ctrl+H) 在所有文件中查找关键字 Open Resource (Ctrl+Shift+R) 打开资源 ...
- java读取blob，clob转换为字符串
直接上代码: package com.it.test; import java.io.BufferedReader; import java.io.StringWriter; import java. ...
- Python爬虫学习==>第十一章：分析Ajax请求-抓取今日头条信息
学习目的: 解决AJAX请求的爬虫,网页解析库的学习,MongoDB的简单应用 正式步骤 Step1:流程分析 抓取单页内容:利用requests请求目标站点,得到单个页面的html代码,返回结果: ...
- 小程序请求豆瓣API报403解决方法
微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误.这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止.这里收集以下三种 ...