DashChart组件使用

引入

  1. import Vue from 'vue'
  2. import {GradientDashChart} from 'special-ui'
  3. Vue.use(GradientDashChart)

使用

  1. <template>
  2. <div class="container">
  3.     <gradient-dash-chart
  4.         :direction="'y'"
  5.         :dataset="dataset"
  6.         :axisArr="axisArr"
  7.         :width="770"
  8.         :height="400"
  9.         :axisNum="config.axisNum"
  10.         :tickSizeInner="config.tickSizeInner"
  11.         :axisColor="config.axisColor"
  12.         :xAxisTextSize="config.xAxisTextSize"
  13.         :yAxisTextSize="config.yAxisTextSize"
  14.         :axisTextColor="config.axisTextColor"
  15.         :textStyle="config.textStyle"
  16.         :dash="config.dash"
  17.         :padding="config.padding"/>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22.     data () {
  23.         return {
  24.             dataset: [22, 40, 60, 80, 45, 32, 18],
  25.             axisArr: ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06', '06-07'],
  26.             config: {
  27.                 dash: [30, 10, 5],
  28.                 padding: {
  29.                     top: 5,
  30.                     bottom: 35,
  31.                     left: 70,
  32.                     right: 0
  33.                 },
  34.                 axisNum: 4,
  35.                 axisColor: '#0B4665',
  36.                 xAxisTextSize: '24px',
  37.                 yAxisTextSize: '18px',
  38.                 tickSizeInner: 3,
  39.                 axisTextColor: '#276F99',
  40.                 textStyle: {
  41.                     fontSize: '24px',
  42.                     color: '#E6FFEF',
  43.                     dx: 0,
  44.                     dy: -20
  45.                 }
  46.             }
  47.         }
  48.     },
  49. }
  50. </script>
  51. <style lang="scss" scoped>
  52. .container {
  53.   height: 100%;
  54. }
  55. </style>

组件参数

属性 说明 默认值
dataset 统计数据数组 []
direction 主轴方向 y
axisArr 副轴显示 []
width 画布宽度 600
height 画布高度 400
formColor 渐变开始颜色 ‘#0B3C65’
toColor 渐变结束颜色 ‘#37C6EA’
lastColor 渐变结束颜色 ‘#ffffff’
dash 柱状图宽、高度和间隔 [10, 25, 5]
axisNum 副轴显示个数 5
tickSizeInner 坐标轴内刻度 0
tickSizeOuter 坐标轴外刻度 0
axisColor 坐标轴颜色 ‘#666’
axisTextColor 坐标轴文本颜色 ‘#333’
xAxisTextColor x坐标轴文本颜色 ‘’, 同时存在axisTextColor和xAxisTextColor,xAxisTextColor优先级更高
yAxisTextColor y坐标轴文本颜色 ‘’, 同时存在axisTextColor和yAxisTextColor,yAxisTextColor优先级更高
axisTextSize 坐标轴文本大小 ‘14px’
xAxisTextSize x坐标轴文本大小 ‘’, 同时存在axisTextSize和xAxisTextSize,xAxisTextSize优先级更高
yAxisTextSize y坐标轴文本大小 ‘’, 同时存在axisTextSize和yAxisTextSize,yAxisTextSize优先级更高
padding 内间距 {top: 60, bottom: 60, left: 60, right: 60}
textStyle 文本样式 {fontSize: ‘14px’,color: ‘#333333’,dx: 5,dy: -15}

textStyle属性说明:
fontSize: 字体大小
color: 字体颜色
dx: 文本偏移量x方向
dy: 文本偏移量y方向