echarts-line

<template>
  <div id="SignContract">

  </div>
</template>

<script>
import echarts from 'echarts'
  export default {
    data() {
      return {
      }
    },
    mounted () {
      let obj = 
        {
          name: "签约人数",
          xList: ["10/17", "10/18", "10/19", "10/20", "10/21", "10/22", "10/23"],
          yList: [100, 200, 350, 400, 550, 600, 700],
          today: "132",
          total: "1203",
          color: "rgba(26, 134, 255, 1)",
          transparent: "rgba(26, 134, 255, 0)",
        }
      this.getSignContract(obj)
    },
    methods: {
      getSignContract(data){
        let mydpc = echarts.init(document.getElementById('SignContract'))
        mydpc.setOption({
          grid: {
            top: "10%",
            left: "15%",
            right: "5%",
            bottom: "20%",
          },
          xAxis: [
            {
              type: "category",
              axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  color: '#F0F4F7',// "#AAAEB3",
                },
              },
              axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                  color: "#AAAEB3",
                  fontSize: 12,
                },
                formatter: function (data) {
                  return data;
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#192a44",
                },
              },
              axisTick: {
                show: false,
              },
              data: data.xList,
            },
          ],
          yAxis: [
            {
              type: "value",
              nameTextStyle: {
                color: "#AAAEB3",
                fontSize: 12,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#F0F4F7",
                },
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#AAAEB3",
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#AAAEB3",
                },
                formatter: function (value) {
                  if (value === 0) {
                    return value;
                  }
                  return value;
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: data.name,
              type: "line",
              symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              smooth: false,
              lineStyle: {
                normal: {
                  width: 1,
                  color: '#5B8FF9', // 线条颜色
                },
              },
              itemStyle: {
                color: "rgba(10,219,250,1)",
                borderColor: "#646ace",
                borderWidth: 1,
              },
              tooltip: {
                show: true,
              },
              stack: "Total",
              areaStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: data.color, // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: data.transparent, // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },

              data: data.yList,
            },
          ],
        })
      },
    },
  }
</script>

<style lang="stylus" scoped>
#SignContract{
  width: 100%;
  height: 100%;
}

</style>