• VChart
    • 安装
    • v-chart
    • 属性
    • 事件
    • 方法
    • v-line
    • 属性
    • v-area
    • 属性
    • v-bar
    • 属性
    • v-pie
    • v-point
    • v-scale
    • 属性
    • v-axis
    • 属性
    • v-guide
    • 属性
    • v-legend
    • 属性
    • v-guide
    • 属性
    • 重要提示及已知问题
    • 贡献者
    • 发布日志

    VChart

    VChart

    Beta

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

    v-chart - 图1

    二维码

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

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

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

    • 介绍
    • 安装
    • 栗子
      • 基本折线图
      • 折线图:平滑曲线
      • 动态数据：实时折线
      • 折线图：渐变
      • 折线图:对比
    • API
    • 重要提示及已知问题
    • 贡献者
    • 版本更新
      Install

    安装

    局部注册

    全局注册

    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