标签：true type value 图表 联动 var sel data
图表联动
简单介绍：点击图表，定位表格里的对象；鼠标移动到表格里的对象会在图标上进行高亮显示
展示如下：
点击图表，表格显示
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>统计图表</title>
<link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
</head>
<body>
<div style="padding-left: 20px;padding-top: 10px">
<select id="check">
<option value='归口管理单位'>归口管理单位</option>
<option value='所在地域'>所在地域</option>
<option value='机构属性'>机构属性</option>
<option value='技术需求解决方式'>技术需求解决方式</option>
<option value='科技活动类型'>科技活动类型</option>
<option value='学科分类'>学科分类</option>
<option value='需求技术应用行业'>需求技术应用行业</option>
<option value='管理处室'>管理处室</option>
</select>
<select id="lx">
<option value="柱状图">柱状图</option>
<option value="折线图">折线图</option>
<option value="饼状图">饼状图</option>
</select>
</div>
<div id="main" style="width: 600px;height:400px;padding-left: 20px"></div>
<div id="myself" style="padding-left: 10px;padding-top: 10px;padding-bottom: 10px">
</div>
<script type="text/javascript">
$("#lx").change(function () {
var sel = $("#check").val();
var lx=$("#lx").val();
echarts.init(document.getElementById('main')).dispose();//销毁前一个实例
// 基于准备好的dom，初始化echarts实例
echart(sel,lx);
});
$("#check").change(function () {
var sel = $("#check").val();
var lx=$("#lx").val();
$.ajax({
url: "../../echartdoc",
type: "POST",
data: {"sel": sel},
dataType: "JSON",
async: true,
success: function (data) {
var text="<table class='table table-bordered table-hover' id='table'>" +
"<thead>" +
" <tr>" +
" <th>"+sel+"</th>" +
" <th>数量</th>" +
" </tr>" +
" </thead><tbody>";
for(var i=0;i<data.length;i++)
{
text+="<tr>" +
" <td>"+data[i].name+"</td>" +
" <td>"+data[i].num+"</td>" +
" </tr>";
}
text+="</tbody></table>";
$("#myself").html(text);
},
error: function (e) {
alert("出现错误！！");
}
});
echart(sel,lx);
});
function echart(sel,lx) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
if(lx=="柱状图")
{
var option={};
option = {
color: ['#3398DB'],
toolbox:{
show:true,
feature:{
// 数据视图
dataView:{
show:true
},
// 还原
restore:{
show:true
},
// 保存图片
saveAsImage:{
show:true
},
//动态类型切换
magicType:{
type:['line','bar']
}
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} "
},
grid: {
left: '0%',
right: '0%',
bottom: '4%',
top:"10px",
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
}
],
yAxis: [
{
type: 'value',
axisLabel:{
fontSize:"12"
},
axisLine:{
lineStyle:{
type:'solid',
width:2
}
},
//y轴分割线的颜色
splitLine:{
lineStyle:{
}
}
}
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '35%',
data: [],
itemStyle:{
barBorderRadius:5
}
}
]
};
var cname=[];
var value=[];
//配置TOP5前感染国家
$.post(
"../../echartdoc",
{"sel":sel},
function(data){
for(var i=0;i<data.length;i++)
{
cname[i]=data[i].name;
value[i]=parseInt(data[i].num);
}
myChart.setOption({
xAxis:{
//放横坐标的数组
data:cname,
},
series:[{
name:'数量',
//每个横坐标对应的数值
data:value
}]
});
},
"json"
);
myChart.setOption(option);
}
else if(lx=="折线图")
{
var option={};
option={
legend: {
data:['个数']
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} "
},
toolbox:{
show:true,
feature:{
// 数据视图
dataView:{
show:true
},
// 还原
restore:{
show:true
},
// 保存图片
saveAsImage:{
show:true
},
//动态类型切换
magicType:{
type:['line','bar']
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: [{
name: '个数',
type: 'line',
data: []
}]
};
// 2异步加载数据
var cname=[];
var value=[];
//配置TOP5前感染国家
$.post(
"../../echartdoc",
{"sel":sel},
function(data){
for(var i=0;i<data.length;i++)
{
cname[i]=data[i].name;
value[i]=parseInt(data[i].num);
}
myChart.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: cname
},
series: [{
name: '个数',
data: value
}]
});
},
"json"
);
myChart.setOption(option);
}
else
{
var option={};
option = {
title : {
text: '河北省重大需求',
subtext: '征集图表',
x:'center'
},
toolbox:{
show:true,
feature:{
// 数据视图
dataView:{
show:true
},
// 还原
restore:{
show:true
},
// 保存图片
saveAsImage:{
show:true
},
//动态类型切换
magicType:{
type:['line','bar']
}
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var cname=[];
var value=[];
//配置TOP5前感染国家
$.post(
"../../echartdoc",
{"sel":sel},
function(data){
for(var i=0;i<data.length;i++)
{
cname[i]=data[i].name;
value[i]=parseInt(data[i].num);
}
myChart.setOption({ //填入数据
legend: {
data: cname
},
series: [{
data: (function(){
var rs = [];
for(var j=0;j<value.length;j++){
rs.push({
name :cname[j],
value:value[j]
});
}
return rs;
})()
}]
});
},
"json"
);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
myChart.on('click',function (params) {
// 获取table下所有的tr
let trs = $("#table tbody tr");
for (let i = 0;i<trs.length;i++){
// 获取tr下所有的td
let tds = trs.eq(i).find("td");
// 先把之前的标记的success去掉
$("#table tbody tr").eq(i).removeClass('success');
// 如果点击图示的名字和table下的某一个行的第一个td的值一样
if (params.name == tds.eq(0).text()){
//设置success状态
$("#table tbody tr").eq(i).addClass('success');
// 跳转到页面指定的id位置
$("html,body").animate({scrollTop:$("#table tbody tr").eq(i).offset().top},1000);
}
}
});
// 当鼠标落在tr时，显示浮动
$("#table tbody").find("tr").on("mouseenter",function () {
// 获得当前匹配元素的个数
let row = $(this).prevAll().length;
// 获得当前tr下td的名字
let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
// 设置浮动
myChart.dispatchAction({ type: 'highlight',seriesIndex: 0, name:name});//选中高亮
myChart.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//选中高亮
});
// 当鼠标移开tr时候取消浮动
$("#table tbody").find("tr").on("mouseleave",function () {
// 获得当前匹配元素的个数
let row = $(this).prevAll().length;
// 获得当前tr下td的名字
let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
// 设置浮动
myChart.dispatchAction({ type: 'downplay', name:name});//选中高亮
myChart.dispatchAction({ type: 'hideTip',seriesIndex: 0, name:name});//选中高亮
});
}
</script>
</body>
</html>
标签：true,type,value,图表,联动,var,sel,data 来源： https://www.cnblogs.com/xiaofengzai/p/13908064.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。