说明:

  数据没有拉取后台数据,仅仅前端模拟数据,Copy即可有效果。联动后台时,使用异步获取数据即可。鼠标点击,动态展示点击项的数据。有关更多实例,请移步到echarts官网查看。

成果展示:

  

相关代码:

  html中的部分代码

     <div class="row">
<div class="col-sm-3" id="row-item"> </div>
<div class="col-sm-9">
<div id="echarts2" style="width:100%;height:350px;"> </div>
<div id="echarts" style="width:100%;height:350px;"> </div>
</div>
</div>

  js有关代码

<script type="text/javascript">
function choseItem(column,title){ // 柱状图
var column_yData = [];
var column_title = title+'各公司详细数据';
var column_seriesData =[];
// 饼状图
var pie_title = title+'各公司数据占比';
var pie_seriesData =[]; for(var i = 0 ;i<rows.length;i++){
column_yData.push(rows[i].name);
column_seriesData.push(rows[i][column]);
pie_seriesData.push({name:rows[i].name,value:rows[i][column]});
} var option = {
title : {
text: column_title
},
tooltip : {
trigger: 'axis',
show:true
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : column_yData
}
],
series : [
{
type:'bar',
itemStyle:{
normal:{
label:{
show:true,
position: 'right'
}
}
},
data:column_seriesData
}
]
};
ets.setOption(option); var option2 = {
title : {
text: pie_title ,
},
tooltip : {
show:true,
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'数据占比',
type:'pie',
radius : '45%',
center: ['50%', '50%'],
itemStyle:{
normal:{
label:{
show:true,
},
labelLine:{
length:30
}
}
},
data:pie_seriesData
}
]
};
ets2.setOption(option2);
} var totalRows =[
{title:'病例1',totalNum:1234,name:'num1'},
{title:'病例2',totalNum:1234,name:'num2'},
{title:'病例3',totalNum:1234,name:'num3'},
{title:'病例4',totalNum:1234,name:'num4'},
{title:'病例5',totalNum:1234,name:'num5'},
{title:'病例6',totalNum:1234,name:'num6'},
{title:'病例7',totalNum:1234,name:'num7'},
{title:'病例8',totalNum:1234,name:'num8'},
{title:'病例9',totalNum:1234,name:'num9'},
{title:'病例10',totalNum:1234,name:'num10'},
{title:'病例11',totalNum:1234,name:'num11'},
{title:'病例12',totalNum:1234,name:'num12'},
{title:'病例13',totalNum:1234,name:'num13'},
{title:'病例14',totalNum:1234,name:'num14'}
];
var rows =[
{
name:'公司名字有待南昌的健康还是看到回复1',
num1:16,
num2:17,
num3:19,
num4:123,
num5:459,
num6:123,
num7:23,
num8:123,
num9:123,
num10:123,
num11:123,
num12:123,
num13:123,
num14:123
},
{
name:'公司暗红色的咖啡机哈萨克东方红路2',
num1:'28',
num2:'123',
num3:'123',
num4:'123',
num5:'123',
num6:'123',
num7:'123',
num8:'123',
num9:'123',
num10:'123',
num11:'123',
num12:'123',
num13:123,
num14:123
},
{
name:'公司阿斯顿发生地方就会看见爱上对方3',
num1:99,
num2:123,
num3:123,
num4:123,
num5:123,
num6:123,
num7:123,
num8:123,
num9:23,
num10:12,
num11:123,
num12:123,
num13:123,
num14:123
},
{
name:'公司奥斯卡接电话反馈就爱上的花费4',
num1:45,
num2:123,
num3:123,
num4:123,
num5:123,
num6:123,
num7:123,
num8:123,
num9:23,
num10:123,
num11:12,
num12:123,
num13:123,
num14:123
},
{
name:'公司名字有点长有香肠有点长大厦水电费卡仕达5',
num1:300,
num2:123,
num3:123,
num4:123,
num5:123,
num6:123,
num7:123,
num8:123,
num9:23,
num10:12,
num11:123,
num12:123,
num13:123,
num14:123
},
{
name:'公司熟练度空间发过了圣诞节发了个6',
num1:500,
num2:123,
num3:123,
num4:123,
num5:123,
num6:123,
num7:123,
num8:123,
num9:123,
num10:123,
num11:123,
num12:123,
num13:123
},
{
name:'公司奥会计师电话费咖技术的活雷锋7',
num1:900,
num2:123,
num3:123,
num4:123,
num5:123,
num6:123,
num7:123,
num8:123,
num9:23,
num10:123,
num11:123,
num12:123,
num13:123,
num14:123
},
{
name:'公司空间哈卡收到货付款8',
num1:600,
num2:123,
num3:123,
num4:123,
num5:123,
num6:123,
num7:123,
num8:123,
num9:123,
num10:12,
num11:123,
num12:123,
num13:123,
num14:123
}
]; var rowItemHtml = "";
for(var i = 0;i<totalRows.length;i++){
rowItemHtml += "<div class='col-sm-6' style='border:1px solid black;height:100px;' onclick=choseItem('"+totalRows[i].name+"','"+totalRows[i].title+"')>"+totalRows[i].title+":"+totalRows[i].totalNum+"</div>";
}
$("#row-item").html(rowItemHtml);
// 实例化echarts
var ets = echarts.init(document.getElementById("echarts"));
var ets2 = echarts.init(document.getElementById("echarts2"));
// 设置数值
choseItem(totalRows[0].name,totalRows[0].title); </script>

