echart环形图渐变色

series: [
  {
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['20%', '50%'], // 环形图中心点
    label: {
      show: false, // 隐藏环形中间的文字
    },
    silent: 'ture', //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
    data: [ 
      {
        value: 1048,
        name: '在线',
        itemStyle: {
          borderRadius: 60, // 圆角
          color: { // 渐变色
            "x": 1,
            "y": 0,
            "x2": 1,
            "y2": 1,
            "type": "linear",
            "global": false,
            "colorStops": [{
              "offset": 0,
              "color": "rgba(21, 118, 210, 0)"
            }, {
              "offset": 1,
              "color": "rgba(21, 118, 210, 1)"
            }]
          }
        }

      },
      { value: 735, name: '离线' },
    ],

  },


]
### 创建和定制 ECharts 环形 #### 配置环形基础属性 为了创建一个基本的环形,在 `series` 中指定类型为 `'pie'` 并调整内径比例来形成环状显示。通常会设置 `radius` 参数中的两个值分别为外半径和内半径的比例,从而控制环宽。 ```javascript option = { series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], // 设置内外半径百分比 avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'} ] } ] }; ``` #### 添加中心文字 利用 `graphic` 属性可以向表添加任意 SVG 形状或文本作为装饰性元素[^1]: ```javascript graphic: [{ type: 'text', left: 'center', top: 'middle', style: { text: '总销售额\n¥89万', textAlign: 'center', fill: '#333', font: 'bolder 20px Microsoft YaHei' } }] ``` #### 实现内部渐变效果 对于希望给环形区域增加视觉吸引力的情况,可以通过修改 `itemStyle.normal.color` 来应用线性渐变填充。注意这里的例子适用于 gauge 类型而非 pie 类型,但对于某些版本可能同样适用[^2]: ```javascript itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#FF6F6F'},// 渐变起始颜色 {offset: 1, color: '#FEAEBB'} // 渐变结束颜色 ] ) } } ``` #### 数据处理与格式化函数 当涉及到数据呈现时,有时需要对原始数值进行转换以便更直观地表达含义。例如,通过编写辅助工具方法来进行单位附加等操作[^3]: ```javascript function unitFormatter(value = '', unit = ''){ return `${value}${['', '-'].includes(String(value)) ? '' : unit}`; } // 应用于 tooltip 或者其他地方的数据格式化 tooltip: { formatter: params => `${params.name}: ${unitFormatter(params.value, "件")}` }, ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值