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>