VChart

VChart

Beta

demo 原始链接编辑文档组件源码

v-chart - 图1

二维码

VChart 基于F2@蚂蚁金服(MIT license)封装的图表组件。

F2 是专为移动端定制的一套开箱即用的可视化解决方案，具有精简、高性能、易扩展的特性，适用于对性能、大小、扩展性要求严苛的场景。

组件部分属性可能未列出，可以直接参考 F2文档

安装

局部注册

全局注册

  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)

Examples基本折线图
基本折线图

v-chart - 图2

  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>

v-chart - 图3 Show code

折线图:平滑曲线
折线图:平滑曲线

v-chart - 图4

  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>

v-chart - 图5 Show code

动态数据：实时折线
动态数据：实时折线

v-chart - 图6

  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>

v-chart - 图7 Show code

折线图：渐变
折线图：渐变

v-chart - 图8

  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>

v-chart - 图9 Show code

折线图:对比
折线图:对比

v-chart - 图10

  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>

v-chart - 图11 Show code

折线图：显示点
折线图：显示点

v-chart - 图12

  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>

v-chart - 图13 Show code

层叠面积图
层叠面积图

v-chart - 图14

  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>

v-chart - 图15 Show code

层叠柱状图
层叠柱状图

v-chart - 图16

  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>

v-chart - 图17 Show code

分组柱状图
分组柱状图

v-chart - 图18

  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>

v-chart - 图19 Show code

百分比柱状图
百分比柱状图

v-chart - 图20

  1. <template>
  2.   <div>
  3.     <v-chart ref="demo" :data="data">
  4.       <v-scale x field="year" />
  5.       <v-scale y field="percent" :min="0" :max="0.5" :formatter="formatter" />
  6.       <v-bar series-field="country" 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.       formatter: function (val) {
  31.         return (val * 100).toFixed(0) + '%'
  32.       },
  33.       data: [
  34.         { country: 'Europe', year: '1750', value: 163, percent: 0.24511278195488723 },
  35.         { country: 'Asia', year: '1750', value: 502, percent: 0.7548872180451128 },
  36.         { country: 'Europe', year: '1800', value: 203, percent: 0.24224343675417662 },
  37.         { country: 'Asia', year: '1800', value: 635, percent: 0.7577565632458234 },
  38.         { country: 'Europe', year: '1850', value: 276, percent: 0.2543778801843318 },
  39.         { country: 'Asia', year: '1850', value: 809, percent: 0.7456221198156682 },
  40.         { country: 'Europe', year: '1900', value: 408, percent: 0.3011070110701107 },
  41.         { country: 'Asia', year: '1900', value: 947, percent: 0.6988929889298893 },
  42.         { country: 'Europe', year: '1950', value: 547, percent: 0.2806567470497691 },
  43.         { country: 'Asia', year: '1950', value: 1402, percent: 0.7193432529502309 },
  44.         { country: 'Europe', year: '1999', value: 729, percent: 0.16708686683474674 },
  45.         { country: 'Asia', year: '1999', value: 3634, percent: 0.8329131331652533 },
  46.         { country: 'Europe', year: '2050', value: 628, percent: 0.10651289009497965 },
  47.         { country: 'Asia', year: '2050', value: 5268, percent: 0.8934871099050203 },
  48.         { country: 'Europe', year: '2100', value: 828, percent: 0.10227272727272728 },
  49.         { country: 'Asia', year: '2100', value: 7268, percent: 0.8977272727272727 }
  50.       ]
  51.     }
  52.   }
  53. }
  54. </script>

v-chart - 图21 Show code

基础柱状图
基础柱状图

v-chart - 图22

  1. <template>
  2.   <div>
  3.     <v-chart
  4.       ref="demo"
  5.       :data="data">
  6.       <v-bar />
  7.       <v-tooltip :show-item-marker="false" />
  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 } from 'vux'
  17. export default {
  18.   components: {
  19.     VChart,
  20.     VLine,
  21.     VArea,
  22.     VTooltip,
  23.     VLegend,
  24.     VBar,
  25.     XButton
  26.   },
  27.   data () {
  28.     return {
  29.       data: [
  30.         { year: '1951 年', sales: 38 },
  31.         { year: '1952 年', sales: 52 },
  32.         { year: '1956 年', sales: 61 },
  33.         { year: '1957 年', sales: 145 },
  34.         { year: '1958 年', sales: 48 },
  35.         { year: '1959 年', sales: 38 },
  36.         { year: '1960 年', sales: 38 },
  37.         { year: '1962 年', sales: 38 }
  38.       ]
  39.     }
  40.   }
  41. }
  42. </script>

