Echarts 柱状图带虚线网格线柱状渐变色柱状阴影区

最新推荐文章于 2024-04-06 21:02:16 发布

Windyluna

最新推荐文章于 2024-04-06 21:02:16 发布

阅读量2.1k

点赞数

分类专栏： Echarts 文章标签： echarts

原文链接：https://blog.csdn.net/qq_40295815/article/details/107361447

版权

Echarts 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

柱状图背景阴影

效果图：
在这里插入图片描述

实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <div class="lines">
      <div id="farmtotel" style="width: 100%; height: 240px"></div>
    </div>
  </body>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
  <script type="text/javascript">
    // 指定图表的配置项和数据
    let myChart = echarts.init(document.getElementById('farmtotel'))
    var data = [
      {
        month: '1月',
        value: 2100,
      },
      {
        month: '2月',
        value: 280,
      },
      {
        month: '3月',
        value: 1010,
      },
      {
        month: '4月',
        value: 1500,
      },
      {
        month: '5月',
        value: 800,
      },
    ]
    var xData = [],
      yData = []
    var min = 0
    data.map(function (a, b) {
      xData.push(a.month)
      if (a.value === 0) {
        yData.push(a.value + min)
      } else {
        yData.push(a.value)
      }
    })
    console.log('xData', xData)
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            opacity: 0,
          },
        },
        formatter: function (prams) {
          // 设置判断，避免柱状阴影的数值显示出来
          if (prams[0].data === min) {
            return '种植规模：0'
          } else {
            return '种植规模：' + prams[0].data
          }
        },
      },
      legend: {
        show: false,
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '20%',
        containLabel: true,
        z: 22,
      },
      xAxis: [
        {
          type: 'category',
          gridIndex: 0,
          data: xData,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: '#333',
            fontSize: 16,
          },
        },
      ],

      yAxis: [
        {
          type: 'value',
          name: '亩',
          nameTextStyle: {
            color: '#333',
          },
          gridIndex: 0,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: '#333',
            formatter: '{value}',
          },
        },
        {
          type: 'value',
          gridIndex: 0,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#315070'],
              width: 1,
              type: 'dashed',
            },
          },
          axisLabel: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '种植规模',
          type: 'bar',
          barWidth: '18%',
          data: yData,
          zlevel: 11,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255,224,102,1)' }, //柱图高亮渐变色
                { offset: 1, color: 'rgba(255,224,102,0.5)' }, //柱图高亮渐变色
              ]),
            },
          },
        },
        {
          name: '',
          type: 'bar',
          barWidth: '30%',
          xAxisIndex: 0,
          yAxisIndex: 1,
          barGap: '-135%',
          data: [100, 100, 100, 100, 100],
          itemStyle: {
            normal: {
              // color: 'rgba(255,255,255,0.1)',
              color: 'rgba(0,0,0,0.1)',
            },
          },
          zlevel: 9,
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //浏览器大小调整echarts随之改变
      myChart.resize()
    })
  </script>
</html>

Windyluna

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts 柱状图带虚线网格线柱状渐变色柱状阴影区

柱状图背景阴影效果图：实现：<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <div class="lines"> <div id="farmtotel" style="width: 100%; height: 24
复制链接

扫一扫