2017年阅读记录echarts pictorialBar配置项内容和展示

配置项如下
      var whatif='/asset/get/s/data-1513739027631-HyhGXUDff.jpg'; 
var 爱让我们彼此听见='/asset/get/s/data-1513739061331-HkaEXLwMM.jpg'; 
var 冰岛迷梦='/asset/get/s/data-1513739089992-B1cLmUvff.jpg'; 
var 不如任性过生活='/asset/get/s/data-1513739107193-HJjD78wGf.jpg'; 
var 禅宗兴起='/asset/get/s/data-1513739113446-rJZ_mLDMz.jpg'; 
var 窗边的小豆豆='/asset/get/s/data-1513739124501-S13OX8PzM.jpg'; 
var 从容的底气='/asset/get/s/data-1513739135481-r1PYQIPGf.jpg'; 
var 二孩时代='/asset/get/s/data-1513739147460-SJQ9XLPff.jpg'; 
var 孤独六讲='/asset/get/s/data-1513739159723-ryejmIwGM.jpg'; 
var 和你一起我不怕老去='/asset/get/s/data-1513739180905-H1r3Q8wGz.jpg'; 
var 蒋勋破解达芬奇之美='/asset/get/s/data-1513739190564-SJJp7Iwff.jpg'; 
var 蒋勋破解梵高之美='/asset/get/s/data-1513739199789-Bkd6QLPMG.jpg'; 
var 蒋勋破解高更之美='/asset/get/s/data-1513739206893-SkyAX8DMf.jpg'; 
var 蒋勋破解米开朗基罗='/asset/get/s/data-1513739220215-BJ2CQIPzM.jpg'; 
var 蒋勋破解莫奈之美='/asset/get/s/data-1513739230718-ByvkNUvMz.jpg'; 
var 局外人='/asset/get/s/data-1513739242860-r1mxEIvzf.jpg'; 
var 妈妈是最初的老师='/asset/get/s/data-1513739254410-rJClV8PzG.jpg'; 
var 没有什么了不起='/asset/get/s/data-1513739262277-SJUZNIwfM.jpg'; 
var 美的沉思='/asset/get/s/data-1513739272107-rkxz48Pzz.jpg'; 
var 品味四讲='/asset/get/s/data-1513739282050-Bkqf4Uwzz.jpg'; 
var 奇特的一生='/asset/get/s/data-1513739292999-S1BQELvff.jpg'; 
var 恰到好处的孤独='/asset/get/s/data-1513739301928-ry0mEIwff.jpg'; 
var 容忍与自由='/asset/get/s/data-1513739323850-SyVH4UPMz.jpg'; 
var 生活十讲='/asset/get/s/data-1513739343550-SkuI4UDMM.jpg'; 
var 世界因你而温柔='/asset/get/s/data-1513739374240-SkL_VLPMM.jpg'; 
var 水浒传='/asset/get/s/data-1513739382453-HkAOE8vzz.jpg'; 
var 我不='/asset/get/s/data-1513739390543-BJPKVIwzG.jpg'; 
var 我承诺给你的美丽新世界='/asset/get/s/data-1513739400355-Hyl9VIPMz.jpg'; 
var 我决定活得有趣='/asset/get/s/data-1513739428505-SJhjEUDMz.jpg'; 
var 无关岁月='/asset/get/s/data-1513739503153-SyweHIPzG.jpg'; 
var 无聊的人生我死也不要='/asset/get/s/data-1513739522532-B1sWS8PMM.jpg'; 
var 吴哥之美='/asset/get/s/data-1513739775883-SJOWI8vMf.jpg'; 
var 小豆豆与我='/asset/get/s/data-1513739784854-SJZMIUDfG.jpg'; 
var 幸福从不缺席='/asset/get/s/data-1513739793201-ByKGUUvfz.jpg'; 
var 以自己喜欢的方式过一生='/asset/get/s/data-1513739801434-rybX8LvzG.jpg'; 
var 因为孤独的缘故='/asset/get/s/data-1513739809001-rJFmIIvfz.jpg'; 
var 崭新的理所当然='/asset/get/s/data-1513739818355-SJG4LLwzf.jpg'; 
var 种满院植物安守四季时光='/asset/get/s/data-1513739854433-ByIL8IPzf.jpg'; 
var 自由疯长='/asset/get/s/data-1513739863106-SJyD8LPGM.jpg'; 
var 坐在路边鼓掌的人='/asset/get/s/data-1513739872593-BktwUIwzz.jpg';

var imgs=[崭新的理所当然,
以自己喜欢的方式过一生,
美的沉思,
从容的底气,
世界因你而温柔,
二孩时代,
禅宗兴起,
幸福从不缺席,
我承诺给你的美丽新世界,
种满院植物安守四季时光,
恰到好处的孤独,
自由疯长,
和你一起我不怕老去,
坐在路边鼓掌的人,
爱让我们彼此听见,
窗边的小豆豆,
小豆豆与我,
奇特的一生,
孤独六讲,
妈妈是最初的老师,
水浒传,
生活十讲,
无关岁月,
无聊的人生我死也不要,
局外人,
不如任性过生活,
我决定活得有趣,
没有什么了不起,
容忍与自由,
我不,
whatif,
品味四讲,
蒋勋破解梵高之美,
蒋勋破解达芬奇之美,
蒋勋破解莫奈之美,
蒋勋破解米开朗基罗,
蒋勋破解高更之美,
吴哥之美,
因为孤独的缘故,
冰岛迷梦,
];


app.title = '堆叠条形图';

var getData = function() {

    var pics = [];
    for (var i = 0; i < datalist.length; i++) { 
        pics.push({
            value: timecause[i],
            symbol: imagelist[i],
            //symbol: 美的沉思 ,
            symbolSize: ['30', '45'],
            name: booknames[i],
            
        });
    }
    return pics;
};

var pics=getData();
option = {
     title: {
        text: '2017年阅读记录',
        //left: '0%',
        //textAlign: 'center'
    },
    grid: {
        left: 50,
        right: 20,
        bottom: 100,
        top: 50
    },
    tooltip: {
        formatter: function(params) {
            var bookname = '';
            if (params.componentSubType == 'pictorialBar') {
                for (i = 0; i < datalist.length; i++) {
                    if (datalist[i] == params.name) {
                        bookname = booknames[i];
                    }
                }
                return '《' + bookname + '》</br> 阅读时长:' + params.value + '天</br>读完日期:' + params.name;
            }
        }
    },
    xAxis: {

        data: datalist,

    },
    yAxis: {
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        }
    },
    
    series: [
        {
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: '-130%',
            //symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
                normal: {
                    opacity: 0.5
                },
                emphasis: {
                    opacity: 1
                }
            },
            data: timecause,
            z: 0
        },
         {//封面
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolRotate: 30,
            symbolOffset: ['3%', '-100%'],
            data: pics,
            animationDelay: function(idx) {
                return idx * 100 + 500;
            },
           hoverAnimation: true,
            itemStyle: {
                normal: {
                    shadowBlur: 5,
                    shadowColor: '#aaa',
                    shadowOffsetX: 5,
                    shadowOffsetY:5,
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333',
                    shadowOffsetX: 5,
                    shadowOffsetY:5,
                },
            },
            z:10
            
        },

    ]
};
    
截图如下