ECHARTS-学习笔记

第一次自己实现一个还算能看的自定义系列图，纪念一下

var data2 = [
    [100],
    [120],
    [80],
    [-100],
    [10]
];
console.log(data);
function renderItem(params, api) {

    var yValue = api.value(2);
    var start = api.coord([api.value(0), yValue]);
    var size = api.size([api.value(1) - api.value(0), yValue]);
    var style = api.style();
    var height,width;
    var rect;
if (params.dataIndex === 0) {
    rect = api.size([1,api.value(0)]);
    if (api.value(0)>0){
        style.fill="#F00"
    } else{
        style.fill="#0F0"
    }
} else {
    rect = api.size(
        [1,Math.abs(data2[params.dataIndex][0]-data2[params.dataIndex-1][0])]
    );
    if (data2[params.dataIndex][0]>data2[params.dataIndex-1][0]){
        style.fill="#F00"
    } else{
        style.fill="#0F0"
    }
}
width = rect[0]*0.8;
height = rect[1];
var point;
if (params.dataIndex === 0) {
    point=api.coord(
        [
            params.dataIndex,
            data2[params.dataIndex][0]
        ]
    );
} else {
    point=api.coord(
        [params.dataIndex,Math.max(
            data2[params.dataIndex][0],
            data2[params.dataIndex-1][0]
        )]
    );
}
x = point[0]+rect[0]*0.1;
y = point[1];


var obj = {
    type: 'rect',
    shape: {
        x: x,
        y: y,
        width: width,
        height: height,
    },
    style: style
};
return obj;
}

option = {
    title: {
        text: 'Girths of Black Cherry Trees',
        subtext: 'By ecStat.histogram',
        sublink: 'https://github.com/ecomfe/echarts-stat',
        left: 'center',
        top: 10
    },
    color: ['rgb(25, 183, 207)'],
    grid: {
        top: 80,
        containLabel: true
    },
    xAxis: [{
        type: 'value',
        min: 0,
        max: 20,
        interval: 1
    }],
    yAxis: [{
        type: 'value',
        min: 0,
        max: 500,
        interval: 10
    }],
    series: [{
        name: 'height',
        type: 'custom',
        renderItem: function(params, api){
            return renderItem(params, api, data2);
        },
        label: {
            normal: {
                show: true,
                position: 'insideTop'
            }
        },
        encode: {
            y: 0,
            tooltip: 0,
            label: 0
        },
        data: data2
    }],
    tooltip: {
    },
};

 要试试看的话，得引入echart4.0，并用上面的option初始化图表