解决问题就在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在一个折线/柱状图浮窗显示多条数据的更多相关文章

  1. SQL 去重 显示第一条数据 显示一条数据

    需求描述:根据某一个字段或几个字段去重来显示任一条数据,第一条或最后一条. 数据样式如下图: 尝试解决: --count(*)方法(只把条数为1条的显示出来了,超过1条全部过滤了) select * ...

  2. jqgrid 加载时第一页面只显示多少条数据

    function initGrid() { localGrid = jQuery("#tbList"); localGrid.jqGrid({ data: localData, d ...

  3. Oracle SQL Developer在进行查询的时候只显示50条数据

    在查询结果大于50条的时候,软件默认会只显示50条,向下拉会继续显示. 想要显示所有结果的话,光标放在结果集:ctrl+End或者是ctrl+PgDn都可以.

  4. layui问题之渲染数据表格时,只显示10条数据

    通过ajax请求的数据,console.log()有30条数据,实际上只显示10条, 原因是没有设置limit table.render({ elem: '#report-collection' , ...

  5. SQL SERVER 实现相同记录为空显示(多列去除重复值,相同的只显示一条数据)

    sql server语句查询中碰到结果集有重复数据,需要把这个重复数据汇总成一条显示.其余则正常显示. 使用SQL内置函数 ROW_NUMBER() 加 PARTITION 完成 ROW_NUMBER ...

  6. Android 自定义Adapter 但listview 只显示第一条数据

    <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content ...

  7. 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 ...

  8. FastReport动态绑定只显示一条数据。

    产生这个问题的原因是因为需要把Band绑定DataSource.有两种方法 (1)DataBand data = report1.Report.FindObject("Data1" ...

  9. Repeater用ul li,一行显示多条数据

    原文发布时间为:2009-08-26 -- 来源于本人的百度文章 [由搬家工具导入] .rep {         width:680px;         float:left;         l ...

随机推荐

  1. phpstorm 中背景色的调整

  2. 永久设置anaconda的环境变量

    安装anaconda后都显示install seccessful,可是输入anaconda 终端却显示“未找到命令” 原因是没有添加环境变量,按照如下方式将环境变量添加的安装路径下: emport P ...

  3. nginx 301 将不带www域名,重定向到www域名

    // nginx 官方推荐 server { listen 80; server_name example.org; return 301 http://www.example.org$request ...

  4. codeforces 616D

    题意:给你n个数,找出一个最大的区间,满足:不同的数值个数不超过k; //我开始又看错题了. 以为是找出一个最大区间,里面的数的最大值不超过k; 思路:利用一个窗口滑动,左端点表示当前位置,右端点表示 ...

  5. P1109 桃花岛

    题目描述 不是任何人都可以进入桃花岛的,黄药师最讨厌象郭靖一样呆头呆脑的人.所以,他在桃花岛的唯一入口处修了一条小路,这条小路全部用正方形瓷砖铺设而成.有的瓷砖可以踩,我们认为是安全的,而有的瓷砖一踩 ...

  6. git提交时如何忽略一些文件

    起因 在使用git对软件进行版本管理的时候我们总有一些不需要提交到版本库里的文件和文件夹,或者在管理一个实际应用的开源项目的时候,不可以把带有数据库信息的文件上传到开源平台当中,这个时候我们就需要让g ...

  7. php检测函数

    验证字符串是否为电子邮箱  var_dump(filter_var('bob@example.com', FILTER_VALIDATE_EMAIL));       //bob@example.co ...

  8. 2018-8-10-win10-uwp-x_Bind-无法获得资源

    title author date CreateTime categories win10 uwp x:Bind 无法获得资源 lindexi 2018-08-10 19:17:19 +0800 20 ...

  9. 2018-2-13-C#-通配符转正则

    title author date CreateTime categories C# 通配符转正则 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23:3 ...

  10. 基于AutoIt3的Ping、网址转IP地址,以及hosts文件写入

    #include <Constants.au3> #include <GUIConstantsEx.au3> GUICreate("通讯测试-eip.hxgroup. ...