zoukankan      html  css  js  c++  java
  • echarts柱状图上下颠倒

    放上options配置

    //财务格式
    function formatNum(strNum) {
        if (strNum.length <= 3) {
            return strNum;
        }
        if (!/^(+|-)?(d+)(.d+)?$/.test(strNum)) {
            return strNum;
        }
        var a = RegExp.$1,
            b = RegExp.$2,
            c = RegExp.$3;
        var re = new RegExp();
        re.compile("(\d)(\d{3})(,|$)");
        while (re.test(b)) {
            b = b.replace(re, "$1,$2$3");
        }
        return a + "" + b + "" + c;
    }
    //数据
    var legendData = [];
    var xAxisData = ["烟丝颜色", "嗅香品质", "嗅香浓淡程度", "抽吸感受的总体满意程度", 
    "烟灰质量", "烟嘴颜色牢固性", "口腔和喉部的刺激程度", "香气品质", "口腔充足程度",
    "1烟气顺化程度", "抽吸顺畅程度", "余味舒适程度","甜度","烟支抽吸中的挺度",
    "烟支软硬程度","烟支滤嘴长短","烟支滤嘴设计(科技感)","就一个很长的公司名字",
    "钢印颜色醒目程度","总体满意程度"];
    var yAxisData = xAxisData;
    var seriesName1 = "特征消费者的敏感指标分布";
    var seriesData1 = ["8","10","10","6","10","10","10","10","10","10",
    "10","10","10","10","60","20","5","2","10","10","1"];
    
    var option = {
        tooltip: { //提示框组件
            trigger: 'axis',
            formatter:function(params){  
              var relVal = params[0].name;  
              for (var i = 0, l = params.length; i < l; i++) { 
                      relVal +=  ' : ' + formatNum(params[i].value)+""; 
              }  
              return relVal;
            },
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            }
        },
        grid: {
            left: '1%',
            right: '4%',
            bottom: '6%',
            top:80,
            padding:'0 0 10 0',
            containLabel: true,
        },
        xAxis: [
            {   
                type: 'category',
                boundaryGap: true,//坐标轴两边留白
                data: xAxisData,
                position:'top',
                axisLabel: { //坐标轴刻度标签的相关设置。
                    interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
                    margin:15,
                    textStyle: {
                    //     color: '#4c647c',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 12,
                    },
                    rotate:50,
                },
                axisTick:{//坐标轴刻度相关设置。
                    show: false,
                },
                axisLine:{//坐标轴轴线相关设置
                    lineStyle:{
                    //     color:'#4c647c',
                        opacity:0.2
                    }
                },
                splitLine: { //坐标轴在 grid 区域中的分隔线。
                    show: false,
                }
            }
        ],
        yAxis: [
            {   
                show:false,
                inverse: true,
                type: 'value',
                splitNumber: 5,
                axisLabel: {
                    textStyle: {
                        color: '#4c647c',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 12,
                    }
                },
                axisLine:{
                    show: false
                },
                axisTick:{
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#000'],
                        opacity:0.06
                    }
                }
            }
        ],
        series : [
            {
                name:seriesName1,
                type:'bar',
                data:seriesData1,
                barWidth: 10,
                barGap:0,//柱间距离
                label: {//图形上的文本标签
                    normal: {
                      show: true,
                      position: 'bottom',
                      formatter: function(p) {
                            return formatNum(p.value) + "";
                        },
                      textStyle: {
                          color: '#FBAD79',
                          fontStyle: 'normal',
                          fontFamily: '微软雅黑',
                          fontSize: 12,   
                      },
                    },
                },
                itemStyle: {//图形样式
                    normal: {
                        barBorderRadius: 20,
                        color:'#FBAD79'
                    }
    
                },
            }
           
            
        ]
    };
    View Code
  • 相关阅读:
    docker gitlab意外强制关机导致gitlab启动后报错unexpected end of JSON input
    Dockerfile实践记录
    html 打开新页面
    【rt-thread】2、尝试用ENV添加18b20传感器
    【rt-thread】1、快速建立rt-thread nano最小裁剪工程
    Git pull 强制覆盖本地文件
    *** WARNING L16: UNCALLED SEGMENT, IGNORED FOR OVERLAY PROCESS
    51单片机局部变量占用ram的问题
    【乐为物联】1、初识乐联
    Wing-AEP平台LWM2M设备接入
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/13139081.html
Copyright © 2011-2022 走看看