v-chart - 图23 Show code

带负值面积图
带负值面积图

v-chart - 图24

  1. <template>
  2.   <div>
  3.     <v-chart
  4.       :data="data">
  5.       <v-scale x :tick-count="0" />
  6.       <v-scale y :nice="false" :min="-100" :max="100" />
  7.       <v-tooltip />
  8.       <v-area />
  9.       <v-line />
  10.     </v-chart>
  11.   </div>
  12. </template>
  14. <script>
  15. import { VChart, VLine, VArea, VTooltip, VScale } from 'vux'
  17. export default {
  18.   components: {
  19.     VChart,
  20.     VLine,
  21.     VArea,
  22.     VTooltip,
  23.     VScale
  24.   },
  25.   data () {
  26.     return {
  27.       tooltip: {
  28.         showItemMarker: false,
  29.         onShow (ev) {
  30.           const { items } = ev
  31.           items[0].name = items[0].title
  32.         }
  33.       },
  34.       data: [
  35.         { month: 'Jan.', value: 6.06 },
  36.         { month: 'Feb.', value: 82.2 },
  37.         { month: 'Mar.', value: -22.11 },
  38.         { month: 'Apr.', value: 21.53 },
  39.         { month: 'May.', value: -21.74 },
  40.         { month: 'Jun.', value: 73.61 },
  41.         { month: 'Jul.', value: 53.75 },
  42.         { month: 'Aug.', value: 60.32 }
  43.       ]
  44.     }
  45.   }
  46. }
  47. </script>

v-chart - 图25 Show code

环图: 资产配置
环图: 资产配置

v-chart - 图26

  1. <template>
  2.   <div>
  3.     <v-chart
  4.       :data="data"
  5.       :padding="[20, 'auto']">
  6.       <v-tooltip disabled />
  7.       <v-scale y :options="yOptions" />
  8.       <v-pie :radius="0.85" :inner-radius="0.7" series-field="name" :colors="['#FE5D4D','#3BA4FF','#737DDE']" />
  9.       <v-legend :options="legendOptions" />
  10.       <v-guide type="html" :options="htmlOptions" />
  11.     </v-chart>
  12.   </div>
  13. </template>
  15. <script>
  16. import { VChart, VLine, VArea, VTooltip, VLegend, VBar, VPie, VGuide, VScale } from 'vux'
  18. const data = [
  19.   { name: '股票类', percent: 83.59, a: '1' },
  20.   { name: '债券类', percent: 2.17, a: '1' },
  21.   { name: '现金类', percent: 14.24, a: '1' }
  22. ]
  24. const map = {}
  25. data.map(obj => {
  26.   map[obj.name] = obj.percent + '%'
  27. })
  29. export default {
  30.   components: {
  31.     VChart,
  32.     VLine,
  33.     VArea,
  34.     VTooltip,
  35.     VLegend,
  36.     VBar,
  37.     VPie,
  38.     VGuide,
  39.     VScale
  40.   },
  41.   data () {
  42.     return {
  43.       map,
  44.       htmlOptions: {
  45.         position: [ '50%', '45%' ],
  46.         html: `
  47.           <div style="width: 250px;height: 40px;text-align: center;">
  48.             <div style="font-size: 16px">总资产</div>
  49.             <div style="font-size: 24px">133.08 亿</div>
  50.           </div>`
  51.       },
  52.       legendOptions: {
  53.         position: 'right',
  54.         itemFormatter (val) {
  55.           return val + '  ' + map[val]
  56.         }
  57.       },
  58.       yOptions: {
  59.         formatter (val) {
  60.           return val * 100 + '%'
  61.         }
  62.       },
  63.       data
  64.     }
  65.   }
  66. }
  67. </script>

v-chart - 图27 Show code

渐变填充面积图
渐变填充面积图

