echarts 设置柱状图边框颜色

最新推荐文章于 2024-05-30 23:16:00 发布

超级无敌小小小白

最新推荐文章于 2024-05-30 23:16:00 发布

阅读量1k

点赞数 5

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

本文链接：https://blog.csdn.net/SM_Cute/article/details/136237369

版权

Echarts 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细描述了一个ECharts图表的配置选项，包括tooltip的定制、颜色渐变在轴线和图形上的应用，以及数据系列（bar）的样式设置。

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

代码如下：

this.options = {
  tooltip: {
    trigger: "axis",
    textStyle: {
      align: "left",
    },
    className: "custom-tooltip-box",
    formatter: function (params) {
      return `<div class='custom-tooltip-style'>
        <div class='title'>
          <span>${params[0].name}年</span>
        </div>
        <div class="span">
          <div class="content">
            <span>合同金额:</span>
            <span>${params[0].value}万元</span>
          </div>
        </div>
      </div>`;
    },
  },
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
      offset: 0,
      color: "rgba(4,180,53,0)", // 0% 处的颜色
    },
    {
      offset: 1,
      color: "#3CD783", // 100% 处的颜色
    },
  ]),
  grid: {
    top: "26%",
    bottom: "0%",
    right: "8%",
    left: "8%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: this.xAxisData,
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 12,
        textStyle: {
          color: "#ffffffcc"
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#355d8d",
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: '单位：万元',
      nameTextStyle: {
        fontSize: this.handleWidth(12),
        color: "#FFFFFF99",
        padding: [0, 18, 10, 0]
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#87C2FF",
          width: 1, //这里是为了突出显示加上的
        },
      },
      axisLabel: {
        formatter: function (val) {
          return val + "";
        },
        show: true,
        margin: 8,
        fontSize: 12,
        textStyle: {
          color: "#FFFFFF99", //字体颜色
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#87C2FF66",
          width: 0.7,
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      type: "bar",
      // name: this.legendData[0],
      barWidth: 20,
      itemStyle: {
        borderWidth: 2,
        borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#3FFF8C", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#FBFFFA", // 100% 处的颜色
          },
        ])
      },
      areaStyle: {
        normal: {
          //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#3CD783", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(4,180,53,0)", // 100% 处的颜色
            },
          ])
        }
      },
      data: this.echartData
    }
  ]
};