echarts在一个折线/柱状图浮窗显示多条数据

2022-12-23,,,,

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

《echarts在一个折线/柱状图浮窗显示多条数据.doc》

下载本文的Word格式文档,以方便收藏与打印。