v-chart - 图28

  1. <template>
  2.   <div>
  3.     <v-chart
  4.       :data="data">
  5.       <v-scale x type="timeCat" :tick-count="3" />
  6.       <v-scale y :min="0"/>
  7.       <v-area :colors="gradient" shape="smooth" />
  8.       <v-line :colors="gradient" shape="smooth" />
  9.     </v-chart>
  10.   </div>
  11. </template>
  13. <script>
  14. import { VChart, VLine, VArea, VTooltip, VScale, VAxis } from 'vux'
  16. export default {
  17.   components: {
  18.     VChart,
  19.     VLine,
  20.     VArea,
  21.     VTooltip,
  22.     VScale,
  23.     VAxis
  24.   },
  25.   data () {
  26.     return {
  27.       gradient: [
  28.         [0, '#FE6384'],
  29.         [1, '#f7f7f7']
  30.       ],
  31.       data: [
  32.         { time: '2016-08-08 00:00:00', tem: 10 },
  33.         { time: '2016-08-08 00:10:00', tem: 22 },
  34.         { time: '2016-08-08 00:30:00', tem: 16 },
  35.         { time: '2016-08-09 00:35:00', tem: 26 },
  36.         { time: '2016-08-09 01:00:00', tem: 12 },
  37.         { time: '2016-08-09 01:20:00', tem: 26 },
  38.         { time: '2016-08-10 01:40:00', tem: 18 },
  39.         { time: '2016-08-10 02:00:00', tem: 26 },
  40.         { time: '2016-08-10 02:20:00', tem: 12 }
  41.       ]
  42.     }
  43.   }
  44. }
  45. </script>

v-chart - 图29 Show code

饼图
饼图

v-chart - 图30

  1. <template>
  2.   <div>
  3.      <v-chart :data="data">
  4.      <v-scale y :options="yOptions" />
  5.      <v-tooltip disabled />
  6.      <v-pie :radius="0.85" series-field="name" />
  7.      <v-legend :options="legendOptions" />
  8.     </v-chart>
  9.   </div>
  10. </template>
  12. <script>
  13. import { VChart, VLine, VArea, VTooltip, VLegend, VBar, VPie, VScale } from 'vux'
  15. const map = {
  16.   '芳华': '40%',
  17.   '妖猫传': '20%',
  18.   '机器之血': '18%',
  19.   '心理罪': '15%',
  20.   '寻梦环游记': '5%',
  21.   '其他': '2%'
  22. }
  24. export default {
  25.   components: {
  26.     VChart,
  27.     VLine,
  28.     VArea,
  29.     VTooltip,
  30.     VLegend,
  31.     VBar,
  32.     VPie,
  33.     VScale
  34.   },
  35.   data () {
  36.     return {
  37.       legendOptions: {
  38.         position: 'right',
  39.         itemFormatter (val) {
  40.           return val + '  ' + map[val]
  41.         }
  42.       },
  43.       yOptions: {
  44.         formatter (val) {
  45.           return val * 100 + '%'
  46.         }
  47.       },
  48.       map,
  49.       data: [
  50.         { name: '芳华', percent: 0.4, a: '1' },
  51.         { name: '妖猫传', percent: 0.2, a: '1' },
  52.         { name: '机器之血', percent: 0.18, a: '1' },
  53.         { name: '心理罪', percent: 0.15, a: '1' },
  54.         { name: '寻梦环游记', percent: 0.05, a: '1' },
  55.         { name: '其他', percent: 0.02, a: '1' }
  56.       ]
  57.     }
  58.   }
  59. }
  60. </script>

v-chart - 图31 Show code

区域图（存在空值）
区域图（存在空值）

v-chart - 图32

  1. <template>
  2.   <div>
  3.     <v-chart :data="data">
  4.       <v-tooltip show-crosshairs />
  5.       <v-area series-field="type" shape="smooth"/>
  6.       <v-legend disabled />
  7.       <v-line series-field="type" shape="smooth"/>
  8.     </v-chart>
  9.   </div>
  10. </template>
  12. <script>
  13. import { VChart, VLine, VArea, VTooltip, VLegend } from 'vux'
  15. /**
  16. *[
  17. * {"year":"1986","type":"ACME","value":162},
  18. * {"year":"1986","type":"Compitor","value":42}
  19. *]
  20. */
  21. import data from './area_empty.json'
  23. export default {
  24.   components: {
  25.     VChart,
  26.     VLine,
  27.     VArea,
  28.     VTooltip,
  29.     VLegend
  30.   },
  31.   data () {
  32.     return {
  33.       data
  34.     }
  35.   }
  36. }
  37. </script>

