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

包括折线、柱状图（竖直）、bar图（水平图）等形式。

工具位置

• 左侧图表控件

画面效果

必需方法

• js对象名称：pkchartbar
• setSeriesData:function(objectname,seriesData)。填充序列数据，必须调用。seriesData为数组，每个数组元素又是一个数组
  • 如果x轴的type==category，则每个序列数据是一个数组，
    • 示例：pkchartbar.setSeriesData("bar1", [[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]]);
    • 
  • 如果x轴的type==time，则每个序列数据数组的元素是时间+数值。
    • 示例：pkchartbar.setSeriesData("bar1",[[[1522306819000, 2], [1522306919000, 1], [1522307019000, 3], [1522307119000, 1], [1522307120000, 1],[1522307230000, 1], [1522302230000, 1], [1522307430000, 1], [1522407230000, 1]]]);

• 下面所有方法为可选，增加附加特性
• setXAxis:function(objectname,xAxises)。设置一个或多个X轴信息（不包含数据）。
  • 本函数可以不调用。如果不调用，将会有1个X轴，X轴无刻度值显示。
  • xAxises是一个数组，第一个元素表示一个第一个X轴，第二个元素表示第二个X轴。通常用1个X轴就可以了。如果给出2个X轴信息，则两个X轴上下错开
  • type属性：每个X轴应该给出一个type。category/time/无。
    • category表示按照类目设置，此时必须通过data属性给出类目名称（个数需要等于数据的个数）。
    • time表示按照序列给出的时间，此时data属性赋值无效，序列数据的data赋值格式：[[1522306819000, 2], [1522306919000, 1], [1522307019000, 3], [1522307119000, 1], [1522307120000, 1],[1522307230000, 1], [1522302230000, 1], [1522307430000, 1], [1522407230000, 1]];
      
  • data属性：配合type==category使用，指定Y轴每个刻度显示的名字。如果未赋值，则不显示刻度文字，但刻度标尺依然显示。data个数应该和序列数据最大个数相等，否则会导致序列数据中超出个数的数据显示不了。每个元素应该该属性是个数组，如：['周一', '周二', '周三', '周四', '周五', '周六', '周日']。
    • 示例：pkchartbar.setXAxis("bar1",[{data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']}]);
    • 
  • axisPointer属性：配合type==category且data不为空才有效果。鼠标移动到柱子上显示效果，缺省为阴影。如果type为空则不显示阴影。{type: 'shadow'}结合起来可以显示Y轴每个刻度的单位。
    • 示例：pkchartbar.setXAxis("bar1",[{axisPointer:{type: 'shadow'}}]);
  • 
• setYAxis(objectname,yAxises)。设置一个或多个Y轴信息。
  • 本函数如果不调用，将会有1个Y轴，且Y轴刻度将会根据数值自适应生成，且Y轴不显示名称和刻度的单位。
  • yAxises是一个数组，第一个元素表示一个第一个Y轴，第二个元素表示第二个Y轴。通常用1个Y轴就可以了。如果给出2个Y轴信息，则两个Y轴则分布在两侧，如上面示例
    • 示例：pkchartbar.setYAxis("bar1",[{name: '水量'},name: '温度'}]);
    • 
  • name属性：每个Y轴应该给出一个name。如果不给则不显示Y轴名字。
  • data属性：通常不需要使用。如果需要指定Y轴每个刻度显示的名字，那么应该给出data属性，且data个数应该和序列数据最大个数相等，否则会导致序列数据中超出个数的数据显示不了。
    • 每个元素应该该属性是个数组，如：['周一', '周二', '周三', '周四', '周五', '周六', '周日']。如果不指定，则根据数值自动指定刻度和间隔
  • min,max,interval属性：通常不需要使用。三个结合起来，手工指定Y轴每个刻度间隔。min必须小于数据数值的最小值，max必须大于数值的最大值，否则将导致最小值或最大值柱子显示不全。示例：min: 0,max: 250,interval: 50。
  • type,axisLabel属性：结合起来可以显示Y轴每个刻度的单位。type: 'value',axisLabel: {formatter: '{value} ml'}
    • 示例：pkchartbar.setYAxis("bar1",[{type: 'value',axisLabel: {formatter: '{value} ml'}}]);
    • 
• setSeriesInfo(objectname,seriesInfo)。设置每一序列数据的信息（不包含数据）。seriesInfo为数组，其中每个元素属性如下：
  • name属性：序列数据的名称。鼠标放在柱子上时，给名称会提示出来。另外，如果选择了显示图例，那么该属性也会显示在图例中。
    • pkchartbar.setSeriesInfo("bar1",[{name: '用水量',type:"line"}]);
    • pkchartbar.setSeriesInfo("bar1",[{name: '用水量',type:"bar"}]);
    • 
  • type属性：数据显示类别，支持：bar/line
  • itemStyle属性。每一个柱子显示的风格。如设置为渐变色，则：itemStyle:{color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#83bff6'},{offset: 0.5, color: '#188df0'},{offset: 1, color: '#188df0'}])}
    • 示例：pkchartbar.setSeriesInfo("bar1",[{name: '用水量',type:"bar",itemStyle:{color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#83bff6'},{offset: 0.5, color: '#188df0'},{offset: 1, color: '#188df0'}])}}]);
    • 
  • 本函数如果不调用，则图形不显示名字，且类型缺省为bar

• setTitle:function(objectname,title,subtitle)。设定图表的标题和副标题，无返回值。不设置时将不显示标题，标题和副标题都可以不设置。

  • 示例：pkchartbar.setTitle("bar1","深圳月最低生活费组成（单位：元）","From ExcelHome");

  • 示例：pkchartbar.setTitle("bar1","深圳月最低生活费组成（单位：元）");

  • 示例：不调用，不带标题
    
    

• setTooltip(objectname,tooltip)。设置鼠标放在图形后的提示信息，这是一个和X轴平行的虚线
  • trigger属性，值：axis，意味沿X轴的虚线。这是也是缺省值。
  • axisPointer属性，光标
    • 子属性type，值： 'cross'表示显示，空字符串表示不显示
    • 子属性crossStyle，定义颜色，值: {color: '#999'}
  • 示例：pkchartbar.setTooltip("bar1",{"trigger":"axis","axisPointer":{"type":""}})不显示光标
  • 示例：pkchartbar.setTooltip("bar1",{"trigger":"axis","axisPointer":{"type":"cross"}})，显示光标
• setLegend:function(objectname,isShow)。设定每列数据的图例是否显示。isShow为1或者0，1表示显示，0表示不显示
  • 如果设置了序列数据的name，name调用本函数设置为1，则本函数即使调用了也不显示图例
  • 
• setToolbox(objectname,feature)。设置右上角工具栏的工具是否显示，显示哪些
  • • 示例：pkchartbar.setToolbox("bar1",{show:true})
      
    • 
  • feature属性，可以定义显示具体哪些工具
    • feature: {
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
      }
• 完整示例1---基本：
  • pkchartbar.setSeriesData("bar1", [[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]]);

• 完整示例2--标题和图例、X轴分类：
  • pkchartbar.setSeriesData("bar1", [[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]]);
  • pkchartbar.setSeriesInfo("bar1",[{name: '用水量',type:"bar"}]);
  • pkchartbar.setLegendShow("bar1",1)
  • pkchartbar.setTitle("bar1","用水量");
  • pkchartbar.setXAxis("bar1",[{data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']}]);
  • 
• 完整示例3--渐变效果：
  • pkchartbar.setSeriesData("bar1", [[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]]);
  • pkchartbar.setSeriesInfo("bar1",[{name: '用水量',type:"bar",itemStyle:{color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#83bff6'},{offset: 0.5, color: '#188df0'},{offset: 1, color: '#188df0'}])}}]);
  • 
• 完整示例3--柱状图和折线图混合：
  • pkchartbar.setSeriesData("bar1", [[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3][2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3][2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]]);
  • pkchartbar.setSeriesInfo("bar1",[{name: '蒸发量',type:"bar"},{name: '降水量',type:"bar"},{name: '平均温度',type:"line"}]);

专有事件

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

专有动画关联

• 无

专有属性配置对话框

• 暂无