内容提交

longyvfengyun

2023-11-17 14738594692929f696eab3b2726547659506baf7

 src/components/echarts/options/gradientLine.js

@@ -1,7 +1,14 @@
import * as echarts from 'echarts';
const getGradientLineOption = ()=> {
const getGradientLineOption = (data)=> {
  const defaultOption = {
    minRatio: 0,
    maxRatio: 1.2
  };
  const option = {...defaultOption, ...data};
  return {
    tooltip: {},
    tooltip: {
      trigger: "item",
    },
    grid: {
      top: '10%',
      left: '1%',
@@ -12,54 +19,59 @@
    legend: {
      show: false,
    },
    xAxis: [{
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
      axisLine: {
        lineStyle: {
          color: '#f9f9f9'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', ],
    }],
    yAxis: [{
      type: 'value',
      min: 0,
      // max: 140,
      splitNumber: 7,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3256'
          color: 'rgba(255,255,255,0.12)'
        }
      },
      axisLabel: {
        margin: 10,
        color: '#e2e9ff',
        textStyle: {
          fontSize: 14
        },
      },
    },
    yAxis: {
      type: 'value',
      min(data) {
        const min =data.min;
        if(isNaN(min)) {
          return 0;
        }else {
          return (min * option.minRatio).toHold(0);
        }
      },
      max(data) {
        const max = data.max;
        if(isNaN(max)) {
          return 1;
        }else {
          return (max * option.maxRatio).toHold(0);
        }
      },
      axisLabel: {
        formatter: '{value}',
        color: '#e2e9ff',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#d1e6eb',

        },
      },
      axisTick: {
        show: false,
      },
    }],
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      }
    },
    series: [
      {
        name: '注册总量',
        name: '',
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        //          symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
@@ -73,7 +85,7 @@
          borderColor: '#f0f'
        },
        label: {
          show: false,
          show: true,
          position: 'top',
          textStyle: {
            color: '#fff',
@@ -84,9 +96,6 @@
            color: "#28ffb3",

          }
        },
        tooltip: {
          show: false
        },
        areaStyle: { //区域填充样式
          normal: {
@@ -104,7 +113,7 @@
            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        data: [393, 438, 485, 631, 689, 824, 987]
        data: [[ "1", 393], [ 2, 393], 485, 631, 689, 824, 987]
      },
    ]
  }