Echarts tooltip 样式

14 min read

Echarts tooltip 样式

option = {
  backgroundColor: '#11183c',
  grid: {
    left: '5%',
    right: '10%',
    top: '20%',
    bottom: '15%',
    containLabel: true
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器,坐标轴触发有效
      type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
    }
  },
  legend: {
    show: true,
    x: 'center',
    y: '35',

    icon: 'stack',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      color: '#1bb4f6'
    }
  },
  xAxis: [
    {
      name: '(时)',
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#fff'
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#195384'
        }
      },
      data: [
        '0',
        '2',
        '4',
        '6',
        '8',
        '10',
        '12',
        '14',
        '16',
        '18',
        '20',
        '22',
        '24'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '数量',

      axisLabel: {
        formatter: '{value}',
        textStyle: {
          color: '#fff'
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#fff'
        }
      }
    }
  ],
  series: [
    {
      type: 'line',
      stack: '总量',
      symbol: 'circle',
      smooth: true,
      symbolSize: 8,
      itemStyle: {
        normal: {
          color: '#0092f6',
          lineStyle: {
            color: '#68A9FE',
            width: 3
          },
          areaStyle: {
            //color: '#94C9EC'
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              },
              {
                offset: 1,
                color: 'rgba(0,146,246,0.9)'
              }
            ])
          }
        }
      },
      markPoint: {
        itemStyle: {
          normal: {
            color: 'red'
          }
        }
      },
      data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330, 41]
    }
  ]
};

shadow

image-20220427165612346

line

image-20220427165556600