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

最新推荐文章于 2024-06-18 17:05:29 发布

weixin_30325071

最新推荐文章于 2024-06-18 17:05:29 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/caoxen/p/11227244.html

本文介绍了一个使用ECharts实现的图表配置案例，包括标题、提示框、网格布局、坐标轴设置及系列数据展示等关键配置项。通过具体代码示例展示了如何定制化图表样式，并利用markPoint标记特殊数据点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);