echarts 漂亮的仪表盘

本文介绍如何使用ECharts创建仪表盘样式图表,并详细展示了通过配置项实现特定视觉效果的方法,包括自定义颜色渐变、阴影及层级等。

initChart (val) {

      // 指定图表的配置项和数据

      this.options = {

        angleAxis: {

          show: false,

          max: 144, // 这里将极坐标最大值转换成仪表盘的最大值,(360度除以240度)

          type: 'value',

          startAngle: 216.5, // 极坐标初始角度,从第一象限算起,大约在7-8点钟角度之间

          splitLine: {

            show: false // 隐藏坐标

          }

        },

        barMaxWidth: transformChartFontSize(16), // 圆环宽度

        radiusAxis: { // 隐藏坐标

          show: false,

          type: 'category'

        },

        polar: { // 设置圆环位置和大小

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

          radius: '140'

        },

        series: [{

          type: 'bar',

          data: [{ // 上层圆环,用于显示真实数据

            value: val,

            itemStyle: {

              color: { // 图形渐变颜色方法,四个数字分别代表,右,下,左,上,offset表示0%到100%

                type: 'linear',

                x: 0,

                y: 0,

          &nb

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值