好看的Echarts柱状图系列（1）-圆顶，渐变色

低级前端

于 2024-07-25 16:02:14 发布

阅读量311

点赞数 1

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44632398/article/details/140692502

版权

在这里插入图片描述

const echartsInit = () => {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(TBLeftMinDom.value)
  // 指定图表的配置项和数据
  let option = {
    backgroundColor: "#111c4e",
    color: ['#3398DB'],
    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: {
      data: ['直接访问', '背景'],
      show: false
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '7%',
      height: '85%',
      containLabel: true,
      z: 22
    },
    xAxis: [{
      type: 'category',
      gridIndex: 0,
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],

      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        lineStyle: {
          color: '#0c3b71'
        }
      },
      axisLabel: {
        show: true,
        color: 'rgb(170,170,170)',
        fontSize: 16
      }
    }],
    yAxis: [{
      type: 'value',
      name: "单位:户",
      nameTextStyle: {
        color: "rgb(170,170,170)"
      },
      gridIndex: 0,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      // min: min,
      // max: 100,
      axisLine: {
        lineStyle: {
          color: '#0c3b71'
        }
      },
      axisLabel: {
        color: 'rgb(170,170,170)',
        formatter: '{value}'
      }
    },
    {
      type: 'value',
      gridIndex: 0,
      min: 1,
      max: 100,
      splitNumber: 12,
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
        }
      }
    }
    ],
    series: [{
      name: '合格率',
      type: 'bar',
      barWidth: '30%',
      xAxisIndex: 0,
      yAxisIndex: 0,
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [{
              offset: 0,
              color: '#00feff'
            },
            {
              offset: 0.5,
              color: '#027eff'
            },
            {
              offset: 1,
              color: '#0286ff'
            }
          ]
          )
        }
      },
      data: [1, 2, 3, 4],
      zlevel: 11

    },
    {
      name: '背景',
      type: 'bar',
      barWidth: '50%',
      xAxisIndex: 0,
      yAxisIndex: 1,
      barGap: '-135%',
      data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
      itemStyle: {
        normal: {
          color: 'rgba(255,255,255,0.1)'
        }
      },
      zlevel: 9
    },

    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}