版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

  • pkchart.setXAxis,pkchart.setYAxis,pkchart.setSeriesData 通常必须都调用
  • 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个数应该和序列数据最大个数相等,否则会导致序列数据中超出个数的数据显示不了。每个元素应该该属性是个数组,如:['周一', '周二', '周三', '周四', '周五', '周六', '周日']。
      • 示例:pkchart.setXAxis("chart1",[{type:"category",data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']}]);
      • 示例:pkchart.setXAxis("chart1",[{type:"category"}]);
    • axisPointer属性:配合type==category且data不为空才有效果。鼠标移动到柱子上显示效果,缺省为阴影。如果type为空则不显示阴影。{type: 'shadow'}结合起来可以显示Y轴每个刻度的单位。
      • 示例:pkchart.setXAxis("chart1",[{axisPointer:{type: 'shadow'}}]);
  • setYAxis(objectname,yAxises)。设置一个或多个Y轴信息。不适用于雷达图和饼图
    • 本函数如果不调用,将会有1个Y轴,且Y轴刻度将会根据数值自适应生成,且Y轴不显示名称和刻度的单位。
    • yAxises是一个数组,第一个元素表示一个第一个Y轴,第二个元素表示第二个Y轴。通常用1个Y轴就可以了。如果给出2个Y轴信息,则两个Y轴则分布在两侧,如上面示例
      • 示例:pkchart.setYAxis("chart1",[{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'}
      • 示例:pkchart.setYAxis("chart1",[{type: 'value',axisLabel: {formatter: '{value} ml'}}]);
  • pkchart.setSeriesData:function(objectname,seriesData)。填充序列数据,必须调用。seriesData为数组,每个数组元素又是一个数组
    • 如果x轴的type==category,则每个序列数据是一个数组,
      • 示例:
      • pkchart.setXAxis("chart1",[{type:"category",data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']}]);
      • pkchart.setYAxis("chart1",[{'name':'水量','name':'温度'}]);
      • pkchart.setSeriesData("chart1", [[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,则每个序列数据数组的元素是时间+数值。
      • 示例:
      • pkchart.setXAxis("chart1",[{type:"time",data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']}]);
      • pkchart.setYAxis("chart1",[{'name':'水量','name':'温度'}]);
      • pkchart.setSeriesData("chart1",[[[1522306819000, 2], [1522306919000, 1], [1522307019000, 3], [1522307119000, 1], [1522307120000, 1],[1522307230000, 1], [1522302230000, 1], [1522307430000, 1], [1522407230000, 1]]]);

可选方法

  • 下面所有方法为可选,增加附加特性
  • 雷达图和饼图不需要设置X和Y轴信息,即不需要调用setXAxis和setYAxis
  • 如果需要图例,每个都需要单独设置,调用setLegend
  • 饼图只需要一个序列的数据
  • setSeriesInfo(objectname,seriesInfo)。设置每一序列数据的信息(不包含数据)。适用于所有图形。seriesInfo为数组,其中每个元素属性如下:
    • name属性:序列数据的名称。鼠标放在柱子上时,给名称会提示出来。另外,如果选择了显示图例,那么该属性也会显示在图例中。
      • pkchart.setSeriesInfo("chart1",[{name: '用水量',type:"line"}]);
      • pkchart.setSeriesInfo("chart1",[{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'}])}
      • 示例:pkchart.setSeriesInfo("chart1",[{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)。设定图表的标题和副标题,无返回值。适用于所有图表类型。不设置时将不显示标题,标题和副标题都可以不设置。

    • 示例:pkchart.setTitle("chart1","深圳月最低生活费组成(单位:元)","From ExcelHome");

    • 示例:pkchart.setTitle("chart1","深圳月最低生活费组成(单位:元)");
    • 示例:不调用,不带标题

  • setTooltip(objectname,tooltip)。设置鼠标放在图形后的提示信息,这是一个和X轴平行的虚线。适用于柱状图和折线图
    • trigger属性,值:axis,意味沿X轴的虚线。这是也是缺省值。
    • axisPointer属性,光标
      • 子属性type,值: 'cross'表示显示,空字符串表示不显示
      • 子属性crossStyle,定义颜色,值: {color: '#999'}
    • 示例:pkchart.setTooltip("chart1",{"trigger":"axis","axisPointer":{"type":""}})不显示光标
    • 示例:pkchart.setTooltip("chart1",{"trigger":"axis","axisPointer":{"type":"cross"}}),显示光标
  • setLegend(objectname,legends)。设定图例显示哪些。适用于所有图表类型
  • 和pkchart.setSeriesInfo("chart1",[{name: '用水量',type:"bar"}]);配合使用 
    • 某个图例必须:和每个序列的名字相同,或者和一个序列内部的每个值的名字相同。如果这个图例和两者都不相同,即使设置了也不会显示该图例 
    • data属性:数组,图例名称,如:['预算分配(Allocated Budget)', '实际开销(Actual Spending)']
    • 示例:pkchart.setLegend("chart1",{data:["用水量"]});
  • setToolbox(objectname,toolbox)。设置右上角工具栏的工具是否显示,显示哪些。适用于所有图表类型
    • 示例:pkchart.setToolbox("chart1",{show:true})
    • show属性:是否显示工具
    • feature属性,可以定义显示具体哪些工具
      • 示例feature: {
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true}
        }
  • setRadar(objectname,radar)。设定雷达图显示哪些指示器。适用于雷达图类型
    • shape属性。指示雷达图形状,有圆形和多边形。值可以为:circle或者无(多边形)
    • name属性,设置雷达图上显示的名称的样式。textStyle:{color: '#FF0000',backgroundColor: '#999',borderRadius: 3,padding: [3, 5]}
    • indicator属性。雷达图上有哪些指示器。必选。是一个数组
    • 示例:pkchart.setRadar("chart1",{indicator:[{ name: '销售(sales)', max: 6500},{ name: '管理(Administration)', max: 16000},{ name: '信息技术(Information Techology)', max: 30000},{ name: '客服(Customer Support)', max: 38000},{ name: '研发(Development)', max: 52000},{ name: '市场(Marketing)', max: 25000}]});

...