安装

局部注册

全局注册

  1. import { VChart, VLine, VArea, VBar, VPie, VPoint, VScale, VAxis, VGuide, VTooltip, VLegend, VGuide } from 'vux'
  3. export default {
  4.   components: {
  5.     VChart,
  6.     VLine,
  7.     VArea,
  8.     VBar,
  9.     VPie,
  10.     VPoint,
  11.     VScale,
  12.     VAxis,
  13.     VGuide,
  14.     VTooltip,
  15.     VLegend,
  16.     VGuide
  17.   }
  18. }

  1. // 在入口文件全局引入
  3. import Vue from 'vue'
  4. import { VChart, VLine, VArea, VBar, VPie, VPoint, VScale, VAxis, VGuide, VTooltip, VLegend, VGuide } from 'vux'
  6. Vue.component('v-chart', VChart)
  7. Vue.component('v-line', VLine)
  8. Vue.component('v-area', VArea)
  9. Vue.component('v-bar', VBar)
  10. Vue.component('v-pie', VPie)
  11. Vue.component('v-point', VPoint)
  12. Vue.component('v-scale', VScale)
  13. Vue.component('v-axis', VAxis)
  14. Vue.component('v-guide', VGuide)
  15. Vue.component('v-tooltip', VTooltip)
  16. Vue.component('v-legend', VLegend)
  17. Vue.component('v-guide', VGuide)

基本折线图

安装 - 图1

  1. <template>
  2.   <div>
  3.     <v-chart :data="data" prevent-default>
  4.       <v-scale x :tick-count="3" />
  5.       <v-tooltip :show-item-marker="false" show-x-value />
  6.       <v-line />
  7.     </v-chart>
  8.   </div>
  9. </template>
  11. <script>
  12. import { VChart, VTooltip, VLine, VScale } from 'vux'
  14. export default {
  15.   components: {
  16.     VChart,
  17.     VTooltip,
  18.     VLine,
  19.     VScale
  20.   },
  21.   data () {
  22.     return {
  23.       data: [
  24.         { date: '2017-06-05', value: 116 },
  25.         { date: '2017-06-06', value: 129 },
  26.         { date: '2017-06-07', value: 135 },
  27.         { date: '2017-06-08', value: 86 },
  28.         { date: '2017-06-09', value: 73 },
  29.         { date: '2017-06-10', value: 85 },
  30.         { date: '2017-06-11', value: 73 },
  31.         { date: '2017-06-12', value: 68 },
  32.         { date: '2017-06-13', value: 92 },
  33.         { date: '2017-06-14', value: 130 },
  34.         { date: '2017-06-15', value: 245 },
  35.         { date: '2017-06-16', value: 139 },
  36.         { date: '2017-06-17', value: 115 },
  37.         { date: '2017-06-18', value: 111 },
  38.         { date: '2017-06-19', value: 309 },
  39.         { date: '2017-06-20', value: 206 },
  40.         { date: '2017-06-21', value: 137 },
  41.         { date: '2017-06-22', value: 128 },
  42.         { date: '2017-06-23', value: 85 },
  43.         { date: '2017-06-24', value: 94 },
  44.         { date: '2017-06-25', value: 71 },
  45.         { date: '2017-06-26', value: 106 },
  46.         { date: '2017-06-27', value: 84 },
  47.         { date: '2017-06-28', value: 93 },
  48.         { date: '2017-06-29', value: 85 },
  49.         { date: '2017-06-30', value: 73 },
  50.         { date: '2017-07-01', value: 83 },
  51.         { date: '2017-07-02', value: 125 },
  52.         { date: '2017-07-03', value: 107 },
  53.         { date: '2017-07-04', value: 82 },
  54.         { date: '2017-07-05', value: 44 },
  55.         { date: '2017-07-06', value: 72 },
  56.         { date: '2017-07-07', value: 106 },
  57.         { date: '2017-07-08', value: 107 },
  58.         { date: '2017-07-09', value: 66 },
  59.         { date: '2017-07-10', value: 91 },
  60.         { date: '2017-07-11', value: 92 },
  61.         { date: '2017-07-12', value: 113 },
  62.         { date: '2017-07-13', value: 107 },
  63.         { date: '2017-07-14', value: 131 },
  64.         { date: '2017-07-15', value: 111 },
  65.         { date: '2017-07-16', value: 64 },
  66.         { date: '2017-07-17', value: 69 },
  67.         { date: '2017-07-18', value: 88 },
  68.         { date: '2017-07-19', value: 77 },
  69.         { date: '2017-07-20', value: 83 },
  70.         { date: '2017-07-21', value: 111 },
  71.         { date: '2017-07-22', value: 57 },
  72.         { date: '2017-07-23', value: 55 },
  73.         { date: '2017-07-24', value: 60 }
  74.       ]
  75.     }
  76.   }
  77. }
  78. </script>