v-chart - 图33 Show code

散点图
散点图

v-chart - 图34

  1. <template>
  2.   <v-chart :data="data">
  3.     <v-scale x field="height" />
  4.     <v-scale y field="weight" />
  5.     <v-tooltip disabled />
  6.     <v-point
  7.       series-field="gender"
  8.       :styles="{
  9.         fillOpacity: 0.65
  10.       }"></v-point>
  11.   </v-chart>
  12. </template>
  14. <script>
  15. import { VChart, VPoint, VAxis, VTooltip, VScale } from 'vux'
  17. /**
  18. * [
  19. *   {"gender":"female","height":161.2,"weight":51.6},
  20. *   {"gender":"female","height":167.5,"weight":59}
  21. * ]
  22. */
  23. import data from './point.json'
  25. export default {
  26.   components: {
  27.     VChart,
  28.     VPoint,
  29.     VAxis,
  30.     VTooltip,
  31.     VScale
  32.   },
  33.   data () {
  34.     return {
  35.       data
  36.     }
  37.   }
  38. }
  39. </script>

v-chart - 图35 Show code

对比面积图：美国、苏联核储备对比
对比面积图：美国、苏联核储备对比

v-chart - 图36

  1. <template>
  2.   <div>
  3.     <v-chart :data="data">
  4.       <v-scale x field="year" />
  5.       <v-scale y field="value" :min="0" :tick-count="5" />
  6.       <v-area shape="smooth" series-field="country" />
  7.       <v-line shape="smooth" series-field="country" />
  8.       <v-tooltip show-value-in-legend />
  9.       <v-axis y :label="labelFormat"/>
  10.     </v-chart>
  11.   </div>
  12. </template>
  14. <script>
  15. import { VChart, VLine, VArea, VTooltip, VScale, VAxis } from 'vux'
  17. /**
  18. * [
  19. *  {"country":"USSR/Russia","value":4500,"year":2016},
  20. *  {"country":"USSR/Russia","value":4500,"year":2017}
  21. * ]
  22. */
  23. import data from './area_compare.json'
  25. export default {
  26.   components: {
  27.     VChart,
  28.     VLine,
  29.     VArea,
  30.     VTooltip,
  31.     VScale,
  32.     VAxis
  33.   },
  34.   data () {
  35.     return {
  36.       labelFormat: function (text) {
  37.         return {
  38.           text: text / 1000 + 'k'
  39.         }
  40.       },
  41.       data
  42.     }
  43.   }
  44. }
  45. </script>

v-chart - 图37 Show code

基础面积图
基础面积图

v-chart - 图38

  1. <template>
  2.   <div>
  3.     <v-chart :data="data">
  4.       <v-scale x :tick-count="0" />
  5.       <v-scale y :min="0" />
  6.       <v-tooltip show-crosshairs show-x-value/>
  7.       <v-area />
  8.       <v-line />
  9.     </v-chart>
  10.   </div>
  11. </template>
  13. <script>
  14. import { VChart, VLine, VArea, VTooltip, VScale, VAxis } from 'vux'
  16. export default {
  17.   components: {
  18.     VChart,
  19.     VLine,
  20.     VArea,
  21.     VTooltip,
  22.     VScale,
  23.     VAxis
  24.   },
  25.   data () {
  26.     return {
  27.       data: [
  28.         { time: 'Jan.', tem: 1000 },
  29.         { time: 'Feb.', tem: 2200 },
  30.         { time: 'Mar.', tem: 2000 },
  31.         { time: 'Apr.', tem: 2600 },
  32.         { time: 'May.', tem: 2000 },
  33.         { time: 'Jun.', tem: 2600 },
  34.         { time: 'Jul.', tem: 2800 },
  35.         { time: 'Aug.', tem: 2000 }
  36.       ]
  37.     }
  38.   }
  39. }
  40. </script>

v-chart - 图39 Show code

自定义渲染逻辑
自定义渲染逻辑

