首页 前端知识 echarts柱状图属性

echarts柱状图属性

2024-08-19 22:08:57 前端知识 前端哥 396 521 我要收藏

总结开发中遇到的echart柱状图的属性:

1、图例间距

legend: {
          left: "center",
          top: 225,
          type: "scroll",
          itemGap: 40, //间距
        },

2、柱子的宽度

            barWidth: 14,

 3、柱子的圆角和渐变色(见上图 ↑ )

        itemStyle: {
              barBorderRadius: [11, 11, 0, 0],//圆角
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "#63c082", // 0% 处的颜色
                  },

                  {
                    offset: 1,
                    color: "#a4d8b3", // 100% 处的颜色
                  },
                ],
              },
            },

4、加背景色

            showBackground: true,

5、数值显示的位置

label: {
              show: true,
              position: "right",
            },

6、隐藏x轴刻度线

 axisTick: {
            show: false, //隐藏x轴刻度线
          },

7、双y轴隐藏某一个轴横线

yAxis: [
          {
            type: "value",
            show: true,
            name: "单位:个",
            axisTick: {
              show: false, //刻度线
            },
            axisLine: {
              show: false, //隐藏y轴
            },
          },
          {
            type: "value",
            name: "单位:%",
            min: 0,   //设置最大最小值和间隔,y轴右侧显示数值
            max: 100,
            splitNumber: 10,
            axisTick: {
              show: false, //刻度线
            },
            axisLine: {
              show: false, //隐藏y轴
            },
            splitLine: {
              show: false, //隐藏y轴横线
            },
          },
        ],

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16250.html
标签
评论
发布的文章

php保存

2024-08-27 16:08:00

jQuery NiceScroll 插件

2024-08-27 09:08:49

vue echart4.0 按需引入

2024-08-27 09:08:28

Taro3 Vue3使用echarts

2024-08-27 09:08:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!