echarts 仪表盘

最新推荐文章于 2024-05-15 16:53:15 发布

小宋子

最新推荐文章于 2024-05-15 16:53:15 发布

阅读量405

点赞数 1

分类专栏： echarts 文章标签： js vue npm

本文链接：https://blog.csdn.net/songqiu821/article/details/121675570

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述
上图是实现的最终效果，最初看到手稿时，echarts没有任何思路，经过看echarts文档和网络上很多笔友的实例，才实现了最终效果，在此记录下，直接上代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>仪表盘</title>
		<!-- 引入 echarts.js -->
		<script src="./js/echarts4.60.min.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>
    <style>
        body{
            background-color: #000735;
        }
    </style>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var  option = {
               tooltip :{
                    show:true,
                    trigger: 'item',
                    // formatter: '{b}\n{c}'
                    formatter: function(params){
                        return '上年同期：360.1万元' +'<br>' + '本年同期：258.51万元';
                    }
                },
                title: [{
                    text: '382,168.18',
                    top: '250',
                    x: 'center',
                    subtext: '税费总额', //副标题文本，'\n'指定换行
                    // borderColor: '#00DBF3',
                    // borderWidth: 1,
                    // borderRadius: 15,
                    // padding: [7, 14],
                    textStyle: {
                        fontWeight: 'normal',
                        fontFamily: '"Microsoft YaHei","微软雅黑","PingFang SC","Helvetica Neue",Helvetica,"Hiragino Sans GB",sans-serif,Arial',
                        fontSize: 14,
                        color: '#00DBF3'
                    },
                    subtextStyle: {//副标题文本样式{"color": "#aaa"}
                        fontFamily: '"Microsoft YaHei","微软雅黑","PingFang SC","Helvetica Neue",Helvetica,"Hiragino Sans GB",sans-serif,Arial',
                        fontSize: 14,
                        color: '#fff',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                    },
                }],
                angleAxis: {
                    show: false,
                    clockwise:false,
                    max: 100 * 360 / 270, //-45度到225度，二者偏移值是270度除360度
                    type: 'value',
                    // startAngle: 225, //极坐标初始角度
                    startAngle: -45,
                    splitLine: {
                        show: false
                    }
                },
                barMaxWidth: 10, //圆环宽度
                radiusAxis: {
                    show: false,
                    type: 'category',
                },
                //圆环位置和大小
                polar: {
                    center: ['50%', '50%'],
                    // radius: '180'
                      radius: '180'
                },
                series: [
                    {
                        type: 'bar',
                        data: [{ //上层圆环，显示数据
                            value: 50,
                            itemStyle: {
                                color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1, //从左到右 0-1
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#F2684F'
                                    }, {
                                        offset: 1,
                                        color: '#FFCA4A'
                                    }],
                                },
                            },
                        }],
                        barGap: '-100%', //柱间距离,上下两层圆环重合
                        coordinateSystem: 'polar', 
                        roundCap: true, //顶端圆角
                        z: 2 //圆环层级，同zindex
                    },
                    { //下层圆环，显示最大值
                        type: 'bar',
                        data: [{
                            value: 100,
                            itemStyle: {
                                color: '#262B54'
                            }
                        }],
                        barGap: '-100%',
                        coordinateSystem: 'polar',
                        roundCap: true,
                        z: 1
                    },
                    //仪表盘
                    {
                        name: 'AQI',
                        type: 'gauge',
                        startAngle: 225, //起始角度，同极坐标
                        endAngle: -45, //终止角度，同极坐标
                        radius : 70,
                        axisLine : {
                            show: true,
                            lineStyle : {
                                width : 1.5,
                                shadowBlur : 0,
                                 color : [ [ 0.1, '#8A7844' ],
                                        [ 0.2, '#E09151' ], [ 0.3, '#E09151' ],
                                        [ 0.4, '#EC744F' ], [ 0.5, '#F2684F' ],
                                        [ 0.6, '#F2684F' ], [ 0.7, '#EC744F' ],
                                        [ 0.8, '#E09151' ], [ 0.9, '#E09151' ],
                                        [ 1, '#8A7844' ] ],
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show : true,
                            length : 1.5,
                            splitNumber : 10,
                            lineStyle : {
                                width : 1.5,
                                shadowBlur : 0,
                               color : [ [ 0.1, '#8A7844' ],
                                        [ 0.2, '#E09151' ], [ 0.3, '#E09151' ],
                                        [ 0.4, '#EC744F' ], [ 0.5, '#F2684F' ],
                                        [ 0.6, '#F2684F' ], [ 0.7, '#EC744F' ],
                                        [ 0.8, '#E09151' ], [ 0.9, '#E09151' ],
                                        [ 1, '#8A7844' ] ],
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        title: {
                            offsetCenter: [0, -10],
                            color: '#FFFFFF',
                            fontSize: 14,
                            fontWeight: 500,
                            rich: {
                                a: {
                                    fontWeight: 'normal',
                                    fontSize: 14,
                                    color: '#FFF',
                                    // padding: [0, 0, 10, 10]
                                }
                            }
                        },
                        detail: {
                            // formatter: function (e) {
                            //     return '良';
                            // },
                            formatter: '{value}%',
                            color: '#fff',
                            fontSize: 16,
                            offsetCenter: [0, 20],
                            // backgroundColor: '#FCC841',
                            // borderRadius: 8,
                            // padding: [4, 12],
                        },
                        data: [{
                            value: 25.4,
                            // name:'\n' + '{a|' + '25.4%' + '}'
                            name:"综合税负率"
                        }]
                    }
                ]
            }
            myChart.setOption(option);
		</script>
	</body>
</html>

小宋子

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
echarts 仪表盘

上图是实现的最终效果，最初看到手稿时，echarts没有任何思路，经过看echarts文档和网络上很多笔友的实例，才实现了最终效果，在此记录下，直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>仪表盘</title>  <script src="./js/echarts4.
复制链接

扫一扫