Echarts 實心餅圖示例

把以下代碼複製粘貼到:https://gallery.echartsjs.com/editor.html 可以預覽看到效果圖。

option = {
    color: ['#298DFF', ' #37CCCC', '#4ECC74', '#FBD438', '#EBA676', '#F2647C', '#9860E5', '#2F32CE', '#192761'],
    backgroundColor: '#FFFFFF',
    barWidth: 8,
    tooltip: {
        axisPointer: {
            type: 'shadow'
        },
        trigger: 'item',
        formatter: '{b} : {c}%'
    },
    legend: {
        icon: 'circle',
        type: 'scroll',
        // type: 'plain',
        orient: 'vertical',
        right: 20,
        top: '20%',
        // bottom: 0,
        data: ['醫藥', '信息技術', '社會服務', '農業', '建築業', '能源', '房地產業', '金融業', '半導體']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    series: [
        {
            name: '',
            type: 'pie',
            radius: [0, 80],
            center: ["50%", "50%"],
            itemStyle: {
                borderWidth: 1,
                borderColor: '#fff'
            },
            emphasis: {
                itemStyle: {
                    borderWidth: 0,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: { //去除餅圖的指示折線
                normal: {
                    show: false,
                    // position: 'inside',
                    formatter:"{b}:{d}"
                },
                emphasis: {
                    show: false
                }
            },
            data: [
                { value: 120, name: '醫藥' },
                { value: 100, name: '信息技術' },
                { value: 125, name: '社會服務' },
                { value: 125, name: '農業' },
                { value: 120, name: '建築業' },
                { value: 135, name: '能源' },
                { value: 130, name: '房地產業' },
                { value: 140, name: '金融業' },
                { value: 140, name: '半導體' }
            ]
        }
    ]
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章