layui饼状图

<div id="echarts" style="width: 500px;height: 500px"></div>

 

js部分
var myecharts = echarts.init(document.getElementById('echarts'));

myecharts.showLoading({
    text : "正在努力的读取数据中。。。。。",
})
var option = {
    title: {
        text: '地区分布',
        subtext: '访客所在地区',
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: []
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        // data : [],
        data: [
            { value: 335, name: '熟食' },
            { value: 310, name: '水产' },
            { value: 234, name: '蔬菜' },
            { value: 135, name: '肉品' },
            { value: 1548, name: '面包' }
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};
myecharts.hideLoading();    //隐藏加载动画
myecharts.setOption(option);

 

posted @ 2022-05-05 09:57  钧一  阅读(626)  评论(0编辑  收藏  举报