安装 - 图2 Show code

折线图:平滑曲线

安装 - 图3

  1. <template>
  2.   <div>
  3.     <v-chart :data="data">
  4.       <v-scale x type="timeCat" mask="MM/DD" :tick-count="3" />
  5.       <v-scale y :min="0" alias="日均温度" :tick-count="5" />
  6.       <v-point
  7.         :style="{
  8.           stroke: '#fff',
  9.           lineWidth: 1
  10.         }"
  11.         shape="smooth" />
  12.       <v-line shape="smooth" />
  13.     </v-chart>
  14.   </div>
  15. </template>
  17. <script>
  18. import { VChart, VLine, VPoint, VScale, VTooltip } from 'vux'
  20. export default {
  21.   components: {
  22.     VChart,
  23.     VPoint,
  24.     VLine,
  25.     VScale,
  26.     VTooltip
  27.   },
  28.   data () {
  29.     return {
  30.       data: [
  31.         { time: '2016-08-08 00:00:00', tem: 10 },
  32.         { time: '2016-08-08 00:10:00', tem: 22 },
  33.         { time: '2016-08-08 00:30:00', tem: 20 },
  34.         { time: '2016-08-09 00:35:00', tem: 26 },
  35.         { time: '2016-08-09 01:00:00', tem: 20 },
  36.         { time: '2016-08-09 01:20:00', tem: 26 },
  37.         { time: '2016-08-10 01:40:00', tem: 28 },
  38.         { time: '2016-08-10 02:00:00', tem: 20 },
  39.         { time: '2016-08-10 02:20:00', tem: 18 }
  40.       ]
  41.     }
  42.   }
  43. }
  44. </script>
  46. <style lang='css'>
  47. </style>

安装 - 图4 Show code

动态数据：实时折线

安装 - 图5

  1. <template>
  2.   <div>
  3.     <v-chart :data="data" ref="demo">
  4.       <v-scale x type="timeCat" :tick-count="3" mask="hh:mm:ss" />
  5.       <v-scale y :min="8" :tick-count="5" />
  6.       <v-tooltip :show-item-marker="false" show-x-value />
  7.       <v-guide type="html" :options="guide1" />
  8.       <v-guide type="html" :options="guide2" />
  9.       <v-line />
  10.     </v-chart>
  11.   </div>
  12. </template>
  14. <script>
  15. import { VChart, VTooltip, VLine, VScale, VGuide } from 'vux'
  17. const data = []
  19. // 添加数据，模拟数据，可以指定当前时间的偏移的秒
  20. function getRecord (offset) {
  21.   offset = offset || 0
  22.   return {
  23.     time: new Date().getTime() + offset * 1000,
  24.     value: Math.random() + 10
  25.   }
  26. }
  28. data.push(getRecord(-2))
  29. data.push(getRecord(-1))
  30. data.push(getRecord())
  32. export default {
  33.   components: {
  34.     VChart,
  35.     VTooltip,
  36.     VLine,
  37.     VScale,
  38.     VGuide
  39.   },
  40.   mounted () {
  41.     this.timer = setInterval(() => {
  42.       data.push(getRecord())
  43.     }, 2000)
  44.   },
  45.   beforeDestroy () {
  46.     clearInterval(this.timer)
  47.   },
  48.   data () {
  49.     return {
  50.       guide1: {
  51.         position (xScale, yScales) {
  52.           const xValues = xScale.values
  53.           const yValues = yScales[0].values
  54.           const xMax = xValues[xValues.length - 1]
  55.           const yMax = yValues[yValues.length - 1]
  56.           return [ xMax, yMax ]
  57.         },
  58.         html: '<div style="border-radius: 100%;border: none;width: 12px;height: 12px;background-color: rgb(24, 144, 255);transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1);"></div>'
  59.       },
  60.       guide2: {
  61.         position (xScale, yScales) {
  62.           const xValues = xScale.values
  63.           const yValues = yScales[0].values
  64.           const xMax = xValues[xValues.length - 1]
  65.           const yMax = yValues[yValues.length - 1]
  66.           return [ xMax, yMax ]
  67.         },
  68.         html: '<div style="border-radius: 100%;border: none;width: 20px;height: 20px;background-color: rgba(24, 144, 255, 0.5);transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1);"></div>'
  69.       },
  70.       data
  71.     }
  72.   }
  73. }
  74. </script>

