echarts折线图设置背景颜色


    initChartsBox() {
      this.option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 方法一
            type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
            shadowStyle: {
              color: "rgba(41, 95, 204, 0.2)",
            },
          },
          borderColor: "rgba(0, 170, 255)", // 边框颜色
        }, // 坐标轴指示器配置
        textStyle: {
          color: "#333", // xy轴的提示文字颜色,不包含背景刻度线
        },
        color: ["#1492FF"],
        grid: {
          top: "25px",
          left: "50px",
          right: "20px",
          bottom: "35px",
        },
        xAxis: [
          {
            type: "category",
            data: this.chartsData.time,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#004080",
                // width: 0,
                // type: "solid",
              }, // x轴线的颜色以及宽度
            },
            // axisLabel: {
            //   show: true,
            //   textStyle: {
            //     color: "rgba(255, 255, 255, 0.3)",
            //   }
            // }, // x轴文字的配置
            splitLine: {
              show: false,
              lineStyle: {}, // 分割线配置
            },
            axisTick: {
              show: false,
            }, // x轴的刻度线
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#333",
                opacity: 0.1,
              }, // 设置横向的线的颜色
            },
            axisLabel: {
              show: true,
              margin: 20,
              // textStyle: {
              //   color: "rgba(255, 255, 255, 0.3)",
              // }, // y轴的字体配置
            },

            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  'rgba(21, 190, 80, 0.1)',
                  'rgba(109, 217, 147, 0.1)',
                  'rgba(245, 221, 102, 0.11)',
                  'rgba(255, 107, 0, 0.1)',
                  'rgba(212, 0, 0, 0.1)',
                ]
              }
            }

          },
        ],
        series: [
          {
            data: this.chartsData.roadNorm,
            type: "line",
            smooth: true,
            symbolSize: 0, // 设置圆点大小为 0,即不显示圆点
          },
        ],
      };
      this.myChart = this.$echarts.init(document.getElementById("chartsBox")); // 图标初始化
      this.myChart.setOption(this.option); // 渲染页面
      var that = this;
      let index = 0;
      this.eChartsTimer = setInterval(function () {
        let len = that.chartsData.time.length;
        if (index >= len) {
          index = 0;
        }
        that.myChart.dispatchAction({
          type: "showTip", // 提示框
          seriesIndex: 0,
          dataIndex: index, // 第 lightIndex 柱子高亮
        });
        index += 1
      }, 1000);

      /* ECharts动态效果 */
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值