Echarts：10-5-2:柱状图（坐标轴刻度与标签对齐）

客官°小女子只卖身不卖艺 2022-12-12 04:33 250阅读 0赞

10-5-2 柱状图（坐标轴刻度与标签对齐）

option = {
        title: {
            text: '柱状图（坐标轴刻度与标签对齐）'
        },
        color: ['#02f3f2'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick: {//坐标轴刻度与标签对齐
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '数值',//单个类别直接在这定义即可，相当于legend: {data: ['数值'] }，
                type: 'bar',
                barWidth: '50%',
                data: [120, 142, 220, 334, 490, 430, 320]
            }
        ]
    };

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70]: /images/20221123/1a80e321def14f0cbda175f67bbede0a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts：10-5-2:柱状图（坐标轴刻度与标签对齐）

10-5-2 柱状图（坐标轴刻度与标签对齐） option = { title: { text: '柱状图（坐标轴刻度与标签对

客官°小女子只卖身不卖艺/ 2022年12月12日 04:33/ 0 赞/ 251 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 258 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 608 阅读

相关 vue echarts柱状图隐藏坐标轴刻度线等横向显示百分比

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

àì夳堔傛蜴生んèń/ 2022年10月13日 05:17/ 0 赞/ 653 阅读

相关 Echarts 取消柱状图坐标轴线、设置不同颜色、

取消柱状图坐标轴线 splitLine xAxis: { type: 'value', boundaryGap: [0, 0.01],

谁借莪１个温暖的怀抱￠/ 2022年09月05日 00:21/ 0 赞/ 263 阅读

相关 ECharts柱状图实例

ECharts柱状图实例 test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

古城微笑少年丶/ 2022年06月14日 04:23/ 0 赞/ 292 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 320 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 278 阅读

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 697 阅读

相关 echart 柱状图两个纵轴坐标刻度不一样

在使用echart的过程中, 有的时候柱状图会使用两个纵坐标, 如果两个纵坐标的最大值是一样的还好,这样刻度也会一样. 但是多数情况下最大值是不一样的, 这样就造成了,刻度线很

╰+哭是因爲堅強的太久メ/ 2021年10月24日 06:44/ 0 赞/ 589 阅读