图表联动
简单介绍：点击图表，定位表格里的对象；鼠标移动到表格里的对象会在图标上进行高亮显示
展示如下：
点击图表，表格显示
代码：
<!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>
