最XX的书Top统计 手机浏览echarts 柱状配置项内容和展示

阅读时长最长的书; 阅读时长最短的书; 涉及到题材最广的书 等等

      var yAxisdata = ['奇特的一生', '美的沉思', '水浒传'];
var data = [20, 20, 51];

var yAxisdata1 = ['蒋勋破解达芬奇之美', '局外人', '我决定活得有趣'];
var data1 = [2, 2, 1];

var yAxisdata2 = ['蔡澜', '刘继荣', '蒋勋'];
var data2 = [3, 4, 12];

var yAxisdata3 = ['生活品味', '文化', '爱'];
var data3 = [16, 17, 18];

var yAxisdata3 = ['生活品味', '文化', '爱'];
var data3 = [16, 17, 18];

var yAxisdata4 = ['生活十讲', '崭新的理所当然', '美的沉思'];
var data4 = [15, 15, 26];

app.title = ['最难读的书\n《' + yAxisdata[yAxisdata.length - 1] + '》读了' + data[data.length - 1] + '天',
    '最快读完的书\n《' + yAxisdata1[yAxisdata1.length - 1] + '》读了' + data1[data1.length - 1] + '天',
    '读得最多的作者\n' + yAxisdata2[yAxisdata2.length - 1] + '  读了' + data2[data2.length - 1] + '本',
    '读得最多的题材\n【' + yAxisdata3[yAxisdata3.length - 1] + '】有' + data3[data3.length - 1] + '本书涉及',
    '涉及题材最多的书\n《' + yAxisdata4[yAxisdata4.length - 1] + '》涉及' + data4[data4.length - 1] + '个题材',
];
app.subtitle = ['阅读时长最长的书', '最快读完的书'];
var gridheight = '20%';

var cl=50;//图标距离左侧的距离

var chartWidth = (100-cl)+'%';
var chartleft = cl+'%';
var titleright=(100-cl)+'%';
var toplist = ['1%', '21%', '41%', '61%', '81%'];
var gridlist = [yAxisdata, yAxisdata1, yAxisdata2, yAxisdata3, yAxisdata4];

//马卡龙配色
var colorList = ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
    '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
    '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
];

//生成grid
getGrids = function() {
    gs = [];
    for (i = 0; i < toplist.length; i++) {
        g = {
            left: chartleft,
            //right: '35%',
            top: toplist[i],
            width: chartWidth,
            height: gridheight,
            containLabel: true
        };
        gs.push(g);
    }
    return gs;
};
var gs = getGrids();

//生成x轴
getxs = function() {
    xs = [];
    for (i = 0; i < toplist.length; i++) {
        x = {
            type: 'value',
            // max: 55,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            gridIndex: i,
        };
        xs.push(x);
    }
    return xs;
};
var xs = getxs();

//生成y轴
var ys = [];

getys = function() {

    for (i = 0; i < gridlist.length; i++) {
        y = {
            type: 'category',
            data: gridlist[i],
            gridIndex: i,
            axisLabel: {
                show: true,
                interval: 'auto',
                inside: false,
                rotate: 0,
                margin: 8,
                //formatter: fo(value, index) ,
                fontStyle: 'normal',
                fontWeight: 'bold',
                fontSize: barFontSize,
            },
        };
        ys.push(y);
    }
    return ys;
};
ys = getys();
for (i = 0; i < ys.length; i++) {
    ys[i].axisLabel.formatter = function(value, index) {
        return 3 - index;
    };
}
///生成title

getts = function() {
    ts = [];
    for (i = 0; i < app.title.length; i++) {
        t = {
        top: toplist[i],
        text: app.title[i],
        right: titleright,
        textStyle: {
            //align: 'left',
            fontSize: 40,
           fontWeight: 'bold',
            color: colorList[i],
        }
    };
        ts.push(t);
    }
    return ts;
};
var ts = getts();
//
var barFontSize=20;
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    title: ts,
    grid: gs,
    xAxis: xs,
    yAxis: ys,
    series: [{
            name: '阅读时长',
            type: 'bar',
            stack: '总量',
            //barWidth: 5,
            data: data,

            itemStyle: {
                normal: {
                    barBorderRadius: [0, 50, 5, 0], //（顺时针左上，右上，右下，左下）,
                    shadowColor: '#aaa',
                    shadowBlur: 15,
                    shadowOffsetX: 5,
                    shadowOffsetY: 4,
                    color: function(params) {
                        // build a color map as your need.

                        return colorList[params.dataIndex];
                    },
                    label: {
                        show: true,
                        position: 'insideLeft',
                        formatter: '{b}：{c}天',
                        fontSize: barFontSize,
                        fontWeight: 'bold'
                    }
                }
            },
        }, {
            name: '最快读完',
            type: 'bar',
            //barWidth: 30,
            data: data1,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 50, 5, 0], //（顺时针左上，右上，右下，左下）,
                    shadowColor: '#aaa',
                    shadowBlur: 15,
                    shadowOffsetX: 5,
                    shadowOffsetY: 4,
                    color: function(params) {
                        // build a color map as your need.

                        return colorList[params.dataIndex + 3];
                    },
                    label: {
                        show: true,
                        position: 'insideLeft',
                        formatter: '{b}：{c}天',
                        fontSize: barFontSize,
                        fontWeight: 'bold'
                    }
                }
            },
        }, {
            name: '最爱作者',
            type: 'bar',
            //barWidth: 30,
            data: data2,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 50, 5, 0], //（顺时针左上，右上，右下，左下）,
                    shadowColor: '#aaa',
                    shadowBlur: 15,
                    shadowOffsetX: 5,
                    shadowOffsetY: 4,
                    color: function(params) {
                        // build a color map as your need.

                        return colorList[params.dataIndex + 6];
                    },
                    label: {
                        show: true,
                        position: 'insideLeft',
                        formatter: '{b}：{c}本',
                        fontSize: barFontSize,
                        fontWeight: 'bold'
                    }
                }
            },
        }, {
            name: '最爱题材',
            type: 'bar',
            //barWidth: 30,
            data: data3,
            xAxisIndex: 3,
            yAxisIndex: 3,
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 50, 5, 0], //（顺时针左上，右上，右下，左下）,
                    shadowColor: '#aaa',
                    shadowBlur: 15,
                    shadowOffsetX: 5,
                    shadowOffsetY: 4,
                    color: function(params) {
                        // build a color map as your need.
                        return colorList[params.dataIndex + 9];
                    },
                    label: {
                        show: true,
                        position: 'insideLeft',
                        formatter: '{b}：{c}本',
                        fontSize: barFontSize,
                        fontWeight: 'bold'
                    }
                }
            },
        }, {
            name: '题材最多的书',
            type: 'bar',
            //barWidth: 30,
            data: data4,
            xAxisIndex: 4,
            yAxisIndex: 4,
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 50, 5, 0], //（顺时针左上，右上，右下，左下）,
                    shadowColor: '#aaa',
                    shadowBlur: 15,
                    shadowOffsetX: 5,
                    shadowOffsetY: 4,
                    color: function(params) {
                        // build a color map as your need.
                        return colorList[params.dataIndex + 12];
                    },
                    label: {
                        show: true,
                        position: 'insideLeft',
                        formatter: '{b}：{c}本',
                        fontSize: barFontSize,
                        fontWeight: 'bold'
                    }
                }
            },
        }



    ]
};