echarts圆环以及仪器盘的设置

 

var myChart = echarts.init(document.getElementById('main13'));

            var option = {

                series: [

                    {

                        type: 'gauge',

                        startAngle: 180,

                        endAngle: 0,

                        center: ['50%', '85%'],

                        radius: '160%',

                        min: 0,

                        splitNumber: 8,

                        axisLine: {

                            lineStyle: {

                                width: 6,

                                color: [

                                    [0.25, '#FF6E76'],

                                    [0.5, '#FDDD60'],

                                    [0.75, '#58D9F9'],

                                    [1, '#7CFFB2']

                                ]

                            }

                        },

                        pointer: {

                            icon: '../../assets/images/向上.png',

                            length: '12%',

                            width: 4,

                            // offsetCenter: [0, '0%'],

                            itemStyle: {

                                color: 'auto'

                            }

                        },

                        axisTick: {

                            length: 12,

                            lineStyle: {

                                color: 'auto',

                                width: 2

                            }

                        },

                        splitLine: {

                            length: 20,

                            lineStyle: {

                                color: 'auto',

                                width: 5

                            }

                        },

                        axisLabel: {

                            color: 'inherit',

                            distance: 10,

                            fontSize: 'calc(100vw *18 / 1920)'

                        },

                        title: {

                            offsetCenter: [0, '-10%'],

                            fontSize: 'calc(100vw *28 / 1920)',

                            color: 'inherit'

                        },

                        detail: {

                            fontSize: 'calc(100vw *28 / 1920)',

                            offsetCenter: [0, '-35%'],

                            valueAnimation: true,

                            color: '#7CFFB2'

                        },

                        data: [

                            {

                                value: 80,

                                name: '34%'

                            }

                        ]

                    }

                ]

            }

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option, true);

            window.addEventListener("resize", () => {

                myChart.resize();

            });

 var myChart = echarts.init(document.getElementById('main14'));

            var option = {

                tooltip: {

                    trigger: 'item'

                },

                title: {

                    text: '',

                    left: 'center',

                    top: 'center'

                },

                series: [

                    {

                        type: 'pie',

                        data: [{ value: 335, name: '一年以上' }, { value: 234, name: '9-12个月' }, { value: 1548, name: '6-9个月' }, { value: 1548, name: '3-6个月' }, { value: 1548, name: '3个月以下' }],

                        radius: ['20%', '80%'],

                        center: ['50%', '55%'],

                        label: {//柱状图显示数值

                            show: true,

                            //   position: 'top',

                            valueAnimation: true,

                            color: 'white',

                            fontSize: ' calc(100vh * 12 / 1080)',

                            textAlign: "center",

                            formatter: function (params) { //标签内容

                                return params.name + '\n' + params.value

                            },

                        },

                        //   emphasis: {

                        //     label: {

                        //       show: true,

                        //     }

                        //   },

                    }

                ]

            };

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option, true);

            window.addEventListener("resize", () => {

                myChart.resize();

            });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值