【ECharts】报表联动,动态数据设计的更多相关文章

  1. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  2. Echarts基于动态数据初步使用 及问题 代码记录.

    ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --&g ...

  3. Unity 3D Framework Designing(6)——设计动态数据集合ObservableList

    什么是 『动态数据集合』 ?简而言之,就是当集合添加.删除项目或者重置时,能提供一种通知机制,告诉UI动态更新界面.有经验的程序员脑海里迸出的第一个词就是 ObservableCollection.没 ...

  4. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...

  5. Unity应用架构设计(6)——设计动态数据集合ObservableList

    什么是 『动态数据集合』 ?简而言之,就是当集合添加.删除项目或者重置时,能提供一种通知机制,告诉UI动态更新界面.有经验的程序员脑海里迸出的第一个词就是 ObservableCollection.没 ...

  6. Echarts 学习系列(3)-Echarts动态数据交互

    写在前面 上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件 开发环境:win10 ...

  7. Echarts使用及动态加载图表数据

    Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地 ...

  8. Echarts 展示两条动态数据曲线

    利用Echarts 展示两条动态数据曲线,每1秒刷新一下数据,在echart官网例子基础上修改,修改了仿真数据的生成方式.生成数量,曲线数量,最总效果图如下: 详细代码如下: 遇到的主要问题点, 1, ...

  9. echarts一个页面动态加载两张不同图表数据

    参考 http://www.stepday.com/topic/?877 http://blog.csdn.net/for_china2012/article/details/45167161 // ...

随机推荐

  1. 对用pyinstaller打包的exe程序进行反编译,获得源码

    参考文章: 1.https://www.cnblogs.com/DirWang/p/12018949.html#PyInstallerExtractor 2.https://msd.misuland. ...

  2. 《逆向工程核心原理》——DLL注入与卸载

    利用CreateRemoteThread #include <iostream> #include <tchar.h> #include <Windows.h> # ...

  3. c++ 反汇编 构造函数和析构函数

    构造函数和析构函数出现的时机 局部对象 109: // 局部对象定义调用构造函数 110: 111: CNumber Number; 00C8A37D 8D 4D EC lea ecx,[Number ...

  4. PTA 中序输出叶子结点

    6-8 中序输出叶子结点 (10 分)   本题要求实现一个函数,按照中序遍历的顺序输出给定二叉树的叶结点. 函数接口定义: void InorderPrintLeaves( BiTree T); T ...

  5. 攻防世界 csaw2013reversing2 CSAW CTF 2014

    运行程序 flag显示乱码 IDA打开查看程序逻辑 1 int __cdecl __noreturn main(int argc, const char **argv, const char **en ...

  6. 从新建文件夹开始构建UtopiaEngine(1)

    序言 在苦等了半年多之后,我终于开始了向往已久的实时NPR游戏引擎项目--Utopia Engine,这半年多一直为了构建这个引擎在做很多准备:多线程.动态链接库.脚本引擎.立即渲染GUI--统统吃了 ...

  7. teprunner测试平台Django引入pytest完整源码

    本文开发内容 pytest登场!本文将在Django中引入pytest,原理是先执行tep startproject命令创建pytest项目文件,然后从数据库中拉取代码写入文件,最后调用pytest命 ...

  8. Python基础之:Python中的类

    目录 简介 作用域和命名空间 class 类对象 类的实例 实例对象的属性 方法对象 类变量和实例变量 继承 私有变量 迭代器 生成器 简介 class是面向对象编程的一个非常重要的概念,python ...

  9. [GDKOI2021] 提高组 Day 1 总结

    [ G D K O I 2021 ]    提 高 组    D a y   1    总 结 [GDKOI2021]~~ 提高组~~ Day~1~~ 总结 [GDKOI2021]  提高组  Day ...

  10. [矩阵乘法]斐波那契数列IV

    [ 矩 阵 乘 法 ] 裴 波 拉 契 数 列 I V [矩阵乘法]裴波拉契数列IV [矩阵乘法]裴波拉契数列IV Description 求数列f[n]=f[n-2]+f[n-1]+n+1的第N项, ...