echarts 饼图（自己配背景）

下定决心，好好过一天 ~

var app = {};

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var piePatternImg = new Image(); //图形对象
piePatternImg.src = './1.jpg'; //加载文件
var bgPatternImg = new Image();
bgPatternImg.src = './2.jpg';

var itemStyle = {
    normal: {
        opacity: 1, //图片透明度
        color: {
            image: piePatternImg, //图片
            repeat: 'repeat' //图片重复
        },
        borderWidth: 3, //线宽
        borderColor: '#235' //边线颜色
    }
};

option = {
    backgroundColor: { //背景
        image: bgPatternImg,
        repeat: 'repeat'
    },
    title: { //标题
        text: '背景',
        textStyle: {
            color: '#235'
        }
    },
    tooltip: {}, //图例
    series: [{
        name: 'pie', //数据的名称
        type: 'pie',
        selectedMode: 'single', //表示是否支持多选，'multiple'
        selectedOffset: 30, //表示选中的扇形，偏离的距离
        clockwise: true, //饼图的扇区是否顺时针排布
        label: {
            fontSize: 18, //字体大小
            color: '#235'
        },
        labelLine: { //
            lineStyle: { //线的颜色
                color: '#235'
            }
        },
        data: [
            { value: 1048, name: '瓦尔登湖' },
            { value: 735, name: '心理学' },
            { value: 580, name: '盗墓笔记' },
            { value: 484, name: '把生活过成你喜欢的样子' },
            { value: 300, name: '墨兰' }
        ],
        itemStyle: itemStyle
    }]
};

myChart.setOption(option);