echarts在⼀个折线柱状图浮窗显⽰多条数据
解决问题就在data⾥⾯，⾸先 data⾥⾯是可以json数组形式，如官⽅API上的 name:”“， value：”“，等 value是echart识别折线图的key值。
1.来看数据格式
data:[
{
value:"100",
name:"张三"，
price:"100.00",
number:"15"
},
{
value:"100",
name:"张三"，
price:"100.00",
number:"15"
textstyle}
]
//提⽰⽂字
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.ElementById('flashData'));
myChart.clear();
option = {
title: {
text: '5采购商品数量趋势',//折线图的主标题
left: '3%',
textStyle:{  //折线图的标题⽂字样式
fontSize:16,
color:"#333",
fontWeight:'700'
}
},
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: '0',
left:'center',
textStyle:{
//color:["#FE9548"],// 图例颜⾊
},
itemWidth: 30, //图例宽度
itemHeight: 4, //图例⾼度度
data: [{
name:'参加活动商品数', //图例名称
icon:'rect'//图例样式
}],
},
xAxis: {
type : 'category',
axisLabel:{
show: true,
interval:0,//横轴间距
rotate:20 ,//横轴标题旋转⾓度
},
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: 12
}
},
lineStyle:{
width:2//折线宽度
}
}
},
data:[{
value:"100",
name:"张三"，
price:"100.00",
number:"15"
},
{
value:"100",
name:"张三"，
price:"100.00",
number:"15"
}]
}
]
};
myChart.setOption(option);
//图标⼤⼩跟随页⾯⼤⼩⾃动调整
$(window).resize(function() {
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。