vue的Echarts折线图怎么设置阴影颜色

14 篇文章 0 订阅
1 篇文章 0 订阅

效果图
在这里插入图片描述

主要是series里面的参数

 series: [
    {
      name: 'Fake Data',
      type: 'line',
      smooth: true,
      stack: 'a',
      symbol: 'circle',
      symbolSize: 5,
      sampling: 'average',
      itemStyle: {
        color: '#F2597F'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(213,72,120,0.8)'
          },
          {
            offset: 1,
            color: 'rgba(213,72,120,0.3)'
          }
        ])
      },
      data: [1, 2, 3, 4, 5, 6, 7]
    }
  ]

这里是整个页面的构建,

<template>
  <div class="MonthTraining">
    <div id="MonthTraining"></div>
  </div>
</template>

<script>
export default {
  props: {
    subjectData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      data: [],
      charts: {},
      chartyDiv: {},
      option: {},
      subjectList: [],
      subjectCount: [],
    };
  },
  created() {
    console.log(this.subjectData, "打印科目");
    // this.initSubject();
  },
  mounted() {
    this.init();
    console.log(this.data, "打印data");
  },
  methods: {
    init() {
      this.chartyDiv = document.getElementById("container");
      this.myChart = this.$echarts.init(this.chartyDiv);
      this.option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Fake Data",
            type: "line",
            smooth: true,
            stack: "a",
            symbol: "circle",
            symbolSize: 5,
            sampling: "average",
            itemStyle: {
              color: "#F2597F",
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(213,72,120,0.8)",
                },
                {
                  offset: 1,
                  color: "rgba(213,72,120,0.3)",
                },
              ]),
            },
            data: [1, 2, 3, 4, 5, 6, 7],
          },
        ],
      };
      this.myChart.setOption(this.option);
    },
    initData() {},
  },
};
</script>

<style>
</style>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值