Echarts 柱状图关于显示的各属性

最新推荐文章于 2025-05-30 08:59:48 发布

前路漫漫雨纷纷

最新推荐文章于 2025-05-30 08:59:48 发布

阅读量795

点赞数 3

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.youkuaiyun.com/xia_tian666/article/details/121905959

echarts 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何使用 ECharts 创建带有自定义样式的柱状图，包括x轴的分类、文字换行、y轴的配置以及阴影效果。同时展示了如何通过 formatter 函数自定义 x 轴标签显示，以及设置提示框显示合同数和占比。

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

效果图

echarts 代码

const option = {
        xAxis: {
          data: ['工程设计', '其他', '材料/设备换用'], //x轴值
          type: 'category',
          axisLine: { //x轴线
            lineStyle: {
              color: '#aad8f3',
              opacity: 0.19,
            },
          },
          axisLabel: { //x轴文本
            interval: 0,
            color: '#aad8f3',
            // 文字换行
            formatter(params) { //自定义显示内容，格式等
              let newParamsName = ''
              const paramsNameNumber = params.length
              const provideNumber = 4 // 一行显示几个字
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = ''
                  const start = p * provideNumber
                  const end = start + provideNumber
                  // eslint-disable-next-line eqeqeq
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = `${params.substring(start, end)}\n`
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          // min: 0, //y轴最小值
          // max: 60,//y轴最大值
          splitNumber: 5,//格数
          axisLine: { //y轴线
            show: true,
            lineStyle: {
              color: '#aad8f3',
              opacity: 0.19,
            },
          },
          axisLabel: { //y值颜色
            color: '#aad8f3',
          },
          axisTick: { //刻度条
            show: true,
            inside: true,
          },
          splitLine: { //显示横条
            show: false
          },
        },
        grid: { //j距离位置
          x: 50, //左
          y: 30,//上
          x2: 30, //右
          y2: 50,//下
        },
        tooltip: { //鼠标放入提示
          trigger: 'item',
          formatter(params) {
            return `
            合同数：${params.value} 占比：${rate[params.dataIndex]}%
            `
          }
        },
        series: [
        {
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal:{
            //柱状图的边角弧度
            barBorderRadius:4,//柱子弧度
            shadowColor: 'rgba(0,208, 232, 1)',
            shadowOffsetX: 0,//柱子阴影
            shadowOffsetY: 2,
              color: {
                // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 5,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                }, {
                    offset: 1, color: 'blue' // 100% 处的颜色
                }],

                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                // type: 'linear',
                // x: 10,
                // y: 10,
                // x2: 20,
                // y2: 21,
                // colorStops: [{
                //   offset: 1,
                //   color: 'rgba(0, 210, 233, 0.8)' // 0% 处的颜色
                // }, {
                //   offset: 0.5,
                //   color: 'rgba(0, 152, 220, 0.5)' // 100% 处的颜色
                // },{
                //   offset: 0,
                //   color: 'rgba(0, 152, 220, 0.8)' // 100% 处的颜色
                // }],

                globalCoord: false, // 缺省为 false
              } // 柱子颜色
            },
            
          },
          data:[2,1,1],
        }
      ],
      }

有不懂的可以留言

点个赞👍，谢谢