v-chart - 图40

  1. <template>
  2.   <div>
  3.     <v-chart
  4.       prevent-render
  5.       @on-render="renderChart"></v-chart>
  6.   </div>
  7. </template>
  9. <script>
  10. import { VChart } from 'vux'
  12. export default {
  13.   components: {
  14.     VChart
  15.   },
  16.   methods: {
  17.     renderChart ({ chart }) {
  18.       const data = [ { x: '1', y: 85 } ]
  19.       chart.source(data, {
  20.         y: {
  21.           max: 100,
  22.           min: 0
  23.         }
  24.       })
  25.       chart.axis(false)
  26.       chart.tooltip(false)
  27.       chart.coord('polar', {
  28.         transposed: true,
  29.         innerRadius: 0.8,
  30.         radius: 0.85
  31.       })
  32.       chart.guide().arc({
  33.         start: [ 0, 0 ],
  34.         end: [ 1, 99.98 ],
  35.         top: false,
  36.         style: {
  37.           lineWidth: 20,
  38.           stroke: '#ccc'
  39.         }
  40.       })
  41.       chart.guide().text({
  42.         position: [ '50%', '50%' ],
  43.         content: '85%',
  44.         style: {
  45.           fontSize: 24,
  46.           fill: '#1890FF'
  47.         }
  48.       })
  49.       chart.interval()
  50.         .position('x*y')
  51.         .size(20)
  52.         .animate({
  53.           appear: {
  54.             duration: 1200,
  55.             easing: 'cubicIn'
  56.           }
  57.         })
  58.       chart.render()
  59.     }
  60.   }
  61. }
  62. </script>

v-chart - 图41 Show code

v-chart

v-chart

属性

名字类型默认值说明版本要求
prevent-renderbooleanfalse是否自定义渲染逻辑v2.9.1
prevent-defaultbooleanfalse是否阻止默认行为v2.9.1

事件

名字参数说明版本要求
@on-render({ chart })渲染前触发，一般用于配合 prevent-render 自定义渲染逻辑v2.9.1

方法

名字参数说明版本要求
rerender清除并重新渲染v2.9.1
repaint重新渲染v2.9.1
destroy销毁图表，canvas dom 元素不会销毁v2.9.1

v-line

v-line

属性

名字类型默认值说明版本要求
shapestring线条形状，可选值 line(默认), smooth(平滑线), dash(虚线)v2.9.1
series-fieldstring用于绘制多组线条时的分组字段名。该属性相当于 F2 里的 color，出于理解和设置方便使用 series-fieldv2.9.1
colorsstringarray线条颜色，可以为单个颜色或者颜色列表。不指定时使用默认颜色。v2.9.1

v-area

v-area

属性

名字类型默认值说明版本要求
series-fieldstring用于绘制多组线条时的分组字段名。该属性相当于 F2 里的 color，出于理解和设置方便使用 series-fieldv2.9.1
colorsstringarray线条颜色，可以为单个颜色或者颜色列表。不指定时使用默认颜色。v2.9.1

v-bar

v-bar

属性

名字类型默认值说明版本要求
colorsstringarray线条颜色，可以为单个颜色或者颜色列表。不指定时使用默认颜色。v2.9.1

v-pie

v-pie

v-point

v-point

v-scale

v-scale

属性

名字类型默认值说明版本要求
fieldstring[组件属性]指定 坐标轴 字段。对于简单数据，VChart 可以判断使用哪个字段，但是如果顺序不确定或者多字段的数据，最好手动指定。v2.9.1
xboolean[组件属性]是否为 x轴 配置。v2.9.1
yboolean[组件属性]是否为 y轴 配置。v2.9.1
typestring指定不同的度量类型，支持的 type 为 identity、linear、cat、timeCat。v2.9.1
formatterfunction回调函数，用于格式化坐标轴刻度点的文本显示，会影响数据在坐标轴 axis、图例 legend、提示信息 tooltip 上的显示。v2.9.1
rangearray[0, 1]输出数据的范围，默认[0, 1]，格式为 [min, max]，min 和 max 均为 0 至 1 范围的数据。v2.9.1
aliasstring该数据字段的显示别名，一般用于将字段的英文名称转换成中文名(tooltip 中显示)。v2.9.1
tick-countnumber5坐标轴上刻度点的个数，设为 0 时表示全部显示。v2.9.1
ticksarray用于指定坐标轴上刻度点的文本信息，当用户设置了 ticks 就会按照 ticks 的个数和文本来显示。如 [ 0, 50, 100, 150, 200, 300, 500 ]v2.9.1

