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: '离线' },
    ],

  },


]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 Echarts 绘制仪表盘并添加渐变色的完整代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts 仪表盘渐变色示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { series: [{ type: 'gauge', detail: { formatter: '{value}%' }, data: [{ value: 50, name: '完成率', }], axisLine: { lineStyle: { width: 10, color: [ [0.2, '#228B22'], [0.8, '#48b'], [1, '#ff4500'] ] } }, axisTick: { length: 15, lineStyle: { color: 'auto', } }, splitLine: { length: 20, lineStyle: { color: 'auto', } }, axisLabel: { fontWeight: 'bold', fontSize: 12, color: '#333' }, pointer: { width: 3, length: '40%' }, title: { offsetCenter: [0, '-30%'], fontSize: 14, fontWeight: 'bold', color: '#333' }, detail: { offsetCenter: [0, '30%'], fontSize: 14, fontWeight: 'bold', color: '#333' }, }] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); </script> </body> </html> ``` 在上面的代码中,我们使用 `axisLine` 配置项中的 `color` 属性来指定渐变色,使用了三个颜色值,分别表示渐变色的起始颜色、中间颜色和结束颜色。其中,每个颜色值都是一个数组,第一个元素表示颜色的位置,取值范围是 0 到 1,表示颜色在渐变中的位置,第二个元素表示颜色的值,可以是颜色名称、十六进制值或 RGB 值。在本例中,我们使用了绿色、蓝色和橙色作为渐变色
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值