head>div><script type= "text javascript "> 基于准备好的dom,初始化echarts实例 var myC ">
欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
echart环图渐变案列
2017-10-16 18:08:34   来源:博主项目总结   评论:0 点击:
刚到公司接到一个几乎全是图表的项目,之前从没接触过EChart,不得以慢慢学

现在把我的经验贡献出来 

代码及详细解释如下:



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pie</title>
    <script src="echarts.js"></script>
    <!-- <script src="echarts-all.js"></script> -->
    <style>
        #tab_application {
            width: 404px;
            height: 385px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
<div id="tab_application"></div>
</body>
<script>
    var pie = echarts.init(document.getElementById("tab_application"));
    option = {
        color: ['#00fffc', '#2f5597', '#00b050', '#ffc000', '#21a1d3', '#ab7c60', '#4d595b'],//外部饼形图颜色
        title: {//饼图中间的文字
            text: 'Total \n 3.8 TB',//显示在饼图中间的文字

            x: 'center',//x坐标位置:中心
            y: 'center',//y坐标位置:中心
            textStyle: {//文字风格
                fontSize: 16,//字体大小
                color: 'skyblue',//文字颜色
                textShadowColor:"skyblue",
                textShadowBlur:100,
                textShadowOffsetY:10,
            }
        },
        backgroundColor: '#162024',//饼图背景颜色
        series: [
            {//外部圆配置
                type: 'pie',
                radius: ['85%', '95%'],//设置饼图显示部分比例
                startAngle: 125,//饼图绘制起始角度
                hoverAnimation: false,//禁止hover
                itemStyle: {
                    normal: {//正常状态下的饼块设置
                        label: {
                            show: false
                        },
                        borderColor: '#162024',//边界线颜色
                        borderWidth: 3,//边界线宽度
                        labelLine: {//标签下的设置
                            show: false
                        }
                    },
                },
                data: [
                    { value: 1211 },
                    { value: 12 },
                    { value: 2113 },
                    { value: 123 },
                    { value: 2113 },
                    { value: 1213 },
                    { value: 123 }
                ]
            },
            {//内部圆配置
                type: 'pie',
                radius: ['50%', '55%'],
                startAngle: 180,
                hoverAnimation: false,
                itemStyle: {
                    normal: {//正常状态下的饼块设置
                        label: {
                            show: false
                        },
                        color: {//渐变效果
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#00fffc' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(21,46,49,1)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        borderColor: '#162024',
                        borderWidth: 2,
                        labelLine: {
                            show: false
                        }
                    },
                },
                data: [
                    { value: 1 },
                    { value: 1 },
                ]
            }
        ]
    };
    pie.setOption(option)

</script>

</html>
希望能帮到大家!

相关热词搜索:echart环图渐变案列

上一篇:流量,速率,时延单位的自适应
下一篇:JS地址栏动态传参查询的方法

收藏