13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

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

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扫码

代码示例

 
 
 
  1. 折线图
  • 自定义样式
  • 显示图例(Lenged)
  • 负值状态
  • 正负值状态
  • 柱状图
  • 自定义样式
  • 柱图横向展示
  • 显示图例(Lenged)
  • 负值状态
  • 正负值状态
  • 饼状图
  • 自定义样式
  • 显示图例(Lenged)

  • 文章名称:创新互联百度小程序教程:chart图表
    文章地址:http://cdbrznjsb.com/article/dhijhjh.html

    其他资讯

    让你的专属顾问为你服务