基于echarts 的图表控件，api参考网址：的图表控件的柱状图部分。api参考网址：https://www.echartsjs.com/zh/index.html

柱状图控件，包括折线、柱状图（竖直）、bar图（水平图）。支持效果：包括折线、柱状图（竖直）、bar图（水平图）等形式。1.柱状图

工具位置

...

• 左侧图表控件

Image Removed

pkchartbar.setOption(objectName, option) objectName 控件名称，

图表配置项样例：option= {
title: {
text: '柱状图'
},
tooltip: {
trigger: 'axis',
show: false
},
legend: {
data: ["默认值"],
show: false
},
toolbox: {
show: false,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: {
type: 'category',
data: [1, 2, 3, 4]
},
yAxis: {
type: 'value'
},
series: [{
name: "默认值",
type: 'bar',
data: [1, 2, 3, 4]
}]
};

2.折线图

Image Removed

Image Removed

pkchartline.setOption(objectName, option) objectName 控件名称，

option是配置项

样例如下:

option= {
title: {
text: '折线图'
},
tooltip: {
trigger: 'axis',
show: false
},
legend: {
data: ["默认值"],
show: false
},
toolbox: {
show: false,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: "默认值",
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'

Image Added

画面效果

Image Added

方法

• js对象名称：pkchartbar

• setTitle:function(objectname,title,subtitle)。设定图表的标题和子标题。无返回值。示例：pkchartbar.setTitle("charbar1","深圳月最低生活费组成（单位：元）","From ExcelHome");
  
  Image Added

• setTooltip:function(objectname,tooltip)
• setToolbox:function(objectname,feature)。示例：pkmobileswitch.setBgColor("switch1","green")
• setLegend:function(objectname,lengendNames)。示例：pkmobileswitch.setBgColor("switch1","green")
• setXAxisInfo:function(objectname,xAxisesInfo)。示例：pkmobileswitch.setBgColor("switch1","green")
• setXAxisData:function(objectname,xAxisesData)。示例：pkmobileswitch.setBgColor("switch1","green")
• setYAxisInfo:function(objectname,yAxisesInfo)
• setYAxisData:function(objectname,yAxisesData)
  setToolbox:function(objectname,feature)。示例：pkmobileswitch.setBgColor("switch1","green")
  
• setSeriesInfo:function(objectname,seriesInfo)
• setSeriesData:function(objectname,seriesData)
  完整示例1：
  完整示例2：
  完整示例3：

专有事件

• onChange事件。当鼠标点击某个柱子时，触发onChange事件。参数：objectname,value。其中value包括：value,name等

Image Added

专有动画关联

• 无

专有属性配置对话框

• 暂无

...