zoukankan      html  css  js  c++  java
  • Echarts 空心饼图示例

    把以下代码复制粘贴到:https://gallery.echartsjs.com/editor.html 可以预览看到效果图。

    option = {
        color: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14'],
        backgroundColor: '#FFFFFF',
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}%'
        },
        legend: {
            icon: 'circle',
            type: 'plain',
            textStyle: { //图例文字的样式
                color: '#8C8C8C',
                fontSize: 12
            },
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: ['横滨', '江之岛', '镰仓', '下北泽']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        series: [
            {
                name: '',
                type: 'pie',
                center: ["35%", "50%"],
                radius: ['50%', '70%'],
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#fff'
                },
                emphasis: {
                    itemStyle: {
                        borderWidth: 0,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: [
                    { value: 20, name: '横滨' },
                    { value: 30, name: '江之岛' },
                    { value: 25, name: '镰仓' },
                    { value: 25, name: '下北泽' }
                ]
            }
        ]
    }
    
  • 相关阅读:
    0. 序列
    Megacli 常用
    4. Storm可靠性
    3. Storm编程框架
    2. Storm消息流
    1.1 Storm集群安装部署步骤
    poj3723,最 大 生成树
    次短路
    无间道之并查集
    最小生成树二Kruscal算法
  • 原文地址:https://www.cnblogs.com/knuzy/p/13895492.html
Copyright © 2011-2022 走看看