dvcp_v2_webapp/ui/dv/AiEchart/template/line.js

import tools from "./tools";

export const lineChart1 = {
  legend: {show: false},
  grid: {
    left: 50,
    right: 0
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(14, 51, 111, 0.9)',
    borderColor: '#1A6ABC',
    textStyle: {color: '#fff'},
    axisPointer: {type: 'cross'}
  },
  yAxis: {
    nameGap: 23,
    minInterval: 1,
    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
    axisLabel: {color: '#fff'},
    axisPointer: {snap: true}
  },
  daemon: (color) => ({
    type: "line",
    showSymbol: false,
    smooth: true,
    lineStyle: {
      shadowBlur: 4,
      shadowOffsetY: 2,
      width: 2
    },
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        x2: 0,
        y: 0,
        y2: 1,
        colorStops: [
          {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.3)},
          {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.1)}
        ]
      }
    }
  })
};
export const lineChart2 = {
  legend: {
    right: 0, itemGap: 16,
    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
  },
  grid: {
    left: 50, right: 0
  },
  tooltip: {
    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
    textStyle: {color: '#fff'}
  },
  daemon: color => ({
    type: "line",
    showSymbol: false,
    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
    areaStyle: {
      color: {
        type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
          {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
          {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
        ]
      }
    }
  })
};
export const lineChart3 = {
  // legend: {
  //   right: 0, itemGap: 16,
  //   textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
  // },
  grid: {
    left: 50, right: 0
  },
  tooltip: {
    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
    textStyle: {color: '#fff'}
  },
  daemon: {
    type: "line",
    smooth: true,
    lineStyle: {
      shadowBlur: 1,
      shadowOffsetY: 2,
      width: 3
    }
  }
};
export const lineChart4 = {
  legend: {
    right: 0, itemGap: 16,
    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
  },
  grid: {
    left: 50, right: 0
  },
  tooltip: {
    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
    textStyle: {color: '#fff'}
  },
  daemon: {
    type: "line",
    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
    emphasis: {
      focus: 'self'
    }
  }
};
export const lineChart5 = {
  legend: {show: false},
  grid: {
    left: 50, right: 0, top: 10, bottom: 30
  },
  tooltip: {
    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
    textStyle: {color: '#fff'},
    axisPointer: {type: 'cross'}
  },
  yAxis: {
    nameGap: 23, minInterval: 1,
    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
    axisLabel: {color: '#fff'},
    axisPointer: {snap: true}
  },
  daemon: color => ({
    type: "line",
    showSymbol: false, smooth: true,
    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
    areaStyle: {
      color: {
        type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
          {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
          {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
        ]
      }
    }
  })
};


export default {
  lineChart1,
  lineChart2,
  lineChart3,
  lineChart4,
  lineChart5,
}