echarts圆形

最新推荐文章于 2024-05-11 09:07:51 发布
小宋子
最新推荐文章于 2024-05-11 09:07:51 发布
阅读量704
点赞数
分类专栏： echarts 文章标签： vue.js 前端 javascript echarts
本文链接：https://blog.csdn.net/songqiu821/article/details/121675807
版权
echarts 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
在这里插入图片描述
上图是最终实现的效果，直接上代码，做记录
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>渐变柱状</title>
		<!-- 引入 echarts.js -->
		<script src="./js/echarts501.min.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>
    <style>
        body{
            background-color: #00062E;
        }
    </style>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
        		// 添加千分位
            function numFormat(num){
                var res=num.toString().replace(/\d+/, function(n){ // 先提取整数部分
                    return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
                        return $1+",";
                    });
                })
                return res;
            }
	
			// 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
           // 指定图表的配置项和数据
			myChart.setOption({
				
                grid: {
                            left: 0,
                            bottom: 0,
                            top:0,
                            containLabel: true
                        },
					  
                        series: [
                            // 主要展示层的
                            {
                                radius: ['50%', '50%'],
                                center: ['50%', '50%'],
                                type: 'pie',
                                clockWise: false, //顺时加载
                                hoverAnimation: false, //鼠标移入变大
                                label: {
                                    normal: {
                                    show: true,
									 formatter: function(p){
                                			console.log(p)
                                		return  '{active|' + p.name+'}' + '\n\r' + '\n\r'+ '{total|' + numFormat(p.value) +'}' + '{txt|万元}'
                           			 },
                                    //formatter: '{active|{b}}' + '\n\r' + '\n\r'+ '{total|' + '{c}' +'}' + '{txt|万元}',
                                    rich: {
                                        total:{
                                            fontSize: 20,
                                            fontFamily : "微软雅黑",
                                            color:'#FFCD5C'
                                        },
                                        active: {
                                            fontFamily : "微软雅黑",
                                            fontSize:14,
                                            color:'#FFFFFF',
                                            lineHeight:22,
                                        },
                                        txt:{
                                            fontSize: 12,
                                            fontFamily : "微软雅黑",
                                            color:'#FFCD5C'
                                        }
                                    },
                                    // formatter:'{total|' + '{c}' +'}' + '{txt|万元}',
                                    // rich: {
                                    //     total:{
                                    //         fontSize: 20,
                                    //         fontFamily : "微软雅黑",
                                    //         color:'#FFCD5C'
                                    //     },
                                    //     txt:{
                                    //         fontSize: 12,
                                    //         fontFamily : "微软雅黑",
                                    //         color:'#FFCD5C'
                                    //     }
                                    // },
                                    position: 'outside'
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                labelLine: {//标示线
                                    normal: {
                                        show: true,
                                        length: 50,
                                        // length2: 35,
                                    },
                                    emphasis: {
                                        show: true,
                                        itemStyle: {
                                            normal: {
                                                borderWidth: 12,
                                                borderColor: 'red'
                                            }
                                        }
                                    }
                                },
                                z:10,
                                data: [
                                    {
                                        "name": "合同收入",
                                        "value": 36.71,
                                        itemStyle: {
                                            normal: {
                                                borderWidth: 12,
                                                borderColor: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                                                    type: 'linear',
                                                    x: 0,
                                                    y: 0,
                                                    x2: 0, //从左到右 0-1
                                                    y2: 1,
                                                    colorStops: [
                                                        {
                                                            offset: 0,
                                                            color: '#BDFF84'
                                                        }, 
                                                        {
                                                            offset: 0.2,
                                                            color: '#A6F392'
                                                        },
                                                        {
                                                            offset: 0.4,
                                                            color: '#39BBDA'
                                                        },
                                                        {
                                                            offset: 0.6,
                                                            color: '#39BBDA'
                                                        }, 
                                                        {
                                                            offset: 0.8,
                                                            color: '#39BBDA'
                                                        },
                                                        {
                                                            offset: 0.9,
                                                            color: '#3CBCD8'
                                                        },
                                                        
                                                        {
                                                        offset: 1,
                                                        color: '#52C8CA'
                                                    }],
                                                },
                                            }
                                        },
                                        labelLine: {//标示线
                                            normal: {
                                                lineStyle: {
                                                    color: "#5FCFC1" , // 改变标示线的颜色,
                                                    labelLayout(params) {
                                                        return {
                                                            x: params.rect.x + 60,
                                                            y: params.rect.y + params.rect.height / 2,
                                                            verticalAlign: 'middle',
                                                            align: 'left'
                                                        }
                                                    }
                                                }
                                            },
                        
                                        },
                                    }, 
                                    {
                                        "name": "交易收入",
                                        "value": 96.71,
                                        itemStyle: {
                                            normal: {
                                                borderWidth: 12,
                                                borderColor: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                                                    type: 'linear',
                                                    x: 0,
                                                    y: 0,
                                                    x2: 0, //从左到右 0-1
                                                    y2: 1,
                                                    colorStops: [
                                                        {
                                                            offset: 0,
                                                            color: '#0A3EAE'
                                                        }, 
                                                        {
                                                            offset: 0.5,
                                                            color: '#0659CA'
                                                        },
                                                        {
                                                        offset: 1,
                                                        color: '#0378E7'
                                                    }],
                                                },
                                            }
                                        },
                                        labelLine: {//标示线
                                            normal: {
                                                lineStyle: {
                                                    color: "#0091FF"  // 改变标示线的颜色
                                                }
                                            },
                                            showAbove:true
                                        },
                                    },
                                ],
                            },
                            // 边框的设置
                            {
                                name: '内边框',
                                type: 'pie',
                                clockWise: false, //顺时加载
                                hoverAnimation: false, //鼠标移入变大
                                center: ['50%', '50%'],
                                radius: ['40%', '40%'],
                                label: {
                                    normal: {
                                    show: true,
                                    // formatter: "{c}",
                                    formatter: '{active|收入总额}' + '\n\r' + '\n\r'+ '{total|' + '{c}' +'}' + '{txt|万元}',
                                    rich: {
                                        total:{
                                            fontSize: 32,
                                            fontFamily : "微软雅黑",
                                            color:'#FFCD5C'
                                        },
                                        active: {
                                            fontFamily : "微软雅黑",
                                            fontSize: 16,
                                            color:'#FFFFFF',
                                            lineHeight:22,
                                        },
                                        txt:{
                                            fontSize: 18,
                                            fontFamily : "微软雅黑",
                                            color:'#FFCD5C'
                                        }
                                    },
                                    // textStyle: {
                                    //     fontSize: 16,
                                    //     color:'#FFCD5C'
                                    // },
                                    position: 'center'
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                z:5,
                                data: [{
                                    value: '36.71',
                                    name: '收入总额',
                                    itemStyle: {
                                        normal: {
                                            borderWidth: 1,
                                            borderColor: '#0568D7'
                                        }
                                    }
                                }]
                            },
                            //外边框
                            {
                                name: '外边框',
                                type: 'pie',
                                clockWise: false, //顺时加载
                                hoverAnimation: false, //鼠标移入变大
                                center: ['50%', '50%'],
                                radius: ['65%', '65%'],
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                z:5,
                                data: [{
                                    value: 9,
                                    name: '',
                                    itemStyle: {
                                        normal: {
                                            borderWidth: 1,
                                            borderColor: '#102A9B'
                                        }
                                    }
                                }]
                            },
                        ]
			});
		</script>
	</body>
</html>