echarts在一个折线/柱状图浮窗显示多条数据
程序员文章站
2022-03-21 17:09:01
解决问题就在data里面,首先 data里面是可以json数组形式,如官方API上的 name:”“, value:”“,等 value是echart识别折线图的key值。1.来看数据格式 data:[ { value:"100", name:"张三", price:"100.00", number ......
解决问题就在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" } ]
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: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() { mychart.resize(); });