Echarts实现水波图水球图水柱图的图表——liquidFill

通过echarts实现水波球水球图水柱图的图表样式(图表是动态的)

npm install echarts-liquidfill
npm i echarts@^4.2.1 zrender@^4.0.7

图片展示

demo单个
demo多个

demo参考

var value = 0.48;
var data = [value, value, value, value, value ];
var option = {
    backgroundColor: '#fff',
    series: [{
        type: 'liquidFill',
        radius: '70%',
        center: ['50%', '40%'],
        data: [0.48],
        color: ['red'],
        amplitude: '8%',
        waveLength: '80%',
        phase: 'auto',
        period: 'auto',
        direction: 'right',
        shape: 'circle',
        waveAnimation: true,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
        animationDuration: 2000,
        animationDurationUpdate: 1000,
        outline: {
            show: false,
            borderDistance: 8,
            itemStyle: {
                color: 'none',
                borderColor: '#294D99',
                borderWidth: 8,
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
        },
     
        backgroundStyle: {
            color: '#E3F7FF'
        },
     
        itemStyle: {
            opacity: 0.95,
            shadowBlur: 50,
            shadowColor: 'rgba(0, 0, 0, 0.4)'
        },
        label: {
            show: true,
            color: '#294D99',
            insideColor: '#fff',
            fontSize: 50,
            fontWeight: 'bold',
            align: 'center',
            baseline: 'middle',
            position: 'inside'
        },
        emphasis: {
            itemStyle: {
                opacity: 0.8
            }
        }
    }]
};

备注:单个波纹和多个波纹根据data数据决定

https://www.npmjs.com/package/echarts-liquidfill

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 特性介绍 百度的ECharts目前在国内使用的比较多,ECharts一个纯 Javascript的图表库,可以流畅...
    CodeMT阅读 1,166评论 0 3
  • 下面是挑选出的9个 JavaScript 图表库: Chart.js Chartist FlexChart Ech...
    zhangxuepeng阅读 5,153评论 0 5
  • 1. 图表(echarts)--数据可视化 与传统形式中用表格或文档展现数据的方式相比,可视化能将数据以更加直观的...
    GALAXY_ZMY阅读 1,871评论 0 5
  • 第一步 获取echarts 1:从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打...
    codeSirCao阅读 6,493评论 1 5
  • 时间是一袭婆娑,纷纷时只默默雕刻下前尘的遗风。生命的别离在婆娑中来去匆匆,就如同秋天的云,是繁华落尽见真淳,是无情...
    文字回声阅读 428评论 1 3

友情链接更多精彩内容