iep-ui/es/solid-bar-chart/main.js

An enterprise-class UI design language and Vue-based implementation

import _extends from 'babel-runtime/helpers/extends';
import PropTypes from '../_util/vue-types';
import ChartTemplate from '../chart-template';
import { mergeProps } from '../_util/props-util';
import { omit } from 'lodash';
import colorUtils from '../toolkits/colorUtils';

export default {
  name: 'IepSolidBarChart',
  props: mergeProps({
    xData: PropTypes.array.def(function () {
      return [];
    }),
    yData: PropTypes.array.def(function () {
      return [];
    }),
    barWidth: PropTypes.number.def(20),
    color: PropTypes.array.def(function () {
      return ['#65EDFF', '#0077EA'];
    }),
    theme: PropTypes.oneOf(['dark', 'light']).def('dark'),
    mixinOptions: PropTypes.object.def(function () {})
  }, ChartTemplate.props),
  render: function render() {
    var h = arguments[0];
    var _$props = this.$props,
        xData = _$props.xData,
        yData = _$props.yData,
        mixinOptions = _$props.mixinOptions,
        theme = _$props.theme,
        color = _$props.color,
        barWidth = _$props.barWidth;

    var colors = {
      type: 'linear',
      x: 0,
      x2: 1,
      y: 0,
      y2: 1,
      colorStops: [{
        offset: 0,
        color: color[0]
      }, {
        offset: 1,
        color: color[1]
      }, {
        offset: 0,
        color: color[0]
      }, {
        offset: 1,
        color: color[1]
      }]
    };
    var barColors = {
      type: 'linear',
      x: 1,
      x2: 0,
      y: 0,
      y2: 0,
      colorStops: [{
        offset: 1,
        color: color[0]
      }, {
        offset: 0,
        color: color[0]
      }, {
        offset: 0,
        color: color[0]
      }, {
        offset: 0,
        color: color[1]
      }]
    };
    var props = _extends({}, omit(this.$props, ['xData', 'yData', 'options', 'mixinOptions', 'theme', 'color']), {
      options: _extends({
        grid: {
          containLabel: true,
          left: 0,
          right: 0,
          bottom: 0,
          top: '3%'
        },
        xAxis: {
          axisLabel: {
            color: theme === 'dark' ? '#888' : '#999999',
            fontSize: 12,
            interval: 0
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
              width: 1
            },
            show: true
          },
          data: xData,
          type: 'category'
        },
        yAxis: {
          axisLabel: {
            color: theme === 'dark' ? '#888' : '#999999',
            fontSize: 12
          },
          splitLine: {
            show: theme === 'light',
            lineStyle: {
              color: theme === 'dark' ? '#fff' : 'rgba(153, 153, 153, 0.3)',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
              width: 1
            },
            show: true
          }
        },
        series: [{
          data: yData,
          type: 'bar',
          barWidth: barWidth,
          itemStyle: {
            normal: {
              color: colors
            }
          },
          label: {
            show: true,
            position: 'top',
            distance: 10,
            color: theme === 'dark' ? '#fff' : '#333333'
          }
        }, {
          data: yData,
          type: 'bar',
          barWidth: 1.8,
          barGap: '-52%',
          itemStyle: {
            normal: {
              color: barColors
            }
          }
        }, {
          z: 3,
          type: 'pictorialBar',
          symbolPosition: 'end',
          data: yData,
          symbol: 'diamond',
          symbolOffset: ['24%', '-50%'],
          symbolSize: [barWidth, barWidth / 2],
          itemStyle: {
            normal: {
              color: colorUtils.lighten(color[1], 0.46)
            }
          }
        }],
        tooltip: {
          trigger: 'axis',
          formatter: '{b} : {c}',
          axisPointer: {
            type: 'shadow'
          }
        }
      }, mixinOptions)
    });
    return h(ChartTemplate, { props: props });
  }
};