echarts水球图

最新推荐文章于 2024-07-30 10:21:25 发布

张杰伦i

最新推荐文章于 2024-07-30 10:21:25 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/qq_25750473/article/details/120951619

版权

ECharts LiquidFill 饼图数据可视化 JavaScript

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
<script src="../echarts-liquidfill-master/dist/echarts-liquidfill.js"></script>
<script>
  const myChart = echarts.init(document.getElementById('chart'), 'dark')
  var data = [{name:'企业总量',value:3089},{name:'诉求提出量',value:4976}]

  option = {
    title: {
      top: '45%',
      left: 'center',
      text: '年诉求量',
      textStyle: {
        color: '#fff',
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontSize: 14,
      },
      subtextStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: function(res) {
          return `${ res.marker }${ res.name }：${ res.data.value }`
      },
      borderWidth: 0,
    },
    series: [ {
      type: 'liquidFill',
      radius: '48%',
      tooltip:{show:false},
      itemStyle: {
        color: '#53d5ff',
        opacity: 0.4,
        shadowBlur: 0,
      },
      backgroundStyle: {
        opacity: 0.04,
      },
      name: '今日完成进度',
      data: [ 0.3, 0.3 ],
      center: [ '50%', '50%' ],
      label: {
        formatter: '',
        textStyle: {
          fontSize: 12,
        },
      },
      outline: {
        itemStyle: {
          borderWidth: 0,
        },
        borderDistance: 0,
      },
    },
      {
        type: 'pie',
        radius: [ '50%', '58%' ],
        color: [ '#49dff0', '#00ffb4' ],
        hoverAnimation: false, 设置饼图默认的展开样式
        label: {
          show: true,
          formatter: '{b}：{d}%',
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 30,
        },
        itemStyle: { // 此配置
          borderWidth: 0,
          emphasis: {
            borderWidth: 0,
          },
        },
        data: data
      },
    ],
  }
  myChart.setOption(option)
</script>
</body>
</html>

张杰伦i

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts水球图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="chart" style="width: 600px;height:400px;"></div><script src="https://cdn.b...
复制链接

扫一扫