Echarts 取消柱状图坐标轴线、设置不同颜色、

谁借莪１个温暖的怀抱￠ 2022-09-05 00:21 385阅读 0赞

取消柱状图坐标轴线 splitLine

  1. xAxis: { 
  2.   type: 'value',
  3.   boundaryGap: [0, 0.01],
  4.   // 取消坐标线
  5.   splitLine: { 
  6.     show: false
  7.   },
  8.   axisLabel: { 
  9.     show: true,
  10.     textStyle: { 
  11.       // color: '#c3dbff', //更改坐标轴文字颜色
  12.       // fontSize : 12 //更改坐标轴文字大小
  13.     }
  14.   }
  15. },
  17. yAxis: { 
  18.   type: 'category',
  19.   data: ['黄色预警', '红色预警'],
  20.   // 取消坐标线
  21.   // show: false,
  22.   splitLine: { 
  23.     show: false,
  24.   },
  25.   axisLabel: { 
  26.     show: true,
  27.     textStyle: { 
  28.       // color: '#c3dbff', //更改坐标轴文字颜色
  29.       // fontSize : 12 //更改坐标轴文字大小
  30.     }
  31.   }
  32. },

设置不同颜色

  1. series: [
  2.   { 
  3.     type: 'bar',
  4.     data: [18203,52563],
  5.     itemStyle: { 
  6.       normal: { 
  7.         color: function(params) { 
  8.           //首先定义一个数组，设置颜色
  9.           let colorList = ['#D8E500','#AD4D36']; // 颜色
  10.           return colorList[params.dataIndex]
  11.         },
  12.         // 柱状图上显示数量
  13.         label: { 
  14.           show: true, // 是否显示
  15.           // position: 'right' // 位置
  16.           formatter: '{@value}', // 内容
  17.           color: '#fff' // 文字颜色
  18.         }
  19.       }
  20.     },
  21.   },
  22. ],

发表评论

表情：
评论列表 （有 0 条评论，385人围观）

还没有评论，来说两句吧...

相关阅读