创新互联百度小程序教程:chart图表

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

    chart 图表

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

    成都创新互联公司公司2013年成立,是专业互联网技术服务公司,拥有项目网站制作、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元孟州做网站,已为上家服务,为孟州各地企业和个人服务,联系电话:18982081108

    属性说明

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

    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 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例

    • SWAN
    • JS
    • CSS
    • JSON
     
     
     
    1. 折线图
  • 自定义样式
  • 显示图例(Lenged)
  • 负值状态
  • 正负值状态
  • 柱状图
  • 自定义样式
  • 柱图横向展示
  • 显示图例(Lenged)
  • 负值状态
  • 正负值状态
  • 饼状图
  • 自定义样式
  • 显示图例(Lenged)
  • 新闻名称:创新互联百度小程序教程:chart图表
    URL分享:http://www.36103.cn/qtweb/news4/24204.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    微信公众号知识

    同城分类信息