echart 柱状图倒叙、字体设置、颜色渐变的使用

最新推荐文章于 2024-05-06 21:45:59 发布

yhr杨小二

最新推荐文章于 2024-05-06 21:45:59 发布

阅读量1.5k

点赞数

分类专栏：学习之路文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_38008818/article/details/125894036

版权

学习之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

倒叙 inside: true,

  var option = {
                color: ['#CFF0FD'],
                tooltip: {
                    show: true
                },
                yAxis: {
                    inverse:true,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        inside: true,
                        verticalAlign: 'bottom',
                        lineHeight: 40,
                        color: '#DDDFEB',
                        formatter: function (value, index) {   // 设置y轴文字的颜色
                          if (index > 9) {
                                return '{first|' (index+1)+ value + '}'
                            } else {
                                return	`{other| 0${(index+1)}}`+`{other1| ${value}}`
                                // return `{other| ${'0'+(index+1) + ' '+value}` 
                            }
                        },

字体设置 rich

 axisLabel: {
                        inside: true,
                        verticalAlign: 'bottom',
                        lineHeight: 40,
                        color: '#DDDFEB',
                        formatter: function (value, index) {   // 设置y轴文字的颜色
                          if (index > 9) {
                                return '{first|' (index+1)+ value + '}'
                            } else {
                                return	`{other| 0${(index+1)}}`+`{other1| ${value}}`
                                // return `{other| ${'0'+(index+1) + ' '+value}` 
                            }
                        },
                        rich: {
                            other: {
                                color: '#FF881E',
                                opacity: 0.57,
                                fontWeight:700,
                                fontSize:24
                            },
                            other1:{
                               
                            },
                            first: {
                                color: '#CFF0FD'
                            }
                        }
                    },

颜色渐变

 series: [{
                    name: '溯源扫码位置排行',
                    barWidth: 10,
                    type: 'bar',
                    data: this.xValue,
                    itemStyle: {
                        normal: {
                            borderRadius: [3, 20, 20, 3],
                            color: function (params) {   // 设置柱形图的颜色
                                console.log(params)
                                if (params.dataIndex === 0) {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {
                                            offset: 0,
                                            color: "rgba(196,196,196,0.1)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(196,196,196,0.9)",
                                        },
                                    ])
                                } else if (params.dataIndex === 1) {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {
                                            offset: 0,
                                            color: "rgba(255,136,30,0)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(255,136,30,0.9)",
                                        },
                                    ])
                                } else if (params.dataIndex === 2) {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {
                                            offset: 0,
                                            color: "rgba(198, 169, 108,0)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(198, 169, 108,0.9)",
                                        },
                                    ])
                                } else {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {
                                            offset: 0,
                                            color: "rgba(10, 165, 138, 0)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(10, 165, 138, 0.9)",
                                        },
                                    ])
                                }
                            }
                        },