echarts環形圖加邊框

時間 2019-11-09

標籤 echarts 環形邊框简体版

原文原文鏈接

先看實現效果javascript

核心代碼html

itemStyle:{
                    show:false,
                    borderColor:'#17acf6',
                    borderWidth:1,
                },

完整代碼java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入echarts文件-->
    <script src="../js/echarts.min.js"></script>
    <script src="../js/echarts.js"></script>
    <script src="../theme/dark.js"></script>
    <title>柱狀圖</title>
</head>
<body>
<!--準備一個dom容器-->
<div id="main" style="width:600px;height:400px"></div>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        tooltip: {//提示框，能夠在全局也能夠在
            show:false,
            trigger: 'item',  //提示框的樣式
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            color:'#000', //提示框的背景色
            textStyle:{ //提示的字體樣式
                color:"black",
            }
        },
        legend: {  //圖例
            orient: 'vertical',  //圖例的佈局，豎直    horizontal爲水平
            x: 'right',//圖例顯示在右邊
            data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎'],
            textStyle:{    //圖例文字的樣式
                color:'#333',  //文字顏色
                fontSize:12    //文字大小
            }
        },
        series: [
            {
                name:'訪問來源',
                type:'pie', //環形圖的type和餅圖相同
                radius: ['50%', '70%'],//餅圖的半徑，第一個爲內半徑，第二個爲外半徑
                avoidLabelOverlap: false,
                color:['#17acf6','#fff',],
                label: {
                    normal: {  //正常的樣式
                        show: true,
                        position: 'left',
                        formatter: "{d}%",
                    },
                    emphasis: { //選中時候的樣式
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },  //提示文字
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle:{
                    show:false,
                    borderColor:'#17acf6',
                    borderWidth:1,
                },
                data:[
                    {value:335, name:'直接訪問'},
                    {value:310, name:'郵件營銷'},
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。