Echarts圖表參數配置

一 柱狀圖

1.去掉刻度和軸線

效果圖:
在這裏插入圖片描述
代碼:

xAxis: {
  show: false, // 是否顯示軸
},
yAxis: {
  axisLine: {
    show: false, // 線
  },
  axisTick: {
    show: false, // 刻度
  },
},

2.值顯示在圖形上&不同顏色

series: [
  {
    barWidth: '70%', // 寬度
    label: {
      normal: {
        position: 'insideLeft', // 內含,靠左
      },
    },
    itemStyle: {
      normal: {
        color: function(params) {
          return that.colorList[params.dataIndex]; // 顯示不同顏色
        },
      },
    },
  },
],

3.文字超出截取

效果圖:
在這裏插入圖片描述
代碼:

xAxis: {
  axisLabel: {
    formatter: (e) => e.replace(/(.{4})/g, '$1\n'), // 4個字就換行 {}一般用來表示匹配的長度
  },
},

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章