Echarts饼图之圆环图

• 需求：

页面上加载一个echarts环形图。

• 来由：

身为一个Java开发人员，被项目经理拉过来写页面，心里也是很苦逼~可是也没办法，只能硬着头皮干啊，直接上代码

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('t_2'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '工业园区预警总数',
        subtext: '178658',
        x: 'center',
        y: 'center',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 15,
            color: '#00eeff'
        }, // 标题
        subtextStyle: {
            fontWeight: 'normal',
            fontSize: 17,
            color: '#00eeff'
        }, // 副标题
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    color: ['#fcee21', '#fbb03b', '#22b573', '#2e3192', '#0071bc', '#29abe2', '#00ffff'],
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['42%', '53%'], // 半径
        center: ['50%', '51%'], // 位置
        label: {
            normal: {
                formatter: '{b}\n  {c}',
            },
        },
        data: [{
                value: 44,
                name: '水上派出所'
            },
            {
                value: 48,
                name: '湖东派出所'
            },
            {
                value: 51,
                name: '湖西派出所'
            },
            {
                value: 36,
                name: '东沙湖派出所'
            },
            {
                value: 10,
                name: '永安桥派出所'
            },
            {
                value: 36,
                name: '斜塘派出所'
            },
            {
                value: 20,
                name: '水下派出所'
            }
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

• 效果
  
   

  

   

   

  圆环图.png

 

 

 

 

 

作者：国家二级残序员
链接：https://www.jianshu.com/p/9fe6b0128801
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。