怎么制作一个简单的水球图

380 阅读1分钟

第一步 打开Echarts社区 并找到水球图区

第二步

// 注意版本号,Echarts4 对应 echarts-liquidfill
// echarts-liquidfill@3 与 echarts@5 兼容
// echarts-liquidfill@2 与 echarts@4 兼容
    import * as echarts from 'echarts'; import 'echarts-liquidfill'

第三步 引入包

//用 * as 将多个导出的echarts对象放入到一个变量中
import * as echarts from 'echars'
import 'echarts-liquidfill'

第四步 找一个差不多的开始配置,我这里将我试出来的配置效果注释出来

option = {
        series: [{
          type: 'liquidFill',         // 类型为水球图
          data: [value1, value2],     // data的个数代表波浪数
          radius: '75%',              // 半径
          center: ['50%', '50%'],     // 圆心位置
          color: ['#2397f6'],         //水体颜色
          backgroundStyle: {          //背景样式
            color: '#ffccaa'          //背景颜色
          },
          label: {
            normal: {
              formatter: value        //球心数据
              textStyle: {            //数据样式
                fontSize: 41,
                color: "#7AABFA",
              }
            }
          },
          outline: {
            //show: true,               //是否显示一个固定的边框样式,很丑
            itemStyle: {              //球的边框样式设置
              borderWidth: 1,         //边框宽度
              borderColor: '#eee'     //边框颜色
          },
          },
        }
        ]
      }