Echart如何实现下图的样式?

发布于 2022-09-06 12:18:35 字数 270 浏览 16 评论 0

clipboard.png

有个项目很急,搞了很久,
现在不明白的地方是,
1.我只会把y轴全取消掉,怎么能把字段(总数,博士,硕士,高级)保留出来?
2.怎么让柱状图上的旁边怎么显示数字?

求熟悉Echart的大神来帮我T_T

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

南汐寒笙箫 2022-09-13 12:18:35

颜色变一下就行了
http://gallery.echartsjs.com/...

活雷疯 2022-09-13 12:18:35

1.设置Y轴的axisLine/splitline/axisTick为隐藏

2.设置serieslabel显示,position设为right

源代码,记得在4.0以上版本运行,低版本请自行修改配置

app.title = '世界人口总量 - 条形图';

option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
    },
    series: [
        {
            name: '2012年',
            type: 'bar',
            label: {
                show: true,
                position: 'right'
            },
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};
岁月染过的梦 2022-09-13 12:18:35

这个用Echarts干啥 用div 做背景色填充就行了嘛

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文