柱状/条形图type=bar参数说明： 

  1 <div class="data_dt">
  2       <div id="containert"></div>
  3 </div>
  4 <script src="js/jquery-1.10.2.min.js"></script>
  5 <script src="echarts-4/echarts.min.js"></script>
  6 <script type="text/javascript">
  7 var colorArrnum=[];
  8 var num_text_up = []//柱状线上
  9 var num_per_up=[]; //线上百分比
 10 
 11 var num_text_down = []//柱状线下
 12 var num_per_down =[]; //线下百分比
 13 
 14 var shop = []//柱状门店
 15 $(function(){
 16    oninput();
 17 })
 18 function oninput(){
 19    $.ajax({
 20         type:'get',
 21         url:'/app/plug/ECharts/json/goodSaleAnalysisList_2.json',
 22         cache:false,
 23         dataType:'json',
 24         success:function(data){
 25             //console.log(data)
 26             var data = data.data;
 27             num_text_up=[];
 28             num_per_up=[];
 29             num_text_down=[];
 30             num_per_down=[];
 31             shop=[];
 32             if(data.length >0 || data !=undefined){
 33                 console.log(data)
 34                 num_text_up=data.Online; //线上
 35                 num_per_up=data.OnlineProportion
 36                 num_text_down=data.Underline;//线下
 37                 num_per_down=data.UnderlineProportion;
 38                 shop=data.store_name;
 39                 num(num_text_up, num_text_down,shop,num_per_up,num_per_down);
 40             }
 41         },
 42         error:function(){
 43             alert('数据返回异常');
 44         }
 45    });
 46 }
 47 </script>
 48 <script type="text/javascript">
 49     //堆叠柱状图
 50     function num(num_text_up, num_text_down, shop, num_per_up, num_per_down){
 51         console.log(num_text_up)
 52         var dom = document.getElementById("containert");
 53         var myChart = echarts.init(dom);
 54         option = null;
 55         option = {
 56             tooltip: {
 57                 trigger: 'axis',
 58                 formatter:function(params){
 59                     var arr=[
 60                        ''+params[0].name+' <br />',
 61                        '<span style="display:inline-block; margin-right:5px; color:'+params[0].color+'">●</span>'+params[0].seriesName+'：'+params[0].value+' ('+num_per_down[params[0].dataIndex]+'%) <br />',
 62                        '<span style="display:inline-block; margin-right:5px; color:'+params[1].color+'">●</span>'+params[1].seriesName+'：'+params[1].value+' ('+num_per_up[params[1].dataIndex]+'%)'
 63                     ];
 64                     return arr.join('\n')
 65                 },
 66                 rich:{},
 67                 axisPointer: {            // 坐标轴指示器，坐标轴触发有效
 68                     type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
 69                 }
 70             },
 71             
 72             grid: {
 73                 left: '3%',
 74                 right: '4%',
 75                 bottom: '1%',
 76                 containLabel: true
 77             },
 78             xAxis: {
 79                 type: 'category',
 80                 axisLabel:{
 81                     margin:20
 82                 },
 83                 data: shop
 84             },
 85             yAxis: {
 86                 type: ''
 87             },
 88             series: [
 89                 {
 90                     name: '线下',
 91                     type: 'bar',
 92                     stack: '总量',
 93                     barWidth: 100,
 94                     label: {
 95                         normal: {
 96                             show: true,
 97                             lineHeight:28,
 98                             position: 'inside'
 99                         }
100                     },
101 
102                     data: num_text_down
103                 },
104                 {
105                     name: '线上',
106                     type: 'bar',
107                     stack: '总量',
108                     barWidth: 100,
109                     label: {
110                         normal: {
111                             show: true,
112                             lineHeight:28,
113                             position: 'inside'
114                         }
115 
116                     },
117                     data: num_text_up
118                 }
119             ],
120             color: ['#4ce2d5', '#fa7b7b']
121         };
122         if (option && typeof option === "object") {
123             myChart.setOption(option, true);
124         }
125     }
126 </script>
View Code

 本地效果：http://svn.chenhua.cc/app/plug/ECharts/typebar_one.html

本地文件：E:\www\svn\app\plug\ECharts\typebar_one.html

参数说明：

tooltip：提示框组件；

第一方式：tooltip参数说明：

tooltip：{
   show:true,   //默认true,是否显示提示框组件，包括提示框浮层
   trigger:'axis',   //坐标轴触发，主要在柱状图，折线图等使用类目轴的图表中使用
   formatter: "{a} <br/>{b} : {c} ({d}%)",   //提示框浮层内容格式器，支持字符串模板和回调函数两种方式，饼图：{a}（系列名称），{b}(数据项名称)，{c}(数值)，{d}(百分比)
   backgroundColor:"#f00",   //提示框浮层的背景颜色
   
}

tooltip-formatter提示框浮层说明：（回调函数方式）

tooltip: {
    trigger: 'axis',
    formatter:function(params){
        var arr=[
            ''+params[0].name+' <br />',
            '<span style="display:inline-block; margin-right:5px; color:'+params[0].color+'">●</span>'+params[0].seriesName+'：'+params[0].value+' ('+num_per_down[params[0].dataIndex]+'%) <br />',
            '<span style="display:inline-block; margin-right:5px; color:'+params[1].color+'">●</span>'+params[1].seriesName+'：'+params[1].value+' ('+num_per_up[params[1].dataIndex]+'%)'
        ];
        return arr.join('\n')
    },
    rich:{},
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
         type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    }
},

tooltip.formatter 文字来自：http://echarts.baidu.com/option.html#tooltip.formatter

tooltip说明也可参考此处：https://www.cnblogs.com/chenguiya/p/9447630.html

第二参数： series参数说明：

series：[
   {
       name: '线下',  //系列名称，用于tooltip的显示
       type: 'bar',   //柱状/条形图类型
       label: {    //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等；
         show: true,   //是否显示标签
         position: 'inside',    //标签位置
         formatter:function(params){   //标签内容格式器，支持字符串模板和回调函数两种形式
            var arr=[
                ''+params.value+'',
                '('+num_per_down[params.dataIndex]+'%)'
            ];
            return arr.join('\n');
         },
         rich:{}
       },
       data: ["420.00", "200.00", "400.00", "320.00"]
   },
   {
       name: '线上',
       type: 'bar',
       label: {
         show: true,     //是否显示标签
         position: 'inside',   //标签位置
         formatter:function(params){   //标签内容格式器，支持字符串模板和回调函数形式
            var arr=[
                ''+params.value+'',
                '('+num_per_up[params.dataIndex]+'%)'
            ];
            return arr.join('\n');
         },
         rich:{}
       },
       data: ["530.00", "500.00", "230.00", "120.00"]
   }
]

series-bar.type参数说明：http://echarts.baidu.com/option.html#series-bar.type

seies-bar.label.formatter参数说明:标签内容格式器（回调函数形式）

formatter:function(params){
     var arr=[
            ''+params.value+'',
            '('+num_per_up[params.dataIndex]+'%)'
      ];
      return arr.join('\n');
},
rich: {
     align:'center',
      title: {
            color: '#eee',
            align: 'center'
      },
      hr: {
            borderColor: '#777',
            width: '100%',
            borderWidth: 0.5,
            height: 0,
            lineHeight:28,
            }
}

 

series-bar.label.formatter参数说明： http://echarts.baidu.com/option.html#series-bar.label.formatter

 本地效果为：http://svn.chenhua.cc/app/plug/ECharts/typebar_one.html

 

posted @ 2018-08-09 11:51  chenguiya  阅读(2061)  评论(0)    收藏  举报