后浪云百度小程序教程：chart 图表

2022-9-15
  • chart 图表
    • 属性说明
      • chartOptions 有效值
    • 示例
      • 代码示例

    chart 图表

    解释：图表组件，提供了常规的折线图、柱状图、饼图，支持 SVG + Canvas 两种渲染引擎，使用扁平化数据配置完成开发。

    属性说明

    属性名 类型 必填 默认值 说明

    chartOptions

    Object

    是

    图表数据及样式参数

    chartOptions 有效值

    属性名 类型 必填 默认值 说明

    canvasWidth

    Number

    是

    canvas 宽度（单位：px）

    canvasHiehgt

    Number

    是

    canvas 高度（单位：px）

    canvasId

    String

    是

    canvasId

    animation

    Number

    否

    10000

    canvas 动画持续时长（单位：ms）

    renderType

    String

    否

    canvas

    图表渲染类型，支持 canvas，svg 两种

    type

    String

    否

    line

    渲染类型，支持 line（折线图）、pie（饼图）、 bar（柱图）

    startAngle

    Number

    否

    -180

    饼图起始渲染角度

    radius

    String

    否

    是否支持环图，[80, 90] 数组值代表圆半径

    legend

    Object

    否

    {
      show: true
    }

    tooltip

    Object

    否

    {
      show: true
    }

    yAxis

    Object

    是

    柱图 yAxis 与 xAxis 可以类型互换，实现竖向和横向柱图切换
    {
      type: ‘value’
    }

    xAxis

    String

    是

    {
      type: ‘category’,
      data: [‘2017’, ‘2018’, ‘2019’, ‘2020’]
    }

    series

    String

    否

    折线 or 柱状图数据
    [{  
      name: ‘成交量1’,
      data: [42, 26, 17, 32]
    },
    {  
      name: ‘成交量1’,
      data: [42, 26, 17, 32]
    }]
    饼图数据
    [{  
      name: ‘成交量1’,
      data: 1
    },
    {  
      name: ‘成交量1’,
      data: 2
    },
    {  
      name: ‘成交量1’,
      data: 3
    }]

    styleConfig

    Object

    否

    目前支持设置图表色值
    {
      color: [‘#3388ff’, ‘#ff4040’, …]
    }

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    后浪云百度小程序教程：chart 图表插图

    请使用百度APP扫码

    代码示例

    • SWAN
    • JS
    • CSS
    • JSON
     
 
 
      
  
  
  
    1. <view class="chart-container">
      2. 
  
  
  
    2.  <view class="tab">折线图</view>
      3. 
  
  
  
    3.  <view>
      4. 
  
  
  
    4.  <view class="container-chart">
      5. 
  
  
  
    5.  <div class="btn-group">
      6. 
  
  
  
    6.  <button type="primary" bindtap="showViewM2" data-type="single">单折线图</button>
      7. 
  
  
  
    7.  <button type="defualt" bindtap="showViewM2" data-type="multi">复合折线图</button>
      8. 
  
  
  
    8.  </div>
      9. 
  
  
  
    9.  <view class="chart-single-content">
      10. 
  
  
  
    10.  <smt-chart chart-options="{{m2Chartoptions}}" />
      11. 
  
  
  
    11.  </view> 
      12. 
  
  
  
    12.  </view>
      13. 
  
  
  
      14. 
  
  
  
    14.  <view class="setting">
      15. 
  
  
  
    15.  <view class="item-title item-scroll block border-bottom">自定义样式</view>
      16. 
  
  
  
    16.  <view class="item-scroll block border-bottom">
      17. 
  
  
  
    17.  <text class="switch-text">显示图例(Lenged)</text>
      18. 
  
  
  
    18.  <switch bindchange="changeLengendM2" checked></switch>
      19. 
  
  
  
    19.  </view>
      20. 
  
  
  
    20.  <view class="item-scroll block border-bottom">
      21. 
  
  
  
    21.  <text class="switch-text">负值状态</text>
      22. 
  
  
  
    22.  <switch bindchange="changeNegativeValueM2"></switch>
      23. 
  
  
  
    23.  </view>
      24. 
  
  
  
    24.  <view class="item-scroll block border-bottom">
      25. 
  
  
  
    25.  <text class="switch-text">正负值状态</text>
      26. 
  
  
  
    26.  <switch bindchange="changeCrossValueM2"></switch>
      27. 
  
  
  
    27.  </view>
      28. 
  
  
  
    28.  </view>
      29. 
  
  
  
    29.  </view>
      30. 
  
  
  
      31. 
  
  
  
    31.  <view class="tab">柱状图</view>
      32. 
  
  
  
    32.  <view>
      33. 
  
  
  
    33.  <view class="container-chart">
      34. 
  
  
  
    34.  <div class="btn-group">
      35. 
  
  
  
    35.  <button type="primary" bindtap="showViewM1" data-active-name="m1" data-type="single">单柱图</button>
      36. 
  
  
  
    36.  <button type="defualt" bindtap="showViewM1" data-active-name="m1" data-type="multi">复合柱图</button>
      37. 
  
  
  
    37.  </div>
      38. 
  
  
  
    38.  <view class="chart-single-content">
      39. 
  
  
  
    39.  <smt-chart chart-options="{{m1Chartoptions}}" />
      40. 
  
  
  
    40.  </view>
      41. 
  
  
  
    41.  </view>
      42. 
  
  
  
      43. 
  
  
  
    43.  <view class="setting">
      44. 
  
  
  
    44.  <view class="item-title item-scroll block border-bottom">自定义样式</view>
      45. 
  
  
  
    45.  <view class="item-scroll block border-bottom">
      46. 
  
  
  
    46.  <text class="switch-text">柱图横向展示</text>
      47. 
  
  
  
    47.  <switch bindchange="changeZoom"></switch>
      48. 
  
  
  
    48.  </view>
      49. 
  
  
  
    49.  <view class="item-scroll block border-bottom">
      50. 
  
  
  
    50.  <text class="switch-text">显示图例(Lenged)</text>
      51. 
  
  
  
    51.  <switch bindchange="changeLengendM1" checked></switch>
      52. 
  
  
  
    52.  </view>
      53. 
  
  
  
    53.  <view class="item-scroll block border-bottom">
      54. 
  
  
  
    54.  <text class="switch-text">负值状态</text>
      55. 
  
  
  
    55.  <switch bindchange="changeNegativeValueM1"></switch>
      56. 
  
  
  
    56.  </view>
      57. 
  
  
  
    57.  <view class="item-scroll block border-bottom">
      58. 
  
  
  
    58.  <text class="switch-text">正负值状态</text>
      59. 
  
  
  
    59.  <switch bindchange="changeCrossValueM1"></switch>
      60. 
  
  
  
    60.  </view>
      61. 
  
  
  
    61.  </view>
      62. 
  
  
  
    62.  </view>
      63. 
  
  
  
      64. 
  
  
  
    64.  <view class="tab">饼状图</view>
      65. 
  
  
  
    65.  <view>
      66. 
  
  
  
    66.  <view class="container-chart">
      67. 
  
  
  
    67.  <div class="btn-group">
      68. 
  
  
  
    68.  <button type="primary" bindtap="showViewM3" data-type="single">饼状图</button>
      69. 
  
  
  
    69.  <button type="defualt" bindtap="showViewM3" data-type="multi">环状图</button>
      70. 
  
  
  
    70.  </div>
      71. 
  
  
  
    71.  <view class="chart-single-content">
      72. 
  
  
  
    72.  <smt-chart chart-options="{{m3Chartoptions}}" />
      73. 
  
  
  
    73.  </view>
      74. 
  
  
  
    74.  </view>
      75. 
  
  
  
      76. 
  
  
  
    76.  <view class="setting">
      77. 
  
  
  
    77.  <view class="item-title item-scroll block border-bottom">自定义样式</view>
      78. 
  
  
  
    78.  <view class="item-scroll block border-bottom">
      79. 
  
  
  
    79.  <text class="switch-text">显示图例(Lenged)</text>
      80. 
  
  
  
    80.  <switch bindchange="changeLengendM3" checked></switch>
      81. 
  
  
  
    81.  </view>
      82. 
  
  
  
    82.  </view>
      83. 
  
  
  
    83.  </view>
      84. 
  
  
  
      85. 
  
  
  
    85. </view>
      86.
    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186003/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图