v-axis

v-axis

属性

名字类型默认值说明版本要求
disabledboolean禁用当前坐标轴。v2.9.1
xboolean[组件属性]是否为 x轴 配置。v2.9.1
yboolean[组件属性]是否为 y轴 配置。v2.9.1

v-guide

v-guide

属性

名字类型默认值说明版本要求
typestring辅助元素类型，可以为 line, text, tag, rect, html, arcv2.9.1
optionsobject辅助元素属性对象。你也可以在 template 里将属性分开写，不需要使用该 prop，同时使用时属性会被合并。v2.9.1

重要提示及已知问题

## 重要提示及已知问题



- Q全局设置分辨率(devicePixelRatio)



  1. // 入口文件处设置
    Vue.prototype.$devicePixelRatio = 2




- Q自定义渲染行为

在面对复杂的渲染逻辑时，直接使用组件无法满足。此时可以这样处理：



  1. <v-chart
      prevent-render
      @on-render="renderVChart"></v-chart>





  1. methods: {
      renderVChart ({ chart }) {
        // do what you want
      }
    }




- Q修改子组件配置不会自动刷新

是的，考虑到移动端更多是展示而不是操作，暂时不支持自动刷新。


- Q为什么我自己封装时会报错

要先了解 Vue 组件的生命周期，在 canvas 元素未 mounted 前 F2 无法正确渲染。



  1. mounted () {
      this.$nextTick(( => {
        // do what you want with F2
      })
    }






v-tooltip

## v-tooltip



## 属性


名字类型默认值说明版本要求
disabledbooleanfalse[快捷属性，非 F2 原有属性]是否禁用 tooltip, 相当于调用chart.tooltip(false)v2.9.1
show-x-valuebooleanfalse[快捷属性，非 F2 原有属性]用于单折线的情况，设定是否将 x 轴值显示在 tooltip 里，默认是 xLabel:yValue 的形式(value:23)，启用将变成 xValue:yValue 的形式(2017-01-01:23)，建议在 tickCount 无法完全显示时启用。该设置会覆盖原有 onShow 设置。v2.9.1
show-value-in-legendbooleanfalse[快捷属性，非 F2 原有属性]是否禁用默认 tooltip 而是显示在 legend 里。适用于有分组(series-field)情况。v2.9.1

v-legend

v-legend

属性

名字类型默认值说明版本要求
disabledbooleanfalse[快捷属性，非 F2 原有属性]是否禁用 legend, 相当于调用chart.legend(false)v2.9.1

v-guide

v-guide

属性

名字类型默认值说明版本要求
typestring辅助元素类型，可以为 line, text, tag, rect, html, arcv2.9.1
optionsobject辅助元素属性对象。你也可以在 template 里将属性分开写，不需要使用该 prop，同时使用时属性会被合并。v2.9.1

重要提示及已知问题

重要提示及已知问题

  • Q全局设置分辨率(devicePixelRatio)
  2. // 入口文件处设置
  3. Vue.prototype.$devicePixelRatio = 2
  • Q自定义渲染行为

在面对复杂的渲染逻辑时，直接使用组件无法满足。此时可以这样处理：

  2. <v-chart
  3.   prevent-render
  4.   @on-render="renderVChart"></v-chart>
  2. methods: {
  3.   renderVChart ({ chart }) {
  4.     // do what you want
  5.   }
  6. }
  • Q修改子组件配置不会自动刷新

是的，考虑到移动端更多是展示而不是操作，暂时不支持自动刷新。

  • Q为什么我自己封装时会报错

要先了解 Vue 组件的生命周期，在 canvas 元素未 mounted 前 F2 无法正确渲染。

  2. mounted () {
  3.   this.$nextTick(( => {
  4.     // do what you want with F2
  5.   })
  6. }

贡献者

贡献者

该组件(包含文档)迭代次数 7，贡献人数 3
jiagangairyland黄涛

Changelog

发布日志

  • 2.9.3 [enhance] v-point 可以设置size和shape, v-line 可以设置shape