安装 - 图6 Show code

折线图：渐变

安装 - 图7

  1. <template>
  2.   <div>
  3.     <v-chart :data="data">
  4.       <v-scale x :tick-count="5" :max="2020" />
  5.       <v-line shape="smooth" :colors="gradient"/>
  6.       <v-guide type="tag" :options="tag" />
  7.       <v-area shape="smooth" :colors="gradient"/>
  8.     </v-chart>
  9.   </div>
  10. </template>
  12. <script>
  13. import { VChart, VGuide, VLine, VArea, VScale } from 'vux'
  15. export default {
  16.   components: {
  17.     VChart,
  18.     VGuide,
  19.     VArea,
  20.     VLine,
  21.     VScale
  22.   },
  23.   data () {
  24.     return {
  25.       gradient: [
  26.         [0, '#F2C587'],
  27.         [0.5, '#ED7973'],
  28.         [1, '#8659AF']
  29.       ],
  30.       tag: {
  31.         position: [ 2017, 30.12 ],
  32.         content: '30.12',
  33.         direct: 'tl',
  34.         offsetY: -5,
  35.         background: {
  36.           fill: '#8659AF'
  37.         },
  38.         pointStyle: {
  39.           fill: '#8659AF'
  40.         }
  41.       },
  42.       data: [
  43.         { year: 2000, age: 27.2 },
  44.         { year: 2001, age: 27.5 },
  45.         { year: 2002, age: 27.8 },
  46.         { year: 2003, age: 28 },
  47.         { year: 2004, age: 28.2 },
  48.         { year: 2005, age: 28.4 },
  49.         { year: 2006, age: 28.8 },
  50.         { year: 2007, age: 28.8 },
  51.         { year: 2008, age: 28.8 },
  52.         { year: 2009, age: 28.8 },
  53.         { year: 2010, age: 28.9 },
  54.         { year: 2011, age: 29 },
  55.         { year: 2012, age: 29.3 },
  56.         { year: 2013, age: 29.4 },
  57.         { year: 2014, age: 29.5 },
  58.         { year: 2015, age: 29.7 },
  59.         { year: 2016, age: 30 },
  60.         { year: 2017, age: 30.12 }
  61.       ]
  62.     }
  63.   }
  64. }
  65. </script>

安装 - 图8 Show code

折线图:对比

安装 - 图9

  1. <template>
  2.   <div>
  3.     <v-chart :data="data">
  4.       <v-line series-field="type" />
  5.     </v-chart>
  6.   </div>
  7. </template>
  9. <script>
  10. import { VChart, VLine, VAxis, VTooltip } from 'vux'
  12. /*
  13. * [
  14. *   {"date":"2010-01-10","type":"能源","value":99.9},
  15. *   {"date":"2010-01-10","type":"金属","value":96.6}
  16. * ]
  17. */
  18. import data from './line_color.json'
  20. export default {
  21.   components: {
  22.     VChart,
  23.     VLine,
  24.     VAxis,
  25.     VTooltip
  26.   },
  27.   data () {
  28.     return {
  29.       data
  30.     }
  31.   }
  32. }
  33. </script>

安装 - 图10 Show code

折线图：显示点

