精华内容
下载资源
问答
  • echarts条形图横向显示数据且设置label属性Echarts条形图顶端显示数据默认不显示数据修改label属性控制数据显示位置 默认不显示数据 <!DOCTYPE html> <html style="height: 100%"> <head> <...

    echarts条形图横向显示数据且设置label属性Echarts条形图顶端显示数据

    默认不显示数据

    在这里插入图片描述

    <!DOCTYPE html>
    <html style=
    展开全文
  • Echarts 条形图

    2019-12-19 17:15:50
    Echart 条形图 var source = [ ['score', 'amount', 'product'], [89.3, 58212, 'Matcha Latte'], [57.1, 78254, 'Milk Tea'], [74.4, 41032, 'Cheese Cocoa'], [50.1, 12755, 'Cheese Brownie'], [89.7, ...
    Echarts 条形图

    在这里插入图片描述

    var source = [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea'],
      [74.4, 41032, 'Cheese Cocoa'],
      [50.1, 12755, 'Cheese Brownie'],
      [89.7, 20145, 'Matcha Cocoa'],
      [68.1, 79146, 'Tea'],
      [19.6, 91852, 'Orange Juice'],
      [10.6, 101852, 'Lemon Juice'],
      [32.7, 20112, 'Walnut Brownie'],
    ].sort((a, b) => {
      return a[1] - b[1];
    });
    
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        textStyle: {
          color: '#3c3c3c',
        },
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        extraCssText: 'box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.20); padding: 10px 14px;border-radius: 4px;',
      },
      dataset: {
        source: source,
      },
      grid: {
        containLabel: true,
        left: '1%',
        right: '8%',
        bottom: '2%',
        top: '2%',
      },
      xAxis: {
        name: '',
        show: false,
      },
      yAxis: {
        type: 'category',
        axisLabel: {
          interval: 0,
          color: '#5c5c5c',
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          inside: true,
          show: false,
        },
      },
      visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 12755,
        max: 101852,
        text: ['高分', '低分'],
        dimension: 1,
        inRange: {
          color: ['#D7DA8B', '#E15457'],
        },
      },
      series: [
        {
          type: 'bar',
          label: {
            show: true,
            position: 'right',
            formatter(val) {
              return '    $' + val.data[1];
            },
            /* rich: {
              text: {
                align: 'left',
                height: 20,
                fontSize: 14,
                verticalAlign: 'middle',
              },
            }, */
          },
          encode: {
            // Map the "amount" column to X axis.
            x: 'amount',
            // Map the "product" column to Y axis
            y: 'product',
          },
          itemStyle: {
            barBorderRadius: 50,
            color: function({ dataIndex }) {
              const colorList = [
                '#3C7EF2',
                '#3E82F3',
                '#4288F4',
                '#448CF4',
                '#4791F4',
                '#4791F4',
                '#4D9CF6',
                '#50A0F6',
                '#53A6F7',
                '#56ABF8',
                '#5AB0F9',
                '#5CB5F9',
                '#60BBFA',
                '#62BFFB',
                '#65C4FB',
                '#67C8FB',
                '#6BCEFC',
                '#6ED3FD',
                '#71D9FD',
                '#75E0FE',
              ];
              return colorList.reverse()[dataIndex > colorList.length - 1 ? colorList.length - 1 : dataIndex];
            },
          },
          barWidth: 10,
        },
      ],
    };
    
    展开全文
  • echarts条形图

    2019-12-05 10:38:31
    echarts . init ( dom ) ; var app = { } ; option = null ; var option = { dataset : { source : [ [ 'amount' , 'product' ] , [ 58212 , 'Matcha Latte' ] , [ ...

    在这里插入图片描述

    <!DOCTYPE html>
    <html style="height: 100%">
       <head>
           <meta charset="utf-8">
       </head>
       <body style="height: 100%; margin: 0">
           <div id="container" style="height: 100%"></div>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
           <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> -->
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
           <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var option = {
        dataset: {
            source: [
                [ 'amount', 'product'],
                [ 58212, 'Matcha Latte'],
                [ 78254, 'Milk Tea'],
                [ 41032, 'Cheese Cocoa'],
               
            ]
        },
        grid: {containLabel: true},
        xAxis: {name: '', axisTick: {
                show: false
            }, axisLine: {
                show: false,
              
            },},
        yAxis: {type: 'category', axisTick: {
                show: false
            }, axisLine: {
                show: true,
                lineStyle: {
                    color: '#dadada'
                }
            },axisLabel: {
    			textStyle:{
    				color:'#000',  //坐标的字体颜色
    			},
    		},},
    
       
        series: [
            {
                type: 'bar',
    			//barWidth : 30,
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'amount',
                    // Map the "product" column to Y axis
                    y: 'product'
                },
    			 itemStyle: {   
                    //通常情况下:
                    normal:{  
                //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                        color: function (params){
                            var colorList = ['#f00','#0f0','#00f','rgb(195,229,235)'];
                            return colorList[params.dataIndex];
                        },
    					 label: {
                               show: true,		//开启显示
                               position: 'right',	//在上方显示
                               textStyle: {	    //数值样式
                                   color: 'black',
                                   fontSize: 16
                               }
                           }
    
                    },
    				}
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
           </script>
       </body>
    </html>
    
    展开全文
  • Echarts条形图实战

    千次阅读 2017-08-03 15:52:15
    最近公司项目要做一个统计图用到了echarts里面的条形图,对于以前就接触过一点echarts的我信心满满,没想到动手的时候才发现问题百出,看来实践真的是检验学习成效的标准。这里有两种条形图,一种横向的一种纵向的。...

    最近公司项目要做一个统计图用到了echarts里面的条形图,对于以前就接触过一点echarts的我信心满满,没想到动手的时候才发现问题百出,看来实践真的是检验学习成效的标准。这里有两种条形图,一种横向的一种纵向的。

    不管是哪种都要先初始化echarts:

    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    这里横向和纵向柱状图的配置无非就是x轴和y轴的不同,所以我写了两个配置项:

    //横向图表的配置
    var optionH = {
            grid:{
                x:150
            },
            color: ['#9BBB59'],
            title: {
                textStyle: {  
                    color: '#aaa',
                    fontWeight: '600'
                },
                x:'50'//设置标题的偏移
            },
            tooltip: {
                trigger: 'axis',
                formatter: "完成进度 : <br/>{b} : {c}%"
            },
            toolbox: {
                show : true,
                x:'800',
                feature : {
                    dataView : {show: false, readOnly: false},  
                    magicType : {show: true, type: ['line', 'bar']},  
                    restore : {show: true},  
                    saveAsImage : {show: true}
                }
            },
            xAxis: [{
                 type : 'value',
                 axisLabel : {
                     formatter: '{value} %'
                  }, 
                 min: 0,
                 max: 100,
                 interval: 10 
                }],
           yAxis: [{
               type : 'category',
               axisLabel:{
                   //X轴刻度配置
                   interval:0 
                  },
               data: ['']
    
           }],
           series: [{
               xAxisIndex: 0,
               yAxisIndex: 0,
               type: 'bar',
               barMaxWidth:60,//最大宽度
               data: ['']
           }]
    };
    // 纵向图表的配置
    var optionV = {
        color: ['#9BBB59'],
        title: {
                text: '',
                textStyle: {  
                    color: '#aaa',
                    fontWeight: '600'
                },
                x:'50'
    
            },
        tooltip: {
                trigger: 'axis',
                formatter: "完成进度 : <br/>{b} : {c}%"
            },
        toolbox: {
                show : true,
                x:'800',
                feature : {
                    dataView : {show: false, readOnly: false},  
                    magicType : {show: true, type: ['line', 'bar']},  
                    restore : {show: true},  
                    saveAsImage : {show: true}
                }
            },
        xAxis: [{
                type : 'category',
                data: [''],
                axisLabel:{
                   //X轴刻度配置
                   interval:0 
                  }
                }
               ],
        yAxis: [{
               type : 'value',
               axisLabel : {
                   formatter: '{value} %'
               }, 
               min: 0,
               max: 100,
               interval: 10
           }],
        series: [{
               type: 'bar',
               barMaxWidth:60,//最大宽度
               data: ['']
           }]
    };

    这个统计图一共有5种角色的区分(市级、区级、学校、班主任、学生)

    首先市级的是纵向条形图,x轴为类别数据,y轴为百分比:

    //市级  统计图
    function loadOptionByCity(){   
       // 使用刚指定的配置项和数据显示图表
        myChart.setOption(optionV);
        var njmc= $('#staGradeSelect option:selected').val();
        var termNo = $('#staTermNo option:selected').val();
        $.ajax({  
            url: ctx + '/SCH_STATISTIC_JLYD_Action.a?findCountyStatisticScore',  
            type: 'post', 
            data: {
                "njid" : njmc,   //年级
                "termNo" :termNo  //学期
            },
            dataType: 'json',  
            async: false,  
            success: function (result) { 
                var resultCode = result.resultCode;
                var resultMsg = result.resultMsg;
                var resultList = result.resultList;
                var xArray=[];
                if (result)  
                {  
                    var option = myChart.getOption();  
                    option.series[0].data = [];
                    option.title[0].text = titleArray[0];
                    if (resultList.length == 0) { 
                        option.series[0].data = [];  
                        option.xAxis[0].data = []  
                    } else { 
                        for (var i = 0; i <resultList.length; i++) {         
                                option.series[0].data.push(resultList[i].ztwcjd);  
                                xArray.push(resultList[i].qxmc);                        
                        }   
                        option.xAxis[0].data=xArray;
                    } 
                    myChart.setOption(option,true);  
                }
            },
            error: function ()  
            {  
                alert("不好意思请求失败了");  
            }  
        })  
    }; 
    

    渲染出来的图表是这样:

    Paste_Image.png

    区级也是纵向条形图,只不过x轴数据是写死的:

    //区级  统计图
    function loadOptionByArea()  
    { 
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(optionV);
        var njid= $('#staGradeSelect option:selected').val();
        var termNo = $('#staTermNo option:selected').val();
        $.ajax({  
            url: ctx + '/SCH_STATISTIC_JLYD_Action.a?findCountyStatisticScore',  
            type: 'post', 
            data: {
                "qxdm" :qxdmSelf,
                "njid" : njid,   //年级
                "termNo" :termNo  //学期
            },
            dataType: 'json',  
            async: false,  
            success: function (result) { 
                var resultCode = result.resultCode;
                var resultMsg = result.resultMsg;
                var resultList = result.resultList;
                if (result)  
                {  
                    var option = myChart.getOption();  
                    option.series[0].data = [];
                    option.title[0].text = titleArray[1];
                    if (resultList.length == 0) { 
                        option.series[0].data = [];  
                        option.xAxis[0].data = ['啊啊','哇哇','啦啦','嘻嘻','呵呵']  
                    } else { 
                        var xArray=['啊啊','哇哇','啦啦','嘻嘻','呵呵']  ;
                        var yArray = [resultList[0].ztwcjd,resultList[0].zgdfjd,resultList[0].zgtbjd,resultList[0].zjtbjd,resultList[0].actbjd];
                        option.series[0].data=yArray
                        option.xAxis[0].data=xArray;
                    } 
                    myChart.setOption(option,true);  
                }
            },
            error: function ()  
            {  
                alert("不好意思请求失败了");  
            }  
        })  
    }; 

    渲染出来的图表是这样:

    Paste_Image.png

    校级、班主任、学生三个角色都是横向条形图,只不过传的参数和接口地址不一样,所以我封装了一个方法

     function loadOption(url,data)         
    {
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(optionH);
        $.ajax({  
            url: ctx + url,  
            type: 'post', 
            data: data,
            dataType: 'json',  
            async: false,  
            success: function (result) { 
                var resultCode = result.resultCode;
                var resultMsg = result.resultMsg;
                var resultList = result.resultList;                 
                if (result)  
                {  
                    var option = myChart.getOption();  
                    option.series[0].data = [];
                    option.yAxis[0].data = [];
                    option.title[0].text = titleArray[2];
                    if (resultList.length == 0) { 
                        option.series[0].data = [];  
                        option.yAxis[0].data = []  
                    } else { 
                        for(var i=0;i<resultList.length;i++){
                            option.series[0].data.push(resultList[i].WCJD);
                            option.yAxis[0].data.push(resultList[i].LABELNAME);
                        }
                    } 
                    myChart.setOption(option,true);  
                }
            },
            error: function ()  
            {  
                alert("不好意思请求失败了");  
            }  
        })  
    }; 

    Paste_Image.png

    总结

    tooltip: {
                  trigger: 'axis',
                  formatter: "完成进度 : <br/>{b} : {c}%"
            }
    1. 提示框触发方式:trigger
      tooltip的trigger的值可以有’item’、’axis’。
      ‘item’:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
      ‘axis’:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用
    2. 提示框的格式:formatter
      折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)如下图:

    Paste_Image.png
    工具箱,非常方便,可以条形图折线图相互转换,效果如下图:

    toolbox: {
                show : true,
                x:'800',//在x轴的位置
                feature : {
                    dataView : {show: false, readOnly: false},  //数据视图
                    magicType : {show: true, type: ['line', 'bar']},  //动态转换
                    restore : {show: true},  //刷新
                    saveAsImage : {show: true}//保存为图片
                }
            },

    Paste_Image.png

     xAxis: [{
                type : 'category',
                data: [''],
                axisLabel:{
                   //X轴刻度配置
                   interval:0 
                  }
                }
               ]
    这里需要设置x轴标签的刻度,不然会出现默认刻度单位过大或者是数据标签隔一个显示一个的怪异现象
    yAxis: [{
               type : 'value',
               axisLabel : {
                   formatter: '{value} %'
               }, 
               min: 0,
               max: 100,
               interval: 10
           }],
    这里需要注意的是我想让y轴的刻度按百分比显示,从10%到100%,间隔为10,用到了神奇的formatter
    


    series: [{
    type: 'bar',
    barMaxWidth:60,//最大宽度
    data: ['']
    }]
    通过barMaxWidth设置柱子的最大宽度,不然数据少的时候,柱子会特别宽,影响美观

    还有一个需要注意的地方,每次渲染图表都让数据置空option.series[0].data = [];不然会出现数据堆叠的怪异现象

    展开全文
  • echarts条形图属性设置

    2020-12-11 14:31:45
    源码 option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { left: 'center', ...
  • echarts条形图顶端设置显示数据

    万次阅读 2018-08-27 16:35:44
    一.代码 series : [ { name:'金额', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390], ... '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#...效果
  • ![图片说明](https://img-ask.csdn.net/upload/201812/24/1545616425_474163.png) 如,两个问题, 一、y轴溢出, 二、y轴标题显示不全 如何解决???急!!!
  • 效果: 图片转base64版 代码 代码1 图片上传版 代码2 需要用到的网站地址: 在线图片上传 在线图片转BASE64
  • var myChart = echarts.init(document.getElementById('main')); //显示标题,图例和空的坐标轴 myChart.setOption({  title: {  text: '异步数据加载示例'  },  tooltip: {},  leg
  • echarts多维条形图 柱状图作图,来自官网代码,图形化 展示 大数据 信息
  • Echarts实现条形图

    2019-12-17 09:51:47
    链接:Echarts实现条形图
  • echarts 条形统计样式修改

    千次阅读 2018-04-25 16:26:46
    echarts. graphic . LinearGradient ( // 柱状颜色渐变 0 , 0 , 0 , 1 , [ { offset : 0 , color : '#58b9ed' } , { offset : 0.5 , color : '#203dda' } , { offset : 1 , color : '#3e28...
  • echarts 正负条形图

    千次阅读 2018-08-21 14:20:52
    &lt;script&gt; $(function() { ... var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 option = { title: [ { text: '...
  • 绘图工具echarts——条形图

    千次阅读 2019-02-23 11:34:17
    echarts 商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库...绘制单条条形图 案例: 假设你获取到了某年内地电影票房前20的电影和电影票房数据, 那么如何更加...
  • echarts条形进度条

    千次阅读 2020-04-06 20:05:16
    echarts条形进度条 说明: echarts.js必须下载到本地,在线引入坐标轴的箭头不会出现 效果如下: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>&...
  • echarts柱状图、饼状图、条形图

    热门讨论 2015-04-30 10:52:18
    echarts柱状图、饼状图、条形图等等,帮你快速的解决各种图形。里面包含各种实例,可快速入手,无难度。
  • 所示: 代码: <template> <div :class="className" :style="{height:height,width:width}" /> </template> <script> import echarts from 'echarts' require('echarts/theme/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,942
精华内容 1,176
关键字:

echarts条形图