zoukankan      html  css  js  c++  java
  • 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:{
                            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();
       });
  • 相关阅读:
    git常用指令 github版本回退 reset
    三门问题 概率论
    如何高效的学习高等数学
    数据库6 关系代数(relational algebra) 函数依赖(functional dependency)
    数据库5 索引 动态哈希(Dynamic Hashing)
    数据库4 3层结构(Three Level Architecture) DBA DML DDL DCL DQL
    梦想开始的地方
    java String字符串转对象实体类
    java 生成图片验证码
    java 对象之间相同属性进行赋值
  • 原文地址:https://www.cnblogs.com/ts119/p/12155301.html
Copyright © 2011-2022 走看看