echarts图表x轴文字显示不全问题及柱状图颜色调整

var myChart= echarts.init(document.getElementById(‘myChart‘));
    option = {
        title: {
            // text: ‘纯属虚构‘,
        },
        tooltip: {
            trigger: ‘axis‘
        },
        grid: {
            left: ‘5%‘,//左边距
            right: ‘5%‘,//走边距
            top: 10,//上边距
            bottom: 50,//下边距
            containLabel: true
        },
        xAxis: [
            {
                type: ‘category‘,
                data: xArray,
                axisLabel:{//把文字竖着放
                    formatter:function(value){
                        return value.split("").join("\n")
                    }
                }
            }
        ],
        yAxis: [
            {
                type: ‘value‘
            }
        ],
        series: [
            {
                name: ‘哈哈‘,
                type: ‘bar‘,
                // barWidth: 15,
                // barGap: ‘-10%‘,
                data: yArray,
                markPoint: {
                    data: [
                        {name: ‘最高‘},
                        {name: ‘最低‘}
                    ]
                },
                itemStyle: {
                    color: function(params) {//柱状体颜色
                        // build a color map as your need.
                        var colorList = [
                            ‘#FF80AA‘,‘#F8568C‘,‘#C71848‘,‘#F61B63‘,‘#7ED321‘,
                            ‘#00C47B‘,‘#FF894A‘,‘#8782F7‘,‘#24A8BF‘,‘#1CCCB5‘,
                            ‘#158EFE‘,‘#68B671‘,‘#FEDB65‘,‘#2CD1C0‘,‘#AE54B5‘

                        ];
                        return colorList[params.dataIndex]
                    },
                }
            }
        ]
    };
    myChart.setOption(option);

原文地址:https://www.cnblogs.com/caoxen/p/11227244.html

时间: 2024-11-05 19:03:35

echarts图表x轴文字显示不全问题及柱状图颜色调整的相关文章

百度echarts插件x轴坐标显示不全决解方法

X轴显示不全: xAxis.axisLabel.interval number, Function [ default: 'auto' ] 坐标轴刻度标签的显示间隔,在类目轴中有效. 默认会采用标签不重叠的策略间隔显示标签. 可以设置成 0 强制显示所有标签. 如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推. 可以用数值表示间隔的数据,也可以通过回调函数控制.回调函数格式如下: (index:number, value: string) =>

解决echarts中X轴文字过长的问题。【转】

axisLabel: { interval: 0, formatter:function(value) { debugger var ret = "";//拼接加\n返回的类目项 var maxLength = 2;//每项显示文字个数 var valLength = value.length;//X轴类目项的文字个数 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 if (rowN > 1)//如果类目项的文字

confluence导出pdf 文字显示不全

当使用confluence编辑页面时,当一行的文字过多,且中间没什么逗号分隔时,有时会出现导出的pdf文件中,这一行显示的文字不全的情况. 如: 很明显费用的费字没有显示完全,且后面还有其他的字. 可以看到其他官方提供的pdf导出的样式中,已经包含下列内容: 但是它并没有起到效果(不是完全没有效果,有些地方可以) 可参考如下的css内容,修改: @page { size: 210mm 297mm; margin: 15mm; } body, p, li, td, table, tr, br, .

android 按钮的文字显示不全

AbsoluteLayout.LayoutParams layoutparams = new AbsoluteLayout.LayoutParams((int) (datashow.nWidth * wr), (int) (datashow.nHeight * hr), (int) (datashow.nLp * wr), (int) (datashow.nTp * hr)); Button buttonView = new Button(this); buttonView.setPadding

溢出问题:overflow后最后一排文字显示不全

溢出字体会显示在padding区域(http://www.divcss5.com/css-hack/c680.shtml) section#xinwen li a h3{ border-bottom: solid 1px #fff; margin-bottom: 5px; padding-bottom: 10px; height: 50px; width: 288px; overflow: hidden; }

Echarts中axislabel文字过长导致显示不全或重叠

最近在使用Echarts的时候,遇到点问题就是xAxis文字过长导致x轴的文字显示不全. 解决方案如下: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> 2 <HEAD> 3 <TITLE>my_echarts</TITLE> 4 <META HTTP-EQUIV="Content-Type" CONTEN

echart的label标签文字过长显示不全怎么办?

echart的官方只提供label标签文字过长是斜着显示的方式,并且文字显示不全重叠等现象.那么只能自己的方式来实现. option = { title : { text: '世界人口总量', subtext: '数据来自网络' }, tooltip : { trigger: 'axis' }, legend: { data:['2011年', '2012年'] }, toolbox: { show : true, feature : { mark : {show: true}, dataVie

div css每行文字显示一半 同时文字字体重叠显示不全解决方法

CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. 新手布局时候特别爱出现DIV盒子里文字字体显示不完整,音乐沙发甚至上下行文字有一点重叠现象. css字体文字重叠显示不完整重叠字体字体文字重叠显示不完整同时有重叠重合效果截图 在DIV+CSS布局中造成这种字体显示不全,音乐沙发显示一半同时多行文字有一点点重叠情况原因:css行高小于CSS字体大小

Echarts-axislabel文字过长导致显示不全或重叠

先看两张图 按目前情况,官方并为对axislabel的高度或者宽度做调整.所以解决方案只能从其他方案下手 解决方案有几种 第一种为上图解决方案 设置grid属性定义图的大小来释放空间,使得axislabel有足够的空间 /** 参数传值全部为数组 * @param names x轴值 * @param xycounts * @param zscounts * @param xypjjlrs * @param zspjjlrs */ function drawZZTZXTBJ(names,xyco