工具位置

 



画面效果

必需方法

万能图表仪表盘专有方法

所有仪表盘在同一个page里面操作

pkdashboard.setVal(objectname,data)

objectname：传入仪表盘名字，

data：传入从echarts里面找来的图表的option

统计图表方法

可选方法

完整示例。

     复杂效果示例图：
var XAxis = [
    {
        type: "category",
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: {
            textStyle: {
                color: '#a2d4e6'
            }
        },
        axisTick: {
            alignWithLabel: true
        }
    }

]
pkchart.setXAxis("chart1", XAxis);
var yAxis = [
    {
        type: 'value',
        name: '三舱人数',
        axisLine: {
            lineStyle: {
                color: '#a2d4e6'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: ['#05133c'],
                width: 1,
                type: 'solid'
            }
        }
    },
    {
        type: 'value',
        name: '总人数',
        axisLine: {
            lineStyle: {
                color: '#a2d4e6'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: ['#05133c'],
                width: 1,
                type: 'solid'
            }
        }
    }
]
pkchart.setYAxis("chart1", yAxis);
pkchart.setLegend("chart1", {
    orient: 'horizontal',
    top: 10,
    right: 0,
    textStyle: {color: 'white'},
    data: ['电力舱', '综合舱', '燃气舱', '人数']
}); // 设置图例
var series = [
    {
        name: '人数',
        type: 'line',
        yAxisIndex: 1,
        color: '#44f0ff',
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: "#6fecf7"},
                    {offset: 0.5, color: "#8eecf5"},
                    {offset: 1, color: "#eef2f2"}
                ])
            }
        }
    },
    {
        name: '电力舱',
        type: 'bar',
        barWidth: 10,
        itemStyle:
            {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1, color: '#ff5b1f'}, {
                    offset: 0.5,
                    color: '#ff861f'
                }, {offset: 0, color: '#ffbe20'}])
            }
    },
    {
        name: '综合舱',
        type: 'bar',
        barWidth: 10,
        itemStyle:
            {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1, color: '#048aef'}, {
                    offset: 0.5,
                    color: '#19b8ec'
                }, {offset: 0, color: '#27d4e5'}])
            }
    },
    {
        name: '燃气舱',
        type: 'bar',
        barWidth: 10,
        itemStyle:
            {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1, color: '#fef901'}, {
                    offset: 0.5,
                    color: '#fbf529'
                }, {offset: 0, color: '#f7f14f'}])
            }
    }
]
pkchart.setSeriesInfo("chart1", series);
pkchart.setSeriesData("chart1", [[29.0, 24.9, 27.0, 33.2, 25.6, 26.7, 25.6], [2.0, 4.9, 7.0, 13.2, 15.6, 26.7, 15.6], [7.0, 9.9, 25.0, 22.2, 3.6, 14.7, 27.6], [15.0, 2.9, 9.0, 23.2, 2.6, 23.7, 1.6]])

     

专有事件

专有动画关联

专有属性配置对话框