Chart 折线图表

Scan me!

SVG折线图表, 可绘制多条折线并配置不同的显示规则。

引入

  1. import { Chart } from 'mand-mobile'
  3. Vue.component(Chart.name, Chart)

代码演示

多折线

  1. <template>
  2.   <div class="md-example-child md-example-chart-child">
  3.     <md-chart
  4.       :size="['7rem', '4rem']"
  5.       :max="60"
  6.       :min="0"
  7.       :step="10"
  8.       :lines="5"
  9.       :format="format"
  10.       :labels="['周一', '周二', '周三', '周四', '周五', '周六', '周日']"
  11.       :datasets="[
  12.         {
  13.           color: '#5e64ff',
  14.           width: 1,
  15.           values: [8, 15, 20, 23, 20, 30, 32, 38, 36, 40, 50, 55, 52]
  16.         },
  17.         {
  18.           width: 1,
  19.           values: [10, 20, 25, 30, 28, 35, 38, 42, 40, 40, 45, 42, 45]
  20.         }
  21.       ]"
  22.     />
  23.     </div>
  24. </template>
  26. <script>
  27. import {Chart} from 'mand-mobile'
  29. export default {
  30.   name: 'chart-demo',
  31.   components: {
  32.     [Chart.name]: Chart,
  33.   },
  34.   methods: {
  35.     format(val) {
  36.       return val + '%'
  37.     },
  38.   },
  39. }
  41. </script>
  43. <style lang="stylus" scoped>
  44.   svg
  45.     display block
  46.     margin 0 auto
  47.     width 7rem
  48.     height 4rem
  49. </style>
  50.  
  51.

区域填充

  1. <template>
  2.   <div class="md-example-child md-example-chart-child">
  3.     <md-chart
  4.       :size="['7rem', '4rem']"
  5.       :max="60"
  6.       :min="0"
  7.       :step="10"
  8.       :lines="5"
  9.       :format="format"
  10.       :labels="['周一', '周二', '周三', '周四', '周五', '周六', '周日']"
  11.       :datasets="[
  12.         {
  13.           color: '#5e64ff',
  14.           width: 1,
  15.           theme: 'region',
  16.           values: [8, 15, 20, 23, 20, 30, 32, 38, 36, 40, 50, 55, 52]
  17.         }
  18.       ]"
  19.     />
  20.     </div>
  21. </template>
  23. <script>
  24. import {Chart} from 'mand-mobile'
  26. export default {
  27.   name: 'chart-demo',
  28.   components: {
  29.     [Chart.name]: Chart,
  30.   },
  31.   methods: {
  32.     format(val) {
  33.       return val + '%'
  34.     },
  35.   },
  36. }
  38. </script>
  40. <style lang="stylus" scoped>
  41.   svg
  42.     display block
  43.     margin 0 auto
  44.     width 7rem
  45.     height 4rem
  46. </style>
  47.  
  48.

渐变折线

  1. <template>
  2.   <div class="md-example-child md-example-chart-child">
  3.     <md-chart
  4.       :size="['7rem', '4rem']"
  5.       :max="60"
  6.       :min="0"
  7.       :step="10"
  8.       :lines="5"
  9.       :format="format"
  10.       :labels="['周一', '周二', '周三', '周四', '周五', '周六', '周日']"
  11.       :datasets="[
  12.         {
  13.           color: '#5e64ff',
  14.           width: 1,
  15.           theme: 'heat',
  16.           values: [8, 15, 20, 23, 20, 30, 32, 38, 36, 40, 50, 55, 52]
  17.         }
  18.       ]"
  19.     />
  20.     </div>
  21. </template>
  23. <script>
  24. import {Chart} from 'mand-mobile'
  26. export default {
  27.   name: 'chart-demo',
  28.   components: {
  29.     [Chart.name]: Chart,
  30.   },
  31.   methods: {
  32.     format(val) {
  33.       return val + '%'
  34.     },
  35.   },
  36. }
  38. </script>
  40. <style lang="stylus" scoped>
  41.   svg
  42.     display block
  43.     margin 0 auto
  44.     width 7rem
  45.     height 4rem
  46. </style>
  47.  
  48.

API

Chart Props

属性说明类型默认值必填
size图表绘制区域大小, 元素可为带单位字符串或者纯数字(默认为px)Array[480, 320]可选
max纵坐标最大值number若不填则会自动计算数据中最大值可选
min纵坐标最表最小值, 建议设置为0number若为空则会自动计算数据中最小值可选
lines纵坐标最多画几条线number5可选
step纵坐标递减的单位值number若为空则根据lines, max, min自动计算平均值可选
format纵坐标标签格式化函数Functionval => val可选
labels横坐标的标签Array-必填
datasets数据值, 格式参考下面的说明Array-必填
shift纵坐标偏移量Number0.6可选

datasets

其为对象数组，每个对象定义了一组折线相关属性, 如下说明

  1. {
  2.   color: '#ff5858', // 颜色, 可选, 默认为橘色
  3.   theme: 'heat',    // 主题, 可选heat, region, 默认为空
  4.   width: 1,         // 宽度, 可选, 默认为1
  5.   values: [15, 20]  // 数据数组
  6. }

覆盖样式

默认图表样式如下

  1. .md-chart
  2.   line
  3.     stroke #ccc
  4.     stroke-width 0.5
  5.     stroke-linecap square
  6.   path
  7.     stroke #fa8919
  8.     stroke-width 1
  9.     stroke-linecap butt
  10.   .md-chart-axis-y
  11.     text
  12.       fill #666
  13.       font-size 20px
  14.       text-anchor end
  15.   .md-chart-axis-x
  16.     text
  17.       fill #666
  18.       font-size 20px
  19.       text-anchor middle