some modify

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 /.svn
+/DataV
 
 # local env files
 .env.local
@@ -20,3 +21,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+

src/components/polylineChart/index.vue

@@ -1,304 +1,230 @@
 <template>
   <div class="polyline-chart">
+    <loading v-if="!data" />
+
     <div class="canvas-container">
       <canvas :ref="ref" />
     </div>
 
-    <loading v-if="!data" />
+    <label-line :label="data.labelLine" :colors="drawColors" />
 
-    <div v-if="data.labelLine" class="label-line">
+    <for-slot><slot></slot></for-slot>
-      <div class="label-item" v-for="(label, i) in data.labelLine" :key="label + i">
-        <div :style="`background-color: ${data.color[i % data.color.length]};`"></div>
-        <div>{{ label }}</div>
-      </div>
-    </div>
-
-    <div class="for-slot">
-      <slot></slot>
-    </div>
   </div>
 </template>
 
 <script>
+import colorsMixin from '../../mixins/colorsMixin.js'
+
+import canvasMixin from '../../mixins/canvasMixin.js'
+
+import axisMixin from '../../mixins/axisMixin.js'
+
 export default {
   name: 'PolylineChart',
-  props: ['data'],
+  mixins: [colorsMixin, canvasMixin, axisMixin],
+  props: ['data', 'colors'],
   data () {
     return {
       ref: `polyline-chart-${(new Date()).getTime()}`,
-      canvasDom: '',
-      canvasWH: [0, 0],
-      ctx: '',
 
-      defaultFontSize: 10,
+      // axis base config
-      defaultAxisColor: 'rgba(250, 250, 250, 0.25)',
+      boundaryGap: false,
+      mulValueAdd: false,
+      horizon: false,
 
-      xAxisData: [],
+      defaultLineDash: [10, 5],
-      yAxisData: [],
+      defaultPointRadius: 2,
-      axisWH: [],
+
-      axisOriginPos: [],
+      defaultValueFontSize: 10,
-      yAxisMinMax: [],
+      defaultValueColor: '#999',
-      rowColumnSize: [],
+
-      valuePointsData: []
+      valuePointPos: []
     }
   },
   watch: {
-    data (d) {
-      const { init } = this
-
-      d && init()
-    }
   },
   methods: {
-    init () {
+    async init () {
-      const { $nextTick, initCanvas, data, draw } = this
+      const { initCanvas, initColors } = this
 
-      $nextTick(e => {
+      await initCanvas()
-        initCanvas()
 
-        data && draw()
+      initColors()
-      })
-    },
-    initCanvas () {
-      const { $refs, ref, canvasWH } = this
 
-      const canvas = this.canvasDom = $refs[ref]
+      const { data, draw } = this
 
-      canvasWH[0] = canvas.clientWidth
+      data && draw()
-      canvasWH[1] = canvas.clientHeight
-
-      canvas.setAttribute('width', canvasWH[0])
-      canvas.setAttribute('height', canvasWH[1])
-
-      this.ctx = canvas.getContext('2d')
     },
     draw () {
-      const { ctx, canvasWH, getXAxisData, getYAxisData, calcAxisPos, drawAxis } = this
+      const { clearCanvas } = this
 
-      ctx.clearRect(0, 0, ...canvasWH)
+      clearCanvas()
 
-      getXAxisData()
+      const { initAxisConfig, initAxis, drawAxis } = this
 
-      getYAxisData()
+      initAxisConfig()
 
-      calcAxisPos()
+      initAxis()
 
       drawAxis()
 
-      const { calcValuePointsData, drawValueColumn, drawValuePolyline } = this
+      const { calcValuePointPos, drawLines, drawFills } = this
 
-      calcValuePointsData()
+      calcValuePointPos()
 
-      drawValueColumn()
+      drawLines()
 
-      drawValuePolyline()
+      drawFills()
 
-      const { drawValuePoints, fillLineColor } = this
+      const { drawPoints, drawValues } = this
 
-      fillLineColor()
+      drawPoints()
 
-      drawValuePoints()
+      drawValues()
     },
-    getXAxisData () {
+    initAxisConfig () {
-      const { data: { x: { data } } } = this
+      const { data: { boundaryGap } } = this
 
-      this.xAxisData = data
+      this.boundaryGap = boundaryGap
     },
-    getYAxisData () {
+    calcValuePointPos () {
-      let { data: { data, y: { data: yAxisData, max, min, num, fixed } }, filterNull, yAxisMinMax } = this
+      const { valueAxisMaxMin, axisOriginPos, axisWH, labelAxisTagPos, horizon } = this
 
-      if (yAxisData) {
+      const { data: { data }, getAxisPointsPos } = this
-        this.yAxisData = yAxisData
 
-        return
+      this.valuePointPos = data.map(({ data, againstAxis }) =>
+        getAxisPointsPos(
+          valueAxisMaxMin,
+          data,
+          axisOriginPos,
+          axisWH,
+          labelAxisTagPos,
+          horizon
+        ))
+    },
+    drawLines () {
+      const { data: { data }, valuePointPos, drawLine } = this
+
+      data.forEach((line, i) => drawLine(line, valuePointPos[i], i))
+    },
+    drawLine ({ type, lineType, lineDash, lineColor }, points, i) {
+      const { ctx, drawColors, defaultLineDash } = this
+
+      const { canvas: { drawPolyline, drawSmoothline } } = this
+
+      const { color: { hexToRgb } } = this
+
+      let drawLineFun = drawPolyline
+      type === 'smoothline' && (drawLineFun = drawSmoothline)
+
+      let color = hexToRgb(drawColors[i], 0.8)
+      lineColor && (color = lineColor)
+
+      let tureLineType = lineType || 'line'
+      const tureLineDash = tureLineType === 'dashed' ? (lineDash || defaultLineDash) : [10, 0]
+
+      drawLineFun(ctx, points, 1, color, false, tureLineDash, true, true)
+    },
+    drawFills () {
+      const { data: { data }, valuePointPos, drawFill } = this
+
+      data.forEach((line, i) => drawFill(line, valuePointPos[i]))
+    },
+    drawFill ({ fillColor, type, data }, points) {
+      if (!fillColor) return
+
+      const { canvas: { drawPolylinePath, drawSmoothlinePath } } = this
+
+      const { ctx, getGradientColor, filterNull, axisOriginPos: [, y] } = this
+
+      let drawLineFun = drawPolylinePath
+      type === 'smoothline' && (drawLineFun = drawSmoothlinePath)
+
+      const maxValue = Math.max(...filterNull(data))
+      const maxValueIndex = data.findIndex(v => v === maxValue)
+
+      const color = getGradientColor(points[maxValueIndex], fillColor)
+
+      const lastPoint = points[points.length - 1]
+
+      ctx.fillStyle = color
+
+      drawLineFun(ctx, points, false, true, true)
+
+      ctx.lineTo(lastPoint[0], y)
+      ctx.lineTo(points[0][0], y)
+
+      ctx.closePath()
+
+      ctx.fill()
+    },
+    getGradientColor (value, colors) {
+      const { data: { localGradient }, axisAnglePos, horizon } = this
+
+      const { ctx, canvas: { getLinearGradientColor } } = this
+
+      if (localGradient) {
+        return getLinearGradientColor(ctx,
+          ...(horizon
+            ? [value, [axisAnglePos.leftTop[0], value[1]]]
+            : [value, [value[0], axisAnglePos.leftBottom[1]]]),
+          colors)
+      } else {
+        return getLinearGradientColor(ctx,
+          ...(horizon
+            ? [axisAnglePos.leftTop, axisAnglePos.rightTop]
+            : [axisAnglePos.leftTop, axisAnglePos.leftBottom]),
+          colors)
       }
-
-      let [unsetMax, unsetMin] = [false, false]
-
-      !max && max !== 0 && (max = Math.max(...data.map(({ data: td }) => Math.max(...td)))) && (unsetMax = true)
-      !min && min !== 0 && (min = Math.min(...data.map(({ data: td }) => Math.min(...filterNull(td))))) && (unsetMin = true)
-
-      let minus = max - min
-
-      unsetMax && (max += minus / 2) && (max = Math.ceil(max))
-      unsetMin && (min -= minus / 2) && (min = Math.floor(min))
-
-      yAxisMinMax[0] = min
-      yAxisMinMax[1] = max
-
-      minus = max - min
-
-      !num && (num = minus < 9 ? minus + 1 : 10)
-
-      const gapNum = minus / (num - 1)
-
-      this.yAxisData = new Array(num).fill(0).map((t, i) => (max - gapNum * i).toFixed(fixed || 0)).reverse()
     },
-    calcAxisPos () {
+    drawPoints () {
-      const { ctx, canvasWH, xAxisData, yAxisData, axisWH, axisOriginPos, rowColumnSize, data } = this
+      const { data: { data }, valuePointPos, drawPoint } = this
 
-      const { x: { unit: xUT, offset: xOF }, y: { unit: yUT, fontSize: yFS, offset: yOF }, boundaryGap } = data
+      data.forEach((line, i) => drawPoint(line, valuePointPos[i], i))
-
-      ctx.font = `${yFS}px Arial`
-
-      let yAxisMaxWidth = Math.max(...yAxisData.map(v => ctx.measureText(v).width))
-
-      const yAxisUnitWidth = ctx.measureText(yUT || '').width
-
-      yAxisMaxWidth < yAxisUnitWidth && (yAxisMaxWidth = yAxisUnitWidth)
-
-      const yAxisRowHeight = (canvasWH[1] - (xOF || 20)) / (yAxisData.length + 1)
-      const xAxisColumnWidth = (canvasWH[0] - (yOF || (yAxisMaxWidth + 10)) - ctx.measureText(xUT || '').width - 10) / (xAxisData.length + 1)
-
-      axisWH[0] = xAxisColumnWidth * xAxisData.length
-      axisWH[1] = yAxisRowHeight * yAxisData.length
-
-      rowColumnSize[0] = axisWH[1] / (yAxisData.length - 1)
-      rowColumnSize[1] = axisWH[0] / (boundaryGap ? xAxisData.length : xAxisData.length - 1)
-
-      axisOriginPos[0] = (yOF || yAxisMaxWidth) + 10
-      axisOriginPos[1] = canvasWH[1] - (xOF || 20)
     },
-    drawAxis () {
+    drawPoint ({ pointColor }, points, i) {
-      const { ctx, xAxisData, yAxisData, axisOriginPos, axisWH, canvasWH } = this
+      const { ctx, drawColors, defaultPointRadius } = this
 
-      const { defaultAxisColor, rowColumnSize, defaultFontSize, data: { x, y, boundaryGap } } = this
+      const { canvas: { drawPoints: drawPFun } } = this
 
-      const { unit: xUT, lineColor: xLC, color: xC, fontSize: xFS } = x
+      const color = pointColor || drawColors[i]
 
-      const { unit: yUT, lineColor: yLC, color: yC, fontSize: yFS } = y
+      drawPFun(ctx, points, defaultPointRadius, color)
+    },
+    drawValues () {
+      const { ctx, data: { data, showValueText, valueTextColor, valueTextOffset, valueTextFontSize } } = this
 
-      const { canvas: { drawLine } } = this
+      if (!showValueText) return
 
-      drawLine(ctx, axisOriginPos, [axisOriginPos[0] + axisWH[0], axisOriginPos[1]], 1, (xLC || defaultAxisColor))
+      const { defaultValueFontSize, defaultValueColor, valuePointPos, drawValue } = this
-      drawLine(ctx, axisOriginPos, [axisOriginPos[0], axisOriginPos[1] - axisWH[1]], 1, (yLC || defaultAxisColor))
 
-      ctx.fillStyle = xC || 'rgba(250, 250, 250, 0.6)'
+      const offset = valueTextOffset || [0, -5]
 
-      ctx.font = `${xFS || defaultFontSize}px Microsoft Yahei`
+      ctx.fillStyle = valueTextColor || defaultValueColor
+
+      ctx.font = `${valueTextFontSize || defaultValueFontSize}px Arial`
 
       ctx.textAlign = 'center'
-      ctx.textBaseline = 'top'
+      ctx.textBaseline = 'bottom'
 
-      const columnWidth = rowColumnSize[1]
+      data.forEach((line, i) => drawValue(line, valuePointPos[i], offset))
-
-      const columnOffset = boundaryGap ? columnWidth / 2 : 0
-
-      xAxisData.forEach((text, i) => ctx.fillText(text, axisOriginPos[0] + (i * columnWidth) + columnOffset, axisOriginPos[1] + 3))
-      xUT && (ctx.textAlign = 'end') && ctx.fillText(xUT, canvasWH[0], axisOriginPos[1] + 3)
-
-      ctx.font = `${yFS || defaultFontSize}px Microsoft Yahei`
-
-      ctx.fillStyle = yC || 'rgba(250, 250, 250, 0.6)'
-
-      ctx.textAlign = 'right'
-      ctx.textBaseline = 'middle'
-
-      const rowHeight = rowColumnSize[0]
-
-      yAxisData.forEach((text, i) => ctx.fillText(text, axisOriginPos[0] - 7, axisOriginPos[1] - (i * rowHeight)))
-      yUT && (ctx.textBaseline = 'top') && ctx.fillText(yUT, axisOriginPos[0] - 7, 0)
     },
-    calcValuePointsData () {
+    drawValue ({ data }, points, offset) {
-      const { axisWH, axisOriginPos, yAxisMinMax: [min, max], rowColumnSize } = this
+      const { ctx, getOffsetPoints } = this
 
-      const { data: { data, x, boundaryGap } } = this
+      getOffsetPoints(points, offset).forEach((pos, i) => {
+        if (!data[i] && data[i] !== 0) return
 
-      const columnWidth = rowColumnSize[1]
+        ctx.fillText(data[i], ...pos)
-
-      const xOffset = (boundaryGap ? columnWidth / 2 : 0)
-
-      const xPos = new Array(x.data.length).fill(0).map((v, i) => axisOriginPos[0] + (columnWidth * i) + xOffset)
-
-      const minus = max - min
-
-      const numberData = data.map(({ data: td }) => ({ data: td.map(v => ((!v && v === 0) || v) ? Number(v) : NaN) }))
-
-      this.valuePointsData =
-        numberData.map(({ data: td }) =>
-          td.map((v, i) =>
-            Number.isFinite(v)
-              ? [xPos[i], axisOriginPos[1] - (v - min) / minus * axisWH[1]]
-              : false))
-    },
-    drawValueColumn () {
-      const { ctx, valuePointsData, data: { data, color }, rowColumnSize, axisOriginPos, canvas, filterNull } = this
-
-      const { getLinearGradientColor } = canvas
-
-      const colorNum = color.length
-
-      const columnWidth = rowColumnSize[1] / 3 * 2
-
-      const offset = columnWidth / 2
-
-      data.forEach(({ columnColor, type }, i) => {
-        if (type !== 'column') return
-
-        const filterPoints = filterNull(valuePointsData[i])
-
-        filterPoints.forEach(point => {
-          const height = axisOriginPos[1] - point[1]
-
-          ctx.fillStyle = getLinearGradientColor(ctx, point, [point[0],
-            axisOriginPos[1]], columnColor || color[i % colorNum])
-
-          ctx.fillRect(point[0] - offset, point[1], columnWidth, height)
-        })
       })
     },
-    drawValuePolyline () {
+    getOffsetPoint ([x, y], [ox, oy]) {
-      const { ctx, valuePointsData, canvas, color: { hexToRgb } } = this
+      return [x + ox, y + oy]
-
-      const { data: { data, color } } = this
-
-      const colorNum = color.length
-
-      data.forEach(({ lineColor, dashed, type }, i) =>
-        (!type || type === 'polyline' || type === 'smoothline') &&
-          canvas[(!type || type === 'polyline') ? 'drawPolyline' : 'drawSmoothline'](
-            ctx, valuePointsData[i], 1,
-            hexToRgb(lineColor || color[i % colorNum], 0.8), false,
-            (dashed ? [5, 5] : [10, 0]), true, true))
     },
-    fillLineColor () {
+    getOffsetPoints (points, offset) {
-      const { ctx, valuePointsData, canvas, axisOriginPos, axisWH, data: { data }, filterNull } = this
+      const { getOffsetPoint } = this
 
-      const { getLinearGradientColor } = canvas
+      return points.map(point => point ? getOffsetPoint(point, offset) : false)
-
-      const colorBegin = [axisOriginPos[0], axisOriginPos[1] - axisWH[1]]
-
-      data.forEach(({ fillColor, type }, i) => {
-        if (!fillColor) return
-
-        const currentValuePointData = filterNull(valuePointsData[i])
-
-        const pointNum = currentValuePointData.length
-
-        const rightBottom = [currentValuePointData[pointNum - 1][0], axisOriginPos[1]]
-        const leftBottom = [currentValuePointData[0][0], axisOriginPos[1]]
-
-        canvas[(!type || type === 'polyline') ? 'drawPolylinePath' : 'drawSmoothlinePath'](
-          ctx, currentValuePointData, false, true, true)
-
-        ctx.lineTo(...rightBottom)
-        ctx.lineTo(...leftBottom)
-
-        ctx.closePath()
-
-        ctx.fillStyle = getLinearGradientColor(ctx, colorBegin, axisOriginPos, fillColor)
-
-        ctx.fill()
-      })
-    },
-    drawValuePoints () {
-      const { ctx, valuePointsData, data: { data, color }, canvas: { drawPoints } } = this
-
-      const colorNum = color.length
-
-      data.forEach(({ pointColor, type }, i) =>
-        type !== 'column' &&
-        drawPoints(ctx, valuePointsData[i], 4, pointColor || color[i % colorNum]))
     }
   },
   mounted () {
@@ -323,35 +249,5 @@ export default {
       height: 100%;
     }
   }
-
-  .label-line {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-    font-size: 10px;
-  }
-
-  .label-item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 15px;
-    margin: 0px 3px;
-
-    :nth-child(1) {
-      width: 10px;
-      height: 10px;
-      margin-right: 5px;
-    }
-  }
-
-  .for-slot {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-  }
 }
 </style>

src/views/demo/chart.vue

@@ -6,6 +6,8 @@
 
     <column-chart-demo />
 
+    <polyline-chart-demo />
+
     <!-- <border-box-7 class="chart-item">
       <point-chart :data="pointChartData1" :colors="colors" class="chart" />
 
@@ -270,184 +272,6 @@ data: {
       </div>
     </border-box-7>
 
-    <border-box-7 class="chart-item" :reverse="true">
-      <polyline-chart :data="polylineChartData1" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Polyline-chart</div>
-
-        <highlight-code>
-&lt;polyline-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      // 必填项 存在空位时 该点忽略
-      data: [99.81, '', ..., '', 99.23, 99.62],
-      // 非必须 配置此项 将进行颜色填充
-      fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
-      // 非必须 配置此项可更改数据点颜色
-      pointColor: '#00db95',
-      // 非必须 配置此项可更改线条颜色
-      lineColor: '#ffc53d',
-      // 非必须 默认为折线
-      // 可选项有 polyline 折线 | smoothline 平滑曲线 | column 柱状
-      type: 'polyline'
-      // 默认为false 实线 非必须
-      dashed: true
-    },...
-  ],
-  // 非必须 依次循环使用
-  color: ['#00baff', '#3de7c9', ...],
-  x: {
-    // 必填项 不想显示底部刻度 可以全留空位
-    data: [ '10/01', '', ..., '', '10/23' ],
-    // unit: '日期'     // 非必须 单位展示
-    // fontSize: 20     // 非必须 x轴刻度字体大小
-    // offset: 30       // 非必须 x轴向上偏移 此处未配置
-  },
-  y: {
-    min: 96,            // 非必须 y轴最小值 未配置则自动根据数据计算
-    max: 100,           // 非必须 y轴最大值 未配置则自动根据数据计算
-    fixed: 2,           // 非必须 y轴刻度精度
-    num: 10,            // 非必须刻度个数 默认为10 数据范围不足10则自动缩减
-    unit: '%'           // 非必须 单位展示
-    // fontSize: 20     // 非必须 x轴刻度字体大小
-    // offset: 30       // 非必须 x轴向上偏移
-  },
-  // boundaryGap: false // 非必须 配置为true 将不贴合边界进行绘制
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <polyline-chart :data="polylineChartData2" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Polyline-chart</div>
-
-        <highlight-code>
-&lt;polyline-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      data: [99.81, ..., 99.81, 99.56],
-      fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
-      pointColor: '#00db95',
-      type: 'polyline'
-    },
-    {
-      data: [97.81, ..., 97.23, 97.62],
-      fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
-      type: 'smoothline'
-    }
-  ],
-  color: ['#00baff', '#3de7c9', ...],
-  x: {
-    data: ['10/01', '', ..., '', '10/23']
-  },
-  y: {
-    fixed: 2,
-    unit: '%'
-  },
-  boundaryGap: true
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item" :reverse="true">
-      <polyline-chart :data="polylineChartData3" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Polyline-chart</div>
-
-        <highlight-code>
-&lt;polyline-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56],
-      columnColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
-      type: 'column'
-    },
-    {
-      data: [97.81, 97.42, 97.56, 100.23, 97.62, 97.36, 97.56],
-      fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
-      type: 'smoothline'
-    }
-  ],
-  color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
-  x: {
-    data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
-  },
-  y: {
-    fixed: 2,
-    unit: '%'
-  },
-  boundaryGap: true
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <polyline-chart :data="polylineChartData4" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Polyline-chart</div>
-
-        <highlight-code>
-&lt;polyline-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: [
-        data: [
-          {
-            data: [3, 4.5, 4, 6, 5, 4, 3],
-            dashed: true
-          },
-          {
-            data: [0.5, 1, 0.8, 3, 2, 1.5, 0.5],
-            fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
-          },
-          {
-            data: [1, 3, 2, 4, 3, 2, 1],
-            type: 'smoothline',
-            fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
-          },
-          {
-            data: [2, 2.5, 3, 5, 4, 3, 2],
-            type: 'column',
-            columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
-          }
-        ],
-        x: {
-          data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
-        },
-        y: {
-          max: 6,
-          min: 0,
-          unit: '单位'
-        },
-        labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
-        color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
-        boundaryGap: true
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
     <!-- <highlight-code class="chart-item" :reverse="true">
       <polyline-chart :data="polylineChartData" class="chart" />
 
@@ -466,11 +290,14 @@ import attention from './chart/attention.vue'
 
 import columnChartDemo from './chart/columnChartDemo'
 
+import polylineChartDemo from './chart/polylineChartDemo'
+
 export default {
   name: 'Chart',
   components: {
     attention,
-    columnChartDemo
+    columnChartDemo,
+    polylineChartDemo
   },
   data () {
     return {
@@ -483,6 +310,10 @@ export default {
           title: 'Column-Chart',
           target: 'column-chart'
         },
+        {
+          title: 'Polyline-Chart',
+          target: 'polyline-chart'
+        },
         {
           title: 'Radar-Chart',
           target: 'radar-chart'
@@ -520,208 +351,6 @@ export default {
         }
       },
 
-      columnChartData1: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: ['#247efc', '#ff2fdb']
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          unit: '辆'
-        },
-        labelLine: {
-          color: '#2b7bfb',
-          data: ['车流量'],
-          type: 'rectangle'
-        }
-      },
-
-      columnChartData2: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: ['#247efc', '#ff2fdb']
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          unit: '辆',
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          num: 6
-        },
-        labelLine: {
-          color: '#2b7bfb',
-          data: ['车流量'],
-          type: 'rectangle'
-        },
-        showColumnBG: true,
-        columnBGColor: 'rgba(100, 100, 100, 0.3)'
-      },
-
-      columnChartData3: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: '#247efc'
-          },
-          {
-            data: [
-              [35, 70, 40],
-              [74, 180, 45],
-              [37, 200, 145],
-              [35, 89, 30],
-              [65, 100, 48],
-              [55, 90, 70]
-            ],
-            fillColor: ['#ff2fdb', '#e3b4a2', '#fafb5d']
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          unit: '万元',
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          min: 0
-        },
-        labelLine: {
-          color: ['#247efc', '#ff2fdb', '#e3b4a2', '#fafb5d'],
-          data: ['玩具', '食品', '服装', '电器'],
-          type: 'rectangle'
-        },
-        showColumnBG: true,
-        columnBGColor: 'rgba(100, 100, 100, 0.3)'
-      },
-
-      columnChartData4: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: ['#247efc', '#ff2fdb']
-          },
-          {
-            data: [130, 313, 392, 180, 400, 188],
-            fillColor: ['#00BAFF', '#3DE7C9']
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          unit: '辆'
-        },
-        labelLine: {
-          color: ['#ff2fdb', '#3DE7C9'],
-          data: ['同期', '环期'],
-          type: 'rectangle'
-        },
-        roundColumn: true,
-        spaceBetween: true,
-        localGradient: true
-      },
-
-      columnChartData5: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: ['#247efc', '#ff2fdb'],
-            type: 'leftEchelon'
-          },
-          {
-            data: [130, 313, 392, 180, 400, 188],
-            fillColor: ['#00BAFF', '#3DE7C9'],
-            type: 'rightEchelon'
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          unit: '辆',
-          num: 7
-        },
-        labelLine: {
-          color: ['#ff2fdb', '#3DE7C9'],
-          data: ['同期', '环期'],
-          type: 'rectangle'
-        },
-        showValueText: true,
-        spaceBetween: true
-      },
-
-      columnChartData6: {
-        data: [
-          {
-            data: [175, 125, 90, 130, 45, 65, 65, 47, 50, 52, 45, 37],
-            fillColor: ['#247efc', '#ff2fdb']
-          },
-          {
-            data: [210, 142, 128, 142, 63, 72, 68, 57, 54, 60, 49, 42],
-            fillColor: ['#00BAFF', '#3DE7C9']
-          },
-          {
-            data: [23, 18, 16, 14, 10, 8, 6, 6, 6, 6, 6, 5],
-            type: 'polyline',
-            againstAxis: true,
-            lineColor: '#ff2fdb',
-            pointColor: '#3de7c9'
-          }
-        ],
-        x: {
-          data: [
-            '一月份', '二月份',
-            '三月份', '四月份',
-            '五月份', '六月份',
-            '七月份', '八月份',
-            '九月份', '十月份',
-            '十一月份', '十二月份'
-          ],
-          offset: 40,
-          rotate: true
-        },
-        y: {
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          min: 0,
-          max: 250,
-          num: 6,
-          tagAfter: 'ml'
-        },
-        ay: {
-          min: 0,
-          max: 25,
-          num: 6,
-          tagAfter: '°C'
-        },
-        labelLine: {
-          color: ['#ff2fdb', '#3DE7C9'],
-          data: ['同期', '环期'],
-          type: 'rectangle'
-        },
-        roundColumn: true,
-        localGradient: true,
-        spaceBetween: true
-      },
-
-      columnChartData7: '',
-
       radarChartData1: {
         data: [
           {
@@ -977,141 +606,6 @@ export default {
         active: false
       },
 
-      polylineChartData1: {
-        data: [
-          {
-            data: [
-              99.81, 99.42, 99.56, 99.23, 99.62,
-              99.36, 99.56, '', 99.81, 99.56,
-              99.42, 99.56, '', '', 99.36,
-              99.42, '', 99.56, '', '',
-              99.56, 99.23, 99.62
-            ],
-            fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
-            pointColor: '#00db95',
-            lineColor: '#ffc53d',
-            type: 'polyline',
-            dashed: true
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
-        x: {
-          data: [
-            '10/01', '', '10/03', '', '10/05', '',
-            '10/07', '', '10/09', '', '10/11', '',
-            '10/13', '', '10/15', '', '10/17', '',
-            '10/19', '', '10/21', '', '10/23'
-          ]
-        },
-        y: {
-          min: 96,
-          max: 100,
-          fixed: 2,
-          num: 10,
-          unit: '%'
-        }
-      },
-
-      polylineChartData2: {
-        data: [
-          {
-            data: [
-              99.81, 99.42, 99.56, 99.23, 99.62,
-              99.36, 99.56, '', 99.81, 99.56,
-              99.42, 99.56, '', '', 99.36,
-              99.42, '', 99.56, '', '',
-              99.56, 99.23, 99.62
-            ],
-            fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
-            pointColor: '#00db95',
-            type: 'polyline'
-          },
-          {
-            data: [
-              97.81, 97.42, 97.56, 97.23, 97.62,
-              97.36, 97.56, '', 97.81, 97.56,
-              97.42, 97.56, '', '', 97.36,
-              97.42, '', 97.56, '', '',
-              97.56, 97.23, 97.62
-            ],
-            fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
-            type: 'smoothline'
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
-        x: {
-          data: [
-            '10/01', '', '10/03', '', '10/05', '',
-            '10/07', '', '10/09', '', '10/11', '',
-            '10/13', '', '10/15', '', '10/17', '',
-            '10/19', '', '10/21', '', '10/23'
-          ]
-        },
-        y: {
-          fixed: 2,
-          unit: '%'
-        },
-        boundaryGap: true
-      },
-
-      polylineChartData3: {
-        data: [
-          {
-            data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56],
-            columnColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
-            type: 'column'
-          },
-          {
-            data: [97.81, 97.42, 97.56, 100.23, 97.62, 97.36, 97.56],
-            fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
-            type: 'smoothline'
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
-        x: {
-          data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
-        },
-        y: {
-          fixed: 2,
-          unit: '%'
-        },
-        boundaryGap: true
-      },
-
-      polylineChartData4: {
-        data: [
-          {
-            data: [3, 4.5, 4, 6, 5, 4, 3],
-            dashed: true
-          },
-          {
-            data: [0.5, 1, 0.8, 3, 2, 1.5, 0.5],
-            fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
-          },
-          {
-            data: [1, 3, 2, 4, 3, 2, 1],
-            type: 'smoothline',
-            fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
-          },
-          {
-            data: [2, 2.5, 3, 5, 4, 3, 2],
-            type: 'column',
-            columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
-          }
-        ],
-        x: {
-          data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
-        },
-        y: {
-          max: 6,
-          min: 0,
-          unit: '单位'
-        },
-        labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
-        color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
-        boundaryGap: true
-      },
-
       colors: ''
     }
   }

src/views/demo/chart/columnChartDemo.vue

@@ -281,6 +281,8 @@ data: {
         </highlight-code>
       </div>
     </border-box-7>
+
+    <div id="polyline-chart" />
   </div>
 </template>
 
@@ -306,7 +308,8 @@ export default {
           color: '#2b7bfb',
           data: ['车流量'],
           type: 'rectangle'
-        }
+        },
+        showValueText: true
       },
 
       columnChartData2: {
@@ -462,7 +465,7 @@ export default {
             '十一月份', '十二月份'
           ],
           offset: 40,
-          rotate: true
+          rotate: 20
         },
         y: {
           grid: true,

src/views/demo/chart/polylineChartDemo.vue

@@ -0,0 +1,228 @@
+<template>
+  <div>
+    <border-box-7 class="chart-item" :reverse="true">
+      <polyline-chart :data="polylineChartData1" :colors="colors" class="chart" />
+
+      <div class="config-info">
+        <div class="title">Polyline-chart</div>
+
+        <highlight-code>
+&lt;polyline-chart :data="data" :colors="colors" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+// 折线图与柱状图折线部分相似
+data: [
+  {
+    data: [32, 30, 55, 24, 33, 25],
+    lineColor: '#3de7c9'
+  }
+],
+x: {
+  data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
+},
+showValueText: true,
+// 非必需 数值展示位置偏移量
+valueTextOffset: [10, -5]
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <border-box-7 class="chart-item">
+      <polyline-chart :data="polylineChartData2" class="chart" />
+
+      <div class="config-info">
+        <div class="title">Polyline-chart</div>
+
+        <highlight-code>
+&lt;polyline-chart :data="data" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+data: {
+  data: [
+    {
+      data: [
+        99.81, 99.42, 99.56, 99.23, 99.62,
+        99.36, 99.56, '', 99.81, 99.56, ...
+      ],
+      lineType: 'dashed',
+      lineDash: [2, 2],
+      lineColor: '#277dfb',
+      pointColor: '#3de7c9',
+      fillColor: ['rgba(40, 125, 252, 0.3)', 'rgba(40, 125, 252, 0)']
+    },
+    {
+      data: [
+        97.81, 97.42, 97.56, 97.23, 97.62,
+        97.36, 97.56, '', 97.81, 97.56, ...
+      ],
+      fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
+      type: 'smoothline'
+    }
+  ],
+  x: {
+    data: [
+      '10/01', '', '10/03', '', '10/05', '',
+      '10/07', '', '10/09', '', '10/11', '', ...
+    ]
+  },
+  y: {
+    min: 96,
+    max: 100,
+    // 数据精度 数据最大最小差值较小时 建议设置精度
+    fixed: 2,
+    num: 10,
+    unit: '%'
+  }
+}
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <border-box-7 class="chart-item" :reverse="true">
+      <polyline-chart :data="polylineChartData3" class="chart" />
+
+      <div class="config-info">
+        <div class="title">Polyline-chart</div>
+
+        <highlight-code>
+&lt;polyline-chart :data="data" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+data: {
+  data: [
+    {
+      data: [2, 2.5, 3, 6, 3, 2.5, 2],
+      fillColor: ['rgba(255, 38, 214, 0.5)', 'rgba(40, 82, 255, 0.1)']
+    },
+    {
+      data: [3, 2, 4, 5, 4, 2, 3],
+      type: 'smoothline'
+    }
+  ],
+  x: {
+    data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
+  },
+  // 非必需 不贴合坐标轴绘制
+  boundaryGap: true
+}
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <border-box-7 class="chart-item">
+      <!-- <polyline-chart :data="polylineChartData4" class="chart" /> -->
+
+      <div class="config-info">
+        <div class="title">Polyline-chart</div>
+
+        <highlight-code>
+&lt;polyline-chart :data="data" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+data: [
+// 44444444
+}
+        </highlight-code>
+      </div>
+    </border-box-7>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PolylineChartDemo',
+  data () {
+    return {
+      polylineChartData1: {
+        data: [
+          {
+            data: [32, 30, 55, 24, 33, 25],
+            lineColor: '#3de7c9'
+          }
+        ],
+        x: {
+          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
+        },
+        y: {
+        },
+        showValueText: true,
+        valueTextOffset: [10, -5]
+      },
+
+      polylineChartData2: {
+        data: [
+          {
+            data: [
+              99.81, 99.42, 99.56, 99.23, 99.62,
+              99.36, 99.56, '', 99.81, 99.56,
+              99.42, 99.56, '', '', 99.36,
+              99.42, '', 99.56, '', '',
+              99.56, 99.23, 99.62
+            ],
+            lineType: 'dashed',
+            lineDash: [2, 2],
+            lineColor: '#277dfb',
+            pointColor: '#3de7c9',
+            fillColor: ['rgba(40, 125, 252, 0.3)', 'rgba(40, 125, 252, 0)']
+          },
+          {
+            data: [
+              97.81, 97.42, 97.56, 97.23, 97.62,
+              97.36, 97.56, '', 97.81, 97.56,
+              97.42, 97.56, '', '', 97.36,
+              97.42, '', 97.56, '', '',
+              97.56, 97.23, 97.62
+            ],
+            fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
+            type: 'smoothline'
+          }
+        ],
+        x: {
+          data: [
+            '10/01', '', '10/03', '', '10/05', '',
+            '10/07', '', '10/09', '', '10/11', '',
+            '10/13', '', '10/15', '', '10/17', '',
+            '10/19', '', '10/21', '', '10/23'
+          ]
+        },
+        y: {
+          min: 96,
+          max: 100,
+          fixed: 2,
+          num: 10,
+          unit: '%'
+        }
+      },
+
+      polylineChartData3: {
+        data: [
+          {
+            data: [2, 2.5, 3, 6, 3, 2.5, 2],
+            fillColor: ['rgba(255, 38, 214, 0.5)', 'rgba(40, 82, 255, 0.1)']
+          },
+          {
+            data: [3, 2, 4, 5, 4, 2, 3],
+            type: 'smoothline'
+          }
+        ],
+        x: {
+          data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
+        },
+        labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
+        color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
+        boundaryGap: true
+      },
+
+      colors: ''
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>

src/views/demo/document.vue

@@ -8,22 +8,17 @@
 
       <div class="title">使用</div>
 
-      <div class="text-info">你需要将如下文件复制至你的项目内</div>
+      <div class="text-info">你需要将DataV文件夹复制至你的项目内</div>
-      <div class="text-info">./src/plugins</div>
+      <div class="text-info">并在main.js中引入使用</div>
-      <div class="text-info">./src/components</div>
-      <div class="text-info">./src/config</div>
-      <div class="text-info">并在main.js中引入plugins和components</div>
 
       <highlight-code>
 // main.js
-import datavComponents from './components/index.js'
+import dataV from './DataV/index.js'
-import datavPlugins from './plugin/index.js'
 
-Vue.use(datavComponents)
+Vue.use(dataV)
-Vue.use(datavPlugins)
 
 // 可以直接在Views文件夹下的dataView页面直接编写页面
-// dataView页面已做全屏缩放处理 roterPath: #/datav/view
+// dataView页面已做全屏缩放处理 routerPath: #/datav/view
       </highlight-code>
 
       <div class="text-info">组件具体用法见示例</div>