安装 - 图11

  1. <template>
  2.   <div>
  3.     <v-chart :data="data">
  4.       <v-scale y :min="0" /> <!-- 默认 y 轴数值从数据的最小值到最大值，此处重置为从 0 开始 -->
  5.       <v-point :styles="{
  6.         stroke: '#fff',
  7.         lineWidth: 1
  8.       }"/>
  9.       <v-tooltip :show-item-marker="false" :on-show="onShow" /> <!-- onShow 为 F2 属性而非事件-->
  10.       <v-line />
  11.     </v-chart>
  12.   </div>
  13. </template>
  15. <script>
  16. import { VChart, VPoint, VTooltip, VLine, VScale } from 'vux'
  18. export default {
  19.   components: {
  20.     VChart,
  21.     VPoint,
  22.     VTooltip,
  23.     VLine,
  24.     VScale
  25.   },
  26.   data () {
  27.     return {
  28.       onShow (ev) {
  29.         const { items } = ev
  30.         items[0].name = null
  31.         items[0].value = '$ ' + items[0].value
  32.       },
  33.       data: [
  34.         { day: '周一', value: 300 },
  35.         { day: '周二', value: 400 },
  36.         { day: '周三', value: 350 },
  37.         { day: '周四', value: 500 },
  38.         { day: '周五', value: 490 },
  39.         { day: '周六', value: 600 },
  40.         { day: '周日', value: 900 }
  41.       ]
  42.     }
  43.   }
  44. }
  45. </script>
  47. <style lang='css'>
  48. </style>

安装 - 图12 Show code

层叠面积图

安装 - 图13

  1. <template>
  2.   <div>
  3.     <v-chart :data="data">
  4.       <v-scale x field="date" type="timeCat" mask="MM-DD" />
  5.       <v-scale y field="value" :tick-count="4" :max="300" />
  6.       <v-tooltip show-crosshairs show-value-in-legend />
  8.       <v-area series-field="city" shape="smooth" adjust="stack" />
  9.       <v-line series-field="city" shape="smooth" adjust="stack" />
  10.     </v-chart>
  11.   </div>
  12. </template>
  14. <script>
  15. import { VChart, VLine, VArea, VTooltip, VLegend, VScale } from 'vux'
  17. export default {
  18.   components: {
  19.     VChart,
  20.     VLine,
  21.     VArea,
  22.     VTooltip,
  23.     VLegend,
  24.     VScale
  25.   },
  26.   data () {
  27.     return {
  28.       data: [
  29.         { value: 63.4, city: 'New York', date: '2011-10-01' },
  30.         { value: 62.7, city: 'Alaska', date: '2011-10-01' },
  31.         { value: 72.2, city: 'Austin', date: '2011-10-01' },
  32.         { value: 58, city: 'New York', date: '2011-10-02' },
  33.         { value: 59.9, city: 'Alaska', date: '2011-10-02' },
  34.         { value: 67.7, city: 'Austin', date: '2011-10-02' },
  35.         { value: 53.3, city: 'New York', date: '2011-10-03' },
  36.         { value: 59.1, city: 'Alaska', date: '2011-10-03' },
  37.         { value: 69.4, city: 'Austin', date: '2011-10-03' },
  38.         { value: 55.7, city: 'New York', date: '2011-10-04' },
  39.         { value: 58.8, city: 'Alaska', date: '2011-10-04' },
  40.         { value: 68, city: 'Austin', date: '2011-10-04' },
  41.         { value: 64.2, city: 'New York', date: '2011-10-05' },
  42.         { value: 58.7, city: 'Alaska', date: '2011-10-05' },
  43.         { value: 72.4, city: 'Austin', date: '2011-10-05' },
  44.         { value: 58.8, city: 'New York', date: '2011-10-06' },
  45.         { value: 57, city: 'Alaska', date: '2011-10-06' },
  46.         { value: 77, city: 'Austin', date: '2011-10-06' },
  47.         { value: 57.9, city: 'New York', date: '2011-10-07' },
  48.         { value: 56.7, city: 'Alaska', date: '2011-10-07' },
  49.         { value: 82.3, city: 'Austin', date: '2011-10-07' },
  50.         { value: 61.8, city: 'New York', date: '2011-10-08' },
  51.         { value: 56.8, city: 'Alaska', date: '2011-10-08' },
  52.         { value: 78.9, city: 'Austin', date: '2011-10-08' },
  53.         { value: 69.3, city: 'New York', date: '2011-10-09' },
  54.         { value: 56.7, city: 'Alaska', date: '2011-10-09' },
  55.         { value: 68.8, city: 'Austin', date: '2011-10-09' },
  56.         { value: 71.2, city: 'New York', date: '2011-10-10' },
  57.         { value: 60.1, city: 'Alaska', date: '2011-10-10' },
  58.         { value: 68.7, city: 'Austin', date: '2011-10-10' },
  59.         { value: 68.7, city: 'New York', date: '2011-10-11' },
  60.         { value: 61.1, city: 'Alaska', date: '2011-10-11' },
  61.         { value: 70.3, city: 'Austin', date: '2011-10-11' },
  62.         { value: 61.8, city: 'New York', date: '2011-10-12' },
  63.         { value: 61.5, city: 'Alaska', date: '2011-10-12' },
  64.         { value: 75.3, city: 'Austin', date: '2011-10-12' },
  65.         { value: 63, city: 'New York', date: '2011-10-13' },
  66.         { value: 64.3, city: 'Alaska', date: '2011-10-13' },
  67.         { value: 76.6, city: 'Austin', date: '2011-10-13' },
  68.         { value: 66.9, city: 'New York', date: '2011-10-14' },
  69.         { value: 67.1, city: 'Alaska', date: '2011-10-14' },
  70.         { value: 66.6, city: 'Austin', date: '2011-10-14' },
  71.         { value: 61.7, city: 'New York', date: '2011-10-15' },
  72.         { value: 64.6, city: 'Alaska', date: '2011-10-15' },
  73.         { value: 68, city: 'Austin', date: '2011-10-15' },
  74.         { value: 61.8, city: 'New York', date: '2011-10-16' },
  75.         { value: 61.6, city: 'Alaska', date: '2011-10-16' },
  76.         { value: 70.6, city: 'Austin', date: '2011-10-16' },
  77.         { value: 62.8, city: 'New York', date: '2011-10-17' },
  78.         { value: 61.1, city: 'Alaska', date: '2011-10-17' },
  79.         { value: 71.1, city: 'Austin', date: '2011-10-17' },
  80.         { value: 60.8, city: 'New York', date: '2011-10-18' },
  81.         { value: 59.2, city: 'Alaska', date: '2011-10-18' },
  82.         { value: 70, city: 'Austin', date: '2011-10-18' },
  83.         { value: 62.1, city: 'New York', date: '2011-10-19' },
  84.         { value: 58.9, city: 'Alaska', date: '2011-10-19' },
  85.         { value: 61.6, city: 'Austin', date: '2011-10-19' },
  86.         { value: 65.1, city: 'New York', date: '2011-10-20' },
  87.         { value: 57.2, city: 'Alaska', date: '2011-10-20' },
  88.         { value: 57.4, city: 'Austin', date: '2011-10-20' },
  89.         { value: 55.6, city: 'New York', date: '2011-10-21' },
  90.         { value: 56.4, city: 'Alaska', date: '2011-10-21' },
  91.         { value: 64.3, city: 'Austin', date: '2011-10-21' },
  92.         { value: 54.4, city: 'New York', date: '2011-10-22' },
  93.         { value: 60.7, city: 'Alaska', date: '2011-10-22' },
  94.         { value: 72.4, city: 'Austin', date: '2011-10-22' },
  95.         { value: 54.4, city: 'New York', date: '2011-10-23' },
  96.         { value: 65.1, city: 'Alaska', date: '2011-10-23' },
  97.         { value: 72.4, city: 'Austin', date: '2011-10-23' },
  98.         { value: 54.8, city: 'New York', date: '2011-10-24' },
  99.         { value: 60.9, city: 'Alaska', date: '2011-10-24' },
  100.         { value: 72.5, city: 'Austin', date: '2011-10-24' },
  101.         { value: 57.9, city: 'New York', date: '2011-10-25' },
  102.         { value: 56.1, city: 'Alaska', date: '2011-10-25' },
  103.         { value: 72.7, city: 'Austin', date: '2011-10-25' },
  104.         { value: 54.6, city: 'New York', date: '2011-10-26' },
  105.         { value: 54.6, city: 'Alaska', date: '2011-10-26' },
  106.         { value: 73.4, city: 'Austin', date: '2011-10-26' },
  107.         { value: 54.4, city: 'New York', date: '2011-10-27' },
  108.         { value: 56.1, city: 'Alaska', date: '2011-10-27' },
  109.         { value: 70.7, city: 'Austin', date: '2011-10-27' },
  110.         { value: 42.5, city: 'New York', date: '2011-10-28' },
  111.         { value: 58.1, city: 'Alaska', date: '2011-10-28' },
  112.         { value: 56.8, city: 'Austin', date: '2011-10-28' },
  113.         { value: 40.9, city: 'New York', date: '2011-10-29' },
  114.         { value: 57.5, city: 'Alaska', date: '2011-10-29' },
  115.         { value: 51, city: 'Austin', date: '2011-10-29' },
  116.         { value: 38.6, city: 'New York', date: '2011-10-30' },
  117.         { value: 57.7, city: 'Alaska', date: '2011-10-30' },
  118.         { value: 54.9, city: 'Austin', date: '2011-10-30' },
  119.         { value: 44.2, city: 'New York', date: '2011-10-31' },
  120.         { value: 55.1, city: 'Alaska', date: '2011-10-31' },
  121.         { value: 58.8, city: 'Austin', date: '2011-10-31' },
  122.         { value: 49.6, city: 'New York', date: '2011-11-01' },
  123.         { value: 57.9, city: 'Alaska', date: '2011-11-01' },
  124.         { value: 62.6, city: 'Austin', date: '2011-11-01' },
  125.         { value: 47.2, city: 'New York', date: '2011-11-02' },
  126.         { value: 64.6, city: 'Alaska', date: '2011-11-02' },
  127.         { value: 71, city: 'Austin', date: '2011-11-02' }
  128.       ]
  129.     }
  130.   }
  131. }
  132. </script>

安装 - 图14 Show code

层叠柱状图

安装 - 图15

  1. <template>
  2.   <div>
  3.     <v-chart ref="demo" :data="data">
  4.       <v-scale x field="月份" />
  5.       <v-scale y field="月均降雨量" />
  6.       <v-bar series-field="name" adjust="stack" />
  7.       <v-tooltip show-value-in-legend />
  8.     </v-chart>
  10.     <x-button type="primary" plain @click.native="$refs.demo.rerender()">rerender</x-button>
  11.   </div>
  12. </template>
  14. <script>
  15. import { VChart, VLine, VArea, VTooltip, VLegend, VBar, XButton, VScale } from 'vux'
  17. export default {
  18.   components: {
  19.     VChart,
  20.     VLine,
  21.     VArea,
  22.     VTooltip,
  23.     VLegend,
  24.     VBar,
  25.     XButton,
  26.     VScale
  27.   },
  28.   data () {
  29.     return {
  30.       data: [
  31.         { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
  32.         { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
  33.         { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
  34.         { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  35.         { name: 'London', 月份: 'May.', 月均降雨量: 47 },
  36.         { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  37.         { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  38.         { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  39.         { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  40.         { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  41.         { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  42.         { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  43.         { name: 'Berlin', 月份: 'May.', 月均降雨量: 52.6 },
  44.         { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  45.         { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  46.         { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }
  47.       ]
  48.     }
  49.   }
  50. }
  51. </script>

安装 - 图16 Show code

分组柱状图

安装 - 图17

  1. <template>
  2.   <div>
  3.     <v-chart
  4.       ref="demo"
  5.       :data="data">
  6.       <v-scale x field="月份" />
  7.       <v-scale y field="月均降雨量" />
  8.       <v-bar series-field="name" :adjust="{
  9.         type: 'dodge',
  10.         marginRatio: 0.05 // 设置分组间柱子的间距
  11.       }" />
  12.       <v-tooltip show-value-in-legend />
  13.     </v-chart>
  15.     <x-button type="primary" plain @click.native="$refs.demo.rerender()">rerender</x-button>
  16.   </div>
  17. </template>
  19. <script>
  20. import { VChart, VLine, VArea, VTooltip, VLegend, VBar, XButton, VScale } from 'vux'
  22. export default {
  23.   components: {
  24.     VChart,
  25.     VLine,
  26.     VArea,
  27.     VTooltip,
  28.     VLegend,
  29.     VBar,
  30.     XButton,
  31.     VScale
  32.   },
  33.   data () {
  34.     return {
  35.       data: [
  36.         { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
  37.         { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
  38.         { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
  39.         { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  40.         { name: 'London', 月份: 'May.', 月均降雨量: 47 },
  41.         { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  42.         { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  43.         { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  44.         { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  45.         { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  46.         { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  47.         { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  48.         { name: 'Berlin', 月份: 'May.', 月均降雨量: 52.6 },
  49.         { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  50.         { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  51.         { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }
  52.       ]
  53.     }
  54.   }
  55. }
  56. </script>

安装 - 图18 Show code

百分比柱状图

安装 - 图19