Vue3 ECharts 使用柱状图实现渐变色的尖峰状 - 附完整示例

<template>
  <div id="peakShapeMain"></div>
</template>

<script lang="ts" setup>
  import * as echarts from "echarts";

  initChart() {
    let chartDom = document.getElementById("peakShapeMain");
    let myChart = echarts.init(chartDom);
    let option;

    ...详见完整示例   
  };
</script>

<style lang="scss" scoped>
#datasetMain {
  width: 400px;
  height: 300px;
}
</style>

3、数据处理（关键点）

1）尖峰状

series: [
  {
    type: 'pictorialBar',
    barCategoryGap: '20%', /* 设置柱子之间的间距 */
    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
    ...详见完整示例
  },
],

https://echarts.apache.org/zh/option.html#series-pictorialBar.type

2）渐变色

series: [
  {
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: '#00B2FF',
        },
        {
          offset: 0.5,
          color: '#00B2FF',
        },
        {
          offset: 1,
          color: '#041A44',
        },
      ]),
    },
  },
  ...详见完整示例
],

四、完整示例

<template>
  <div id="peakShapeMain"></div>
</template>

<script lang="ts" setup name="peakShape">
import * as echarts from "echarts";
import { onMounted, nextTick } from "vue";

const initChart = () => {
  let chartDom = document.getElementById("peakShapeMain");
  let myChart = echarts.init(chartDom);
  let option;

  const xdata = ['一组', '二组', '三组', '四组','五组', '六组'];
  const data = [150, 180, 210, 196, 203, 168];

  option = {
    tooltip: {
      confine: true,
      trigger: 'axis',
      backgroundColor: 'rgba(17, 25, 40, 0.9)',
      borderColor: 'rgba(255, 255, 255, 0.1)',
      borderWidth: 1,
      textStyle: {
        color: '#FFFFFF',
        fontSize: 12,
      },
    },
    grid: {
      top: '15%',
      left: '8%',
      right: '12%',
      bottom: '8%',
      containLabel: true,
    },
    xAxis: {
      data: xdata,
      triggerEvent: true,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        rotate: 0,
        interval: 0,
        textStyle: {
          fontSize: 11,
          color: '#FFFFFF',
        },
      },
    },
    yAxis: {
      name: '单位：次',
      nameTextStyle: {
        color: '#FFFFFF',
        fontSize: 12,
        padding: [0, 30, 0, 0],
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#182740',
          type: 'solid',
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 12,
          color: '#FFFFFF',
        },
      },
    },
    series: [
      {
        name: '迟到次数', 
        type: 'pictorialBar',
        barCategoryGap: '20%', /* 设置柱子之间的间距 */
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#00B2FF',
            },
            {
              offset: 0.5,
              color: '#00B2FF',
            },
            {
              offset: 1,
              color: '#041A44',
            },
          ]),
        },
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 15,
          },
        },
        data,
      },
    ],
  }

  option && myChart.setOption(option);
}

onMounted(async() => {
  await nextTick()
  initChart()
})

</script>

<style scoped>
#peakShapeMain {
  width: 400px;
  height: 300px;
  background-color: #081326;
}
</style>

欢迎关注VX公众号：前端小知识营地

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

依靠自研AI智能体 Ignition (闭源) 初创公司10小时搭建类CUDA软件事件四家厂商自动算子/类CUDA构建方案横向对比表

10小时搭建类CUDA底座，并没有颠覆CUDA，但击穿了英伟达最外围的生态壁垒。过去新芯片想要活下去，必须砸重金养几十上百人的底层软件团队；现在依靠AI Agent，初创芯片企业十几小时就能让芯片发挥九成算力，极大降低AI芯片赛道的生态入场门槛，会加速全球异构算力时代到来。如果你需要，我可以补充：昇腾、壁仞、AMD当前自动算子方案和Ignition的横向对比表格。

AI Agent技术社区

MCP协议开发实战：从零搭建AI Agent工具链

MCP（Model Context Protocol）是Anthropic推出的AI工具标准化协议，旨在解决AI Agent工具调用的碎片化问题。本文系统介绍了MCP的开发实践：核心概念：采用Client-Server架构，通过JSON-RPC 2.0实现资源(Resources)、提示模板(Prompts)和工具(Tools)的标准化交互开发流程：从环境搭建到工具实现，演示了文件管理、网络搜