echart图标区域背景

原创

于 2024-04-24 14:28:50 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #echarts

效果图：
在这里插入图片描述
代码实例：

     let option = {
   
   
        calculable: true,
        legend: {
   
   
          orient: 'vertical',
          top: '10%',
          left: 'right'
        },
        tooltip: {
   
   
          show: true,
          formatter: '{a} {b} : {c} '
        },
        xAxis: [
          {
   
   
            type: 'category',
            data: Array.from({
   
    length: 12 }).map((a, index) => `${
   
   index + 1}月`),
            axisLine: {
   
   
              //x轴线的颜色以及宽度
              show: true, //是否显示X轴
              lineStyle: {
   
   
                color: '#333'
              }
            },
            axisLabel: {
   
   
              // interval: 0,  //间隔几条显示
              // rotate: 20,  // 切斜度数
              fontSize: 12 //字体大小
            },
            axisTick: {
   
   
              //是否显示刻度线
              show: false
            }
          }
        ]