echart ——正负条形图

最新推荐文章于 2024-05-24 11:26:40 发布

ass_ace

最新推荐文章于 2024-05-24 11:26:40 发布

阅读量2.7k

点赞数 1

分类专栏： echarts 文章标签：动态设置bar到的渐变色，圆角

本文链接：https://blog.csdn.net/baidu_39067385/article/details/109903096

版权

本文介绍了如何使用ECharts来创建具有正负值的条形图，并且详细展示了如何动态设置条形图的渐变颜色和圆角效果。通过定义一个自定义函数，可以根据数据生成相应的图表配置，从而实现所需的效果。

摘要由CSDN通过智能技术生成

最近需要实现大致如图的图表效果，找了很多文章和官网配置说明最终版的配置如下：

可以通过定义一个函数，传入要展示在图表的数据，返回最终的图标配置如下，

export const echartoption1 = (yAxisdata: string[], seriesData: string[]) => {

  return {

    grid: {

      top: "0%",

      left: "3%",

      right: "4%",

      bottom: "2%",

      containLabel: true

    },

    xAxis: [

      {

        type: "value",

        show: false, //隐藏X轴

        min: Math.ceil(Math.min.apply(null, seriesData.map(Number))) - 25,

        max: Math.ceil(Math.max.apply(null, seriesData.map(Number))) + 25

      }

    ],

    yAxis: [

      {

        type: "category",

        axisTick: {

          show: false //隐藏刻度线

        },

        axisLine: {

          show: true