echarts在一个折线/柱状图浮窗显示多条数据
解决问题就在data里面,首先 data里面是可以json数组形式,如官方API上的 name:”“, value:”“,等 value是echart识别折线图的key值。
1.来看数据格式
data:[
{
value:"",
name:"张三",
price:"100.00",
number:""
},
{
value:"",
name:"张三",
price:"100.00",
number:""
}
]
2.tooltip下的formatter函数里面
//提示文字
formatter:function(params){
var tipText="";
params.forEach(function(item,index){
console.log(item);
tipText+=item.data.name+item.data.price+item.data.number ;
});
return tipText;
}
3.完整代码
var myChart = echarts.init(document.getElementById('flashData'));
myChart.clear();
option = {
title: {
text: '5采购商品数量趋势',//折线图的主标题
left: '3%',
textStyle:{ //折线图的标题文字样式
fontSize:,
color:"#333",
fontWeight:''
}
},
tooltip: {
trigger: 'axis',
//提示文字
formatter:function(params){
var tipText="";
params.forEach(function(item,index){
console.log(item);
tipText+=item.data.name+item.data.price+item.data.number ;
});
return tipText;
}
},
//图例组件:标题
legend: {
show:true,
top: '',
left:'center',
textStyle:{
//color:["#FE9548"],// 图例颜色
},
itemWidth: , //图例宽度
itemHeight: , //图例高度度
data: [{
name:'参加活动商品数', //图例名称
icon:'rect' //图例样式
}],
},
xAxis: {
type : 'category',
axisLabel:{
show: true,
interval:,//横轴间距
rotate: ,//横轴标题旋转角度
},
data: chartData.dataKey
},
yAxis: {
type : 'value',
splitLine :{ //网格线
lineStyle:{
//设置网格线类型 dotted:虚线 solid:实线
type:'dashed'
},
show:true //隐藏或显示
}
},
grid: {
left: '3%', //网格距离左侧边距
right: '0%', //网格距离右侧边距
bottom: '10%', //网格距离右侧边距
containLabel: true
},
series: [
{
name: '参加活动商品数',
type: 'line',
smooth: true, //是否以弧线展示折线
itemStyle : {
normal : {
color:'#FE9548' //折线折点颜色
label: {
show: true, //自动显示数据
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#FE9548',
fontSize:
}
},
lineStyle:{
width: //折线宽度
}
}
},
data:[{
value:"",
name:"张三",
price:"100.00",
number:""
},
{
value:"",
name:"张三",
price:"100.00",
number:""
}]
}
]
};
myChart.setOption(option);
//图标大小跟随页面大小自动调整
$(window).resize(function() {
myChart.resize();
});
echarts在一个折线/柱状图浮窗显示多条数据的更多相关文章
- SQL 去重 显示第一条数据 显示一条数据
需求描述:根据某一个字段或几个字段去重来显示任一条数据,第一条或最后一条. 数据样式如下图: 尝试解决: --count(*)方法(只把条数为1条的显示出来了,超过1条全部过滤了) select * ...
- jqgrid 加载时第一页面只显示多少条数据
function initGrid() { localGrid = jQuery("#tbList"); localGrid.jqGrid({ data: localData, d ...
- Oracle SQL Developer在进行查询的时候只显示50条数据
在查询结果大于50条的时候,软件默认会只显示50条,向下拉会继续显示. 想要显示所有结果的话,光标放在结果集:ctrl+End或者是ctrl+PgDn都可以.
- layui问题之渲染数据表格时,只显示10条数据
通过ajax请求的数据,console.log()有30条数据,实际上只显示10条, 原因是没有设置limit table.render({ elem: '#report-collection' , ...
- SQL SERVER 实现相同记录为空显示(多列去除重复值,相同的只显示一条数据)
sql server语句查询中碰到结果集有重复数据,需要把这个重复数据汇总成一条显示.其余则正常显示. 使用SQL内置函数 ROW_NUMBER() 加 PARTITION 完成 ROW_NUMBER ...
- Android 自定义Adapter 但listview 只显示第一条数据
<ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content ...
- JS实现数组每次只显示5条数据
var array = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; //循环样式结构function fun(arr,index){ var str = &qu ...
- FastReport动态绑定只显示一条数据。
产生这个问题的原因是因为需要把Band绑定DataSource.有两种方法 (1)DataBand data = report1.Report.FindObject("Data1" ...
- Repeater用ul li,一行显示多条数据
原文发布时间为:2009-08-26 -- 来源于本人的百度文章 [由搬家工具导入] .rep { width:680px; float:left; l ...
随机推荐
- C#设置Excel行高、列宽
设置固定值 worksheet.Columns[1].ColumnWidth = 15; 设置自动换行 worksheet.Columns.WrapText = true; 设置自动行高.列宽 xlA ...
- SDUT-3334_数据结构实验之栈与队列七:出栈序列判定
数据结构实验之栈与队列七:出栈序列判定 Time Limit: 30 ms Memory Limit: 1000 KiB Problem Description 给一个初始的入栈序列,其次序即为元素的 ...
- ImportError: No module named libqt_gui_cpp_shiboken
在使用 rosrun rqt_publisher rqt_publisher 调用ROS图形化界面的过程中出现: 而且在使用图像化界面添加/cmd_vel时,无法添加,命令窗口显示“段错误”. 在网上 ...
- HZOJ 寿司
这题也是挺神仙的,现在O(n)的解法还没打出来,只是用O(nlogn)卡过去了(理论上可以过),sdfz某大佬用三分拿到了65分…… 考试连暴力都没打出来…… n2暴力T40: 首先将环拆成链,我们可 ...
- poj 3169 Layout (差分约束)
3169 -- Layout 继续差分约束. 这题要判起点终点是否连通,并且要判负环,所以要用到spfa. 对于ML的边,要求两者之间距离要小于给定值,于是构建(a)->(b)=c的边.同理,对 ...
- TP-admin即基于ThinkPHP5拿来即用高性能后台管理系统
TP-Admin即基于ThinkPHP5的web后台管理系统(总结一套自己的后台管理系统,方便自己后续的项目开发.) 主要特性:自适应手机端.支持国际化.吸取其他CMF框架优点.多站点部署.日志记录. ...
- 【C++竞赛 B】yyy的回文数组
时间限制:1s 内存限制:32MB 问题描述 回文串是一个正读和反读都一样的字符串,比如level或者noon就是回文串.回文数组也是如此,比如[100,200,100]或者[178,256,256, ...
- 全面解读Python Web开发框架Django,利用Django构建web应用及其部署
全面解读Python Web开发框架Django Django是一个开源的Web应用框架,由Python写成.采用MVC的软件设计模式,主要目标是使得开发复杂的.数据库驱动的网站变得简单.Django ...
- 什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及 使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局,无论用户 ...
- 判断当前所使用python的版本和来源
import sys print(sys.prefix) print(sys.executable) 怎样判断当前py文件在什么版本的python环境下运行 import sys print(sys. ...