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

男娘i 2023-06-14 15:59 4阅读 0赞

## 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"
    }
    ]

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();
       });

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

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

echarts在一个折线/柱状图浮窗显示多条数据解决问题就在data里面，首先 data里面是可以json数组形式，如官方API上的 name:”“， value：”“

男娘i/ 2023年06月14日 15:59/ 0 赞/ 5 阅读

相关 echarts柱状图鼠标悬浮显示数据_echarts数据可视化图表（一）：柱状图

echarts数据可视化图表(一)：柱状图效果图： ![317e9ba6990d74882739e5c15823f310.png][] 代码如下：注意：需引用ech

た入场券/ 2023年01月10日 11:53/ 0 赞/ 428 阅读

相关 echarts 柱状图条柱顶部或者右侧显示数字

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6e

忘是亡心i/ 2022年12月13日 14:07/ 0 赞/ 545 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 314 阅读

相关 echarts柱图分组显示(簇状柱形图)

> 需求：设计echarts柱图，相同类型数据放在一起，使用不同背景色分割 > > 所用属性：yAxis/xAxis.splitArea > > splitAre

不念不忘少年蓝@/ 2022年10月24日 11:55/ 0 赞/ 485 阅读

相关 Echarts柱状图百分比显示

option = { tooltip: { trigger: 'item', formatter

冷不防/ 2022年09月12日 12:58/ 0 赞/ 311 阅读

相关 ECharts 更新柱状图数据

ECharts 更新柱状图数据最近使用Echarts的时候，想要先加载出图表的大概框架样式，再加载数据，之后再定时刷新数据，这样就不用每次重新加载样式，减轻浏览器负担。

矫情吗；*/ 2022年07月11日 01:56/ 0 赞/ 436 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 381 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 339 阅读

相关 ECharts柱状图百分比显示

ECharts柱状图百分比显示 ![Center][] //shop为div的id var city\_all\_bar = echarts.init(do

系统管理员/ 2022年06月04日 05:41/ 0 赞/ 468 阅读