ecomfe / echarts-liquidfill Goto Github PK

View Code? Open in Web Editor NEW

1.4K 45.0 622.0 3.68 MB

Liquid Fill Chart for Apache ECharts

Home Page: https://ecomfe.github.io/echarts-liquidfill/example/

License: BSD 3-Clause "New" or "Revised" License

HTML 40.84% JavaScript 59.16%

echarts liquid-fill-charts

echarts-liquidfill's Introduction

Liquid Fill Chart

Liquid Fill Chart plugin for Apache ECharts, which is usually used to represent data in percentage.

Install ECharts

To use ECharts plugins, you need to include the plugin JavaScript file after ECharts file.

<script src='echarts.js'></script>
<script src='echarts-liquidfill.js'></script>

ECharts can be downloaded at GitHub dist directory or Download page of Official Website (in Chinese).

NOTE

The minimum package of ECharts required by LiquidFill Chart is simple version on GitHub, or selecting nothing in online builder (in Chinese). If you need other chart types or components in your other chart, you should include them accordingly.

Install echarts-liquidfill with npm

# install echarts as peer dependency
npm install echarts
npm install echarts-liquidfill

NOTE:

echarts-liquidfill@3 is compitable with echarts@5 echarts-liquidfill@2 is compitable with echarts@4

Import:

import * as echarts from 'echarts';
import 'echarts-liquidfill'

Or:

import * as echarts from 'echarts/core';
import 'echarts-liquidfill'

Here is the basic example on CodeSandbox

Download echarts-liquidfill from GitHub

You may download the lastest ECharts files on ECharts official site and download this plugin in dist directory.

Note that if you need tooltip for Liquid Fill Chart, you need the complete ECharts version. Otherwise, the simple version will be competent.

Important Notes

Omitted `normal`

Since ECharts v4.0.0, normal is no longer needed for itemStyle or label.

Flatten `textStyle`

Since ECharts v3.7.0, textStyle option is flatten, so that series.label[normal|emphasis].textStyle.xxx is now can be written in series.label[normal|emphasis].textStyle. This is supported from echarts-liquidfill v1.0.6. So if you found examples with textStyle in old demo, don't be too surprised.

Quick Start

Here are some common uses:

To ask a question, you may fork Liquid Fill Chart Example on Gallery and copy your code there. Then you may open an issue in this project.

Examples

A Simple Example

To create a Liquid Fill Chart, you need to have a series with type of 'liquidFill'. A basic option may be:

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]
    }]
};

Run

Multiple Waves

It is easy to create a liquid fill chart will multiple waves, either to represent multiple data, or to improve the visual effect of the chart.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3]
    }]
};

This creates a chart wit waves at position of 60%, 50%, 40%, and 30%.

Run

Color and Opacity

To set colors for liquid fill chart series, set color to be an array of colors. To set opacity, use itemStyle.opacity and itemStyle.emphasis.opacity for normal style and hover style.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, 0.3],
        color: ['red', '#0f0', 'rgb(0, 0, 255)'],
        itemStyle: {
                opacity: 0.6
        },
        emphasis: {
            itemStyle: {
                opacity: 0.9
            }
        }
    }]
};

Run

You may also set the color and opacity of a single data item by:

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, {
            value: 0.3,
            itemStyle: {
                color: 'red',
                opacity: 0.6
            },
            emphasis: {
                itemStyle: {
                    opacity: 0.9
                }
            }
        }]
    }]
};

Run

Static Waves

To provent the waves from moving left or right, you may simply set waveAnimation to be false. To disable the animation of waves raising, set animationDuration and animationDurationUpdate to be 0.

var option = {
    series: [{
        type: 'liquidFill',
        waveAnimation: false,
        animationDuration: 0,
        animationDurationUpdate: 0,
        data: [0.6, 0.5, 0.4, 0.3]
    }]
};

Run

Still Water

You may set the amplitude to be 0 to make still waves.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        amplitude: 0,
        waveAnimation: 0
    }]
};

It is recommended to set waveAnimation to be false in this case to disable animation for performance consideration.

Run

Change A Single Wave

To change a single wave, overwrite the options in data item.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, {
            value: 0.5,
            direction: 'left',
            itemStyle: {
                color: 'red'
            }
        }, 0.4, 0.3]
    }]
};

Run

Background Style

You can use backgroundStyle option to set the stroke, fill style of background shape.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        backgroundStyle: {
            borderWidth: 5,
            borderColor: 'red',
            color: 'yellow'
        }
    }]
};

Run

Outline Style

To hide the outline, just set outline.show to be false.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        outline: {
            show: false
        }
    }]
};

Run

Shape

Shape of water fill chart. It can be:

one of the default symbols: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow';
'container': a shape that fully fills the container.
an SVG path starting with 'path://'.

var options = [{
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        shape: 'diamond'
    }]
}];

Run

option = {
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, 0.3, 0.2],
        shape: 'container',
        outline: {
            show: false
        }
    }]
};

Run

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.55, 0.4, 0.25],
        radius: '60%',
        outline: {
            show: false
        },
        backgroundStyle: {
            borderColor: '#156ACF',
            borderWidth: 1,
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        },
        shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',
        label: {
            position: ['38%', '40%'],
            formatter: function() {
                return 'ECharts\nLiquid Fill';
            },
            fontSize: 40,
            color: '#D94854'
        }
    }]
};

Run

Animation

Generally speaking, there are two types of animations in liquid fill charts.

The first type is initial animation, which has the effect of wave raising. The easing method of this animation is controlled with animationEasing and its duration with animationDuration.

The second type is the update animation, which is usually used when data changes and wave height changes. They are controlled with animationEasingUpdate and animationDurationUpdate.

For example, to disable the raising animation and set update animation time to be two seconds with cubicOut easing, you can use the following option:

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        animationDuration: 0,
        animationDurationUpdate: 2000,
        animationEasingUpdate: 'cubicOut'
    }]
};
chart.setOption(option);
setTimeout(function () {
    chart.setOption({
        series: [{
            type: 'liquidFill',
            data: [0.8, 0.6, 0.4, 0.2]
        }]
    })
}, 3000);

Run

Change Text

By default, the text label of liquid fill chart displays percentage of the first data. For example, for a chart with data [0.6, 0.5, 0.4, 0.3], default text is 60%.

To change the text, you may use label.formatter, which can be set to a string or function.

If it is a string, {a} refers to series name, {b} to data name, and {c} to data value.

var option = {
    series: [{
        type: 'liquidFill',
        name: 'Liquid Fill',
        data: [{
            name: 'First Data',
            value: 0.6
        }, 0.5, 0.4, 0.3],
        label: {
            formatter: '{a}\n{b}\nValue: {c}',
            fontSize: 28
        }
    }]
};

Label text of this example is 'Liquid Fill\nFirst Data\nValue: 0.6'.

Run

This has the same result as using formatter as a function:

var option = {
    series: [{
        type: 'liquidFill',
        name: 'Liquid Fill',
        data: [{
            name: 'First Data',
            value: 0.6
        }, 0.5, 0.4, 0.3],
        label: {
            formatter: function(param) {
                return param.seriesName + '\n'
                    + param.name + '\n'
                    + 'Value:' + param.value;
            },
            fontSize: 28
        }
    }]
};

Run

Text position is at the center by default. label.position can be set to be 'inside', 'left', 'right', 'top', 'bottom', or horizontal and vertical positions like ['10%', '20%'], which means '10%' to the left (controlled by label.align, which can be 'left', 'center', or 'right') and '20%' to the top (controlled by label.baseline, which can be 'top', 'middle', or 'bottom').

Shadow

By default, waves and outline have shadow on them. Here's how to change them.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        itemStyle: {
            shadowBlur: 0
        },
        outline: {
            borderDistance: 0,
            itemStyle: {
                borderWidth: 5,
                borderColor: '#156ACF',
                shadowBlur: 20,
                shadowColor: 'rgba(255, 0, 0, 1)'
            }
        }
    }]
};

Run

Tooltip

To add tooltip:

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6],
        name: 'Liquid Fill'
    }],
    tooltip: {
        show: true
    }
};

Run

Click Event

To add click event on waves:

chart.setOption(option);
chart.on('click', function() {
    console.log(arguments);
    // do something useful here
});

Like any other chart types, the above code will only trigger events on waves. If you want to track events on the whole canvas or specific elements, you may add listener to zrender like:

chart.getZr().on('click', function() {
       console.log(arguments);
});

Non-interactable

To make an element (e.g., a wave) non-interactable, simply set silent to be true.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        silent: true
    }]
};

Run

API

Default option for liquid fill charts are:

{
    data: [],

    color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
    center: ['50%', '50%'],
    radius: '50%',
    amplitude: '8%',
    waveLength: '80%',
    phase: 'auto',
    period: 'auto',
    direction: 'right',
    shape: 'circle',

    waveAnimation: true,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
    animationDuration: 2000,
    animationDurationUpdate: 1000,

    outline: {
        show: true,
        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 {(number|Object)[]}

Value of each data item should be between 0 and 1.

The data item can also be an object to configure the option for a single item.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, {
            value: 0.5,
            itemStyle: {
                color: 'red'
            }
        }, 0.4, 0.3]
    }]
};

This defines a chart with the second wave of red color.

color {string[]}

Wave colors.

shape {string}

Shape of water fill chart. It can be one of the default symbols: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'. Or, an SVG path starting with 'path://'.

center {string[]}

Position of the chart. The first value is x position, the second one is the y position. Each of the values can be a relative value like '50%', which is relative to the smaller value of container width and height, or an absolute value like 100px.

radius {string}

Radius of the chart, which can be a relative value like '50%', which is relative to the smaller value of container width and height, or an absolute value like 100px.

amplitude {number}

Amplitude of the wave, in pixels or percentage. If it is in percentage, it's relative to the diameter.

waveLength {string|number}

Wave length of the wave, which can be a relative value like '50%', which is relative to the diameter, or an absolute value like '100px' or 100.

phase {number}

Phase of wave, in radian system. By default, it is set to be 'auto', when each wave has a phase of Math.PI / 4 larger than the previous one.

period {number|'auto'|function}

Milliseconds that it takes to move forward a wave-length. By default, it is set to be 'auto', when the wave at the front has a greater speed.

It can also be a formatter function.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '70%',
        phase: 0,
        period: function (value, index) {
            // This function is called four times, each for a data item in series.
            // `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.
            return 2000 * index + 1000;
        }
    }]
}

direction {string}

Direction that the waves moving in, which should either be 'right', or 'left'.

waveAnimation {boolean}

Whether to enable wave from moving left or right.

animationEasing {string}

Easing methods for initial animation, when waves raise from the bottom at the beginning.

animationEasingUpdate {string}

Easing methods for other animation, for example, when data value changes and wave position changes.

animationDuration {number}

Initial animation duration, in milliseconds.

animationDurationUpdate {number}

Other animation duration, in milliseconds.

outline.show {boolean}

Whether to display outline.

outline.borderDistance {number}

Distance between border and inner circle.

outline.itemStyle.borderColor {string}

Border color.

outline.itemStyle.borderWidth {number}

Border width.

outline.itemStyle.shadowBlur {number}

Outline shadow blur size.

outline.itemStyle.shadowColor {string}

Outline shadow color.

backgroundStyle.color {string}

Background fill color.

backgroundStyle.borderWidth {string}

Background stroke line width.

backgroundStyle.borderColor {string}

Background stroke line width.

backgroundStyle.itemStyle.shadowBlur {number}

Background shadow blur size.

backgroundStyle.itemStyle.shadowColor {string}

Background shadow color.

backgroundStyle.itemStyle.opacity {number}

Background opacity.

itemStyle.opacity {number}

Wave opacity.

itemStyle.shadowBlur {number}

Wave shadow width.

itemStyle.shadowColor {string}

Wave shadow color.

emphasis.itemStyle.opacity {number}

Wave opacity when hover.

label.show {boolean}

Whether to display label text.

label.color {string}

Color of text when display on background.

label.insideColor {string}

Color of text when display on wave.

label.fontSize {number}

Label font size.

label.fontWeight {string}

Label font weight.

label.align {string}

Text align, which should be 'left', 'center', or 'right'.

label.baseline {string}

Text vertical align, which should be 'top', 'middle', or 'bottom'.

label.position {string|string[]}

Build

For development:

$ webpack

For release:

$ webpack -p

Notice

The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.

echarts-liquidfill's People

Contributors

Stargazers

Watchers

Forkers

lionheartcgj airsola513 leekay0032 drkyro 1056604657 cesarureno zhangyuxiang1226 a-dooo keyesu guoyu07 sevenhang caixudong1223 13406601781 zssty2010 kukupigs king-lxt yilinunique yexiao-fe wangjiewj sevenen cyndiking gw250 chengjunji ck-chan xjl1099794382 daodaoliang yu501954162 zwht lwllovejj burger1221 linyuyoung succulen-plants aoqimaomao 825474872 wolflb yymmlin wklq j-z10 somehow-yw zengjingrun queenwuli fstg0504 zxy920319 floatlight meilili godknow yuanalexwu zhaoxianghuihub roadcan github-0115 bswsfhcw junjiem usr80 tears743 li1109052829 ning3m gregtraps chencher lixuan777 dataxujing idau2012 nichenfly yjb1995 bxgdchen xujuan7090 synchron1zed mrgeorgezhu conlenli cjjlovedsn zqx-lz ldistance magic-coder mrhumo lxzv9999 skyhuman123 nwx0202 2650973415 guhaiquan manman0310 antetokounmpo yjc930214 huanledeniuduzi smilerose yinjunwen china-lifei wyy511 janelouis hty7 ooos1r1u5 1127297304 zoey-zhong bpup lin-agoni sharexu baifengbai maimai-snowcapped jackbian scherger-g idealview victorztseng

echarts-liquidfill's Issues

能否支持设置最大值、最小值而不是默认的0~1？

默认区间似乎是0%~100%，但我的值大于1，所以希望支持设置最大值、最小值~

精简依赖？

建议这样，src 的版本依赖 echarts/lib/echarts，然后在 main 模块可以打包所有依赖。main 模块是 all-in-one 的包，src 模块只引用必要的。

否则我一个依赖 echarts/lib/echarts 的项目加载这个插件，不管怎么样都得重新加载一个 echarts 全集。

水球图导致的内存泄漏问题

One-line summary [问题简述]
水球图放置24小时的时间后, 会导致页面崩溃的等问题, 进一步观测, 其内存增长飞快, 怀疑是内存泄漏问题.

Version & Environment [版本及环境]
测试环境: win7.
chrome 浏览器:

开始记录时间: 20170921 11:17
开始时的内存: 78316k
如图所示:

结束时间: 20170921 13:30
结束时的内存: 792,328k
如图所示:

总结: 2个多小时, 内存增长了700多兆. 如果放置一个晚上, 会导致页面崩溃等问题.
Expected behaviour [期望结果]
内存不泄露, 水球图放置24小时不会导致页面崩溃.
ECharts option [ECharts配置项]

var  options = [
            {
                series: [{
                    type: 'liquidFill',
                    data: [0.6, 0.5, 0.4, 0.3],
                    outline: {
                        show: false
                    },
                    shape: 'container'
                }]
            }
            ];

4.0.2版本下水球图无法改变字体大小

var option = {
       series: [{
           type: 'liquidFill',
           name: 'Liquid Fill',
           data: [{
               name: 'xxISmart'
               //value: 0.6
           },1,0.9,0.8,0.7,0.6, 0.5, 0.4, 0.3],
           radius : '40%',
           label: {
               normal: {
                   //formatter: '{a}\n{b}\nValue: {c}',
                   textStyle: {
                       fontSize: 20
                   }
               }
           }
       }]
   };

label 无法隐藏

代码如下, 并不能隐藏 label

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]，
        label: {
           normal: {
               show: false
            }
         }
    }]
};

在线访问这里: http://gallery.echartsjs.com/editor.html?c=xBJK1sFagG&v=2

看到 API 上写着设置 label.normal.show 决定 label 的显示或不显示, 但实际没生效, 不知是我理解错了？

series.data 的itemStyle.color 为图片时，图片显示不全。

如下代码：

series: [{
        type: 'liquidFill',
        data: [ {
          value: 0.74,
          direction: 'left',
          itemStyle: {
            shadowBlur:0,
            color: {
              image: wlimg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
              repeat: 'repeat-x' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
            }
          }
        }],

mac电脑，chrome上只显示一半（下半部分），上半部分不显示。火狐浏览器下半部分为要渲染的图片，上半部分为纯色。

另外color使用渐变色时控制台报错。图表不显示。
如：

color:new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )

谢谢您共享了这么好的插件，我在使用中就差这一个小问题了。希望您能帮忙提供个解决方案。谢谢。

演示地址：渐变色的那一层就是图片。显示了一半。

https://ngdly.github.io/ngdly/echarts-liquidfill/water_ball.html

水位图在svg模式下出现波浪溢出的情况

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]
    }]
};

水位图在svg模式下如果echarts租价过多的话出现波浪溢出的情况，现在水位图支持svg模式吗？
echarts:3.8.3;
浏览器：chrome62

require无法引用liquidFill.js

已加载echart4和liquidfill：

paths: {
"jquery" 		: 	jbasepath+ "/scripts/jquery-1.11.1.min",
'echarts4'         :    basepath+ "/js/echarts/echarts4",
'liquidfill'          :    basepath+ "/js/echarts/echarts-liquidfill"
},
 shim: {
		'jquery' : {
			exports: 'jquery'
		},
               'echarts4' : {
			deps:['jquery'],
			exports: 'echarts4'
		},
		'liquidfill' : {
			deps:['jquery','echarts4'],
			exports: 'liquidfill'
		}
      }

引入插件之后，生成水滴图报错

define(['jquery','echarts4','liquidfill'],function($, echarts, liquidfill) {
        var option = {
                series: [{
                    type: 'liquidFill',
                    data: [0.6],
                    radius: '70%'
                }]
            };
	   chart = echarts.init(document.getElementById('chart'));
	   chart.setOption(option);
}

报错内容：

echarts4.js:11646 Uncaught Error: Component series.liquidFill not exists. Load it first.
    at Function.entity.getClass (echarts4.js:11646)
    at ExtendedClass.<anonymous> (echarts4.js:19832)
    at Array.forEach (<anonymous>)
    at each$1 (echarts4.js:505)
    at ExtendedClass.visitComponent (echarts4.js:19815)
    at Function.entity.topologicalTravel (echarts4.js:17240)
    at ExtendedClass.mergeOption (echarts4.js:19785)
    at ExtendedClass.initBase (echarts4.js:20316)
    at ExtendedClass.resetOption (echarts4.js:19727)
    at ExtendedClass.setOption (echarts4.js:19709)

使用tooltip无效

我设置了show:true。但是没起作用

当 shape设置为 rect 时，水波不能填满整个矩形容器

设置如下：

shape: 'rect',
radius: '100%'

程序按长方形容器的高，生成正方形图形，如何设置可以填满整个长方形容器？

水球插件用在手机端会出现不断闪屏的现象

水球插件用在手机端会出现不断画布闪屏的现象。

水波球使用echart4.0的版本，fontSize不能支持修改了

修改example下的fill-container.html

series: [{
  type: 'liquidFill',
  data: [0.6, 0.5, 0.4, 0.3],
  outline: {
         show: false
  },
   shape: 'container',
   label: {
                        normal: {
                            fontSize: 10
                        }
                    }
                }]

水球自定义（火狐浏览器出问题）地址：http://gallery.echartsjs.com/editor.html?c=xH1HouM9Sl

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]
    }]
};

webpack中引入echarts-liquidfill，运行报错

错误：Uncaught DOMException: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-12) is negative.

代码：

import echarts from 'echarts'
import 'echarts-liquidfill'
let option = {
series: [{
            type: 'liquidFill',
            data: [0.20, 0.30, 0.15, 0.10],
            radius: '19%'
        }]
}
humidityDashboard = echarts.init(document.getElementById('humidity-dashboard'))
humidityDashboard.setOption(option)

使用formatter无法设置label的不同样式

        label: {
            normal: {
                position: ['38%', '40%'],
                formatter: function() {
                    return 'ECharts\nLiquid Fill';
                },
                fontSize: 40,
                color: '#D94854'
            }
        }

可以让ECharts和Liquid Fill的字体大小不同吗？

引用3.7.0版本的echarts后，resize图形出错

Uncaught RangeError: Maximum call stack size exceeded

【IOS8】Uncaught Error: IndexSizeError: DOM Exception 1

在IOS8会报错Uncaught Error: IndexSizeError: DOM Exception 1

为什么 default text is 60%

By default, the text label of liquid fill chart displays percentage of the first data. For example, for a chart with data [0.6, 0.5, 0.4, 0.3], default text is 60%.
为什么只显示一个数据，应该象饼图那样，可以在很个数据区域显示文字。
而且还有一个bug，label.normal.show: false时文字依然显示
http://gallery.echartsjs.com/editor.html?c=xryw_AqPhl&v=2

import 问题会出现 Cannot read property 'extendSeriesModel' of undefined

<template>
  <div class="water">
    <!-- <chart :options="option" auto-resize></chart> -->
    <div id="1" class ="water-body"></div>
  </div>
</template>
<style lang="scss">
.water {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  &-body {
    width: 100%;
    height: 100%;
  }
}
</style>
<script>
var echarts = require('echarts')
// import './echarts-liquidfill.js'
require('./echarts-liquidfill.js')
export default {
  name: 'b-water',
  data () {
    return {
    }
  },
  methods: {
    draw () {
      let id = '1'
      var chart = echarts.init(document.getElementById('' + id))
      let option = {
        series: [{
          type: 'liquidFill',
          // radius: '80%',
          data: [0.5, 0.45, 0.4, 0.3],
          // label: {
          //   normal: {
          //     // textStyle: {
          //     color: 'red',
          //     insideColor: 'yellow',
          //     fontSize: 40
          //     // }
          //   }
          // }
        }]
      }
      chart.setOption(option)
    }
  },
  mounted () {
    this.draw()
  }
}
</script>

echarts-for-react 使用echarts-liquidfill 报错 Uncaught Error: Component series.liquidFill not exists. Load it first.

import echarts from 'echarts'
import 'echarts-liquidfill';
import ReactCharts from 'echarts-for-react'


const liquidoption = {
            series: [{
                type: 'liquidFill',
                data: [0.6, 0.5, 0.4, 0.3],
                radius: '80%'
            }]
        }


<ReactCharts
            option={liquidoption}
            style={{ height: '340px', width: '100%', }} />


用的create-react-app 创建的项目，不管修改版本还是把js文件放到html里面都不行

一直报错
 Uncaught Error: Component series.liquidFill not exists. Load it first.

echarts 3.6.1 console 存在错误信息

代码

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]
    }]
};

错误信息

如下图所示：

复现步骤

这个项目的 example 代码应该就可以看到错误。

或者

git clone git@github.com:hustcc/echarts-for-react.git

cd echarts-for-react

npm i

npm run build

然后打开项目根目录 index.html，查看 Liquidfill 这个实例。

## 原因

大概是因为本项目依赖 echarts 的版本号是直接写的大于，所以 echarts 升级之后，导致自动安装最新的 3.6.1，然后兼容出错，我在本地 node_modules 中删除 3.6.1 版本，重新 build 就可以了。

如何关闭点击事件？

hello，现在在项目可以很好的展示，但是点击的时候水球内填充的颜色会改变，请问博主如何禁止掉？

是否能在webpack打包的工程下使用，能给个例子吗？谢谢

如题

指定轮廓 SVG 时报错

经测试只发生于自定义 SVG 轮廓且 ECharts 版本 ≥ 3.4.0 （依赖的 zrender 版本从 3.2.2 切换为 3.3.0 了，估计是 zrender 3.3.0 造成的）时。

TypeError: path.setData is not a function

位置在 zrender/lib/tool/path.js 第 334 行。

disponse 警告

调用disponse 方法时报如下警告，望解决，谢谢
Method dispose should be implemented in liquidFill.

如何设置波浪淹没label后label的字体颜色

         var options= {
                    series: [{
                        type: 'liquidFill',
                        data: [{
                            name: 'demo',
                            value: 0.6,
                            itemStyle: {
                                normal: {
                                    color: 'rgb(12,78,117)'
                                }
                            }
                        }, {
                            value: 0.6,
                            itemStyle: {
                                normal: {
                                    color: 'rgb(0,170,255)'
                                }
                            }
                        }],
                        radius: '70%',
                        outline: {
                            show: false
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                fontSize: 20,
                                color: 'yellow'
                            }
                        },
                        backgroundStyle: {
                            color: 'rgb(9,34,57)',
                            borderColor: 'rgb(0,170,255)',
                            borderWidth: 1
                        }
                    }]
                };

在webpack环境下，无法加载插件

import echarts from 'echarts';
import 'echarts-liquidfill';



var myChart2 = echarts.init(document.getElementById('main1'));

    myChart2.setOption({
      series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '80%'
      }]
    });

代码引入如上但还是报错

请教怎么结合两种图表组件？

http://echarts.baidu.com/demo.html#graph

请问有没有办法把关系图的节点换成liquidfill呢？

vue webpack 报 in mounted hook: "Error: Component series.liquidFill not exists. Load it first."

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]
    }]
};

只能显示一种颜色

var option = {
        series: [{
          type: 'liquidFill',
          data: [0.5, 0.4, 0.3],
          color: ['gray', 'green', 'blue'],
          shape: 'container',
          outline: {
            show: false
          },
          label: {
            normal: {
              formatter: ''
            }
          },
          backgroundStyle: {
            color: '#FFF0'
          }
        }]
};

在echarts4.0中使用这个插件,发现只会显示一种颜色. 只显示color中的第一个颜色
透明度的修改也没有明显变化

how to use in vue2 ? import is get wrong

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]
    }]
};

click事件怎么写?

单击或者其他事件怎么写. 使用官方的on方法绑定的事件对这个无效.如果能单独实现也可以, 能否给个示例?

能不能控制图表填满canvas

一个 canvas 250250 的，图表大概只有 150 150 ，那样就产生了很多不可控的空白边距。

在Echarts4.0+以上会报错，不能执行渲染

波纹颜色能支持颜色渐变吗？

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]
    }]
};

echarts 4.0 upgrade

何时会对echarts 4.0进行支持，官方中说使用svg对水球图更合适，期待解决内存泄漏问题 ~

在webpack环境下，无法加载插件

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

import 'echarts-liquidfill'

export default{
  methods:{
     buildChart (){
       if(this.taskChart==null)
           this.taskChart = echarts.init(document.getElementById("d_todayTask"))
        this.taskChart.setOption({
             series: [{
                 type: 'liquidFill',
                 data: [{
                                value: 1,
                                itemStyle: {
                                    normal: {
                                        color: '#f55',
                                        opacity: 0.6
                                    }
                                }
                            }],
                            name: 'Liquid Fill',
                            outline: {
                                show: false
                            }
                        }],
                        tooltip: {
                            show: true
                        },
         })
     }
  }
}

报错信息如下：
Error: Component series.liquidFill not exists. Load it first.

请问是否是我的引入资源方式不对（使用 echarts 自带的图表都是正常的）

非常感谢！

调用能显示但是报错

var option = {
tooltip: {
formatter: "{a}
{b} : {c}"
},
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: true, readOnly: true},
//magicType : {show: true, type: ['line', 'bar']},
restore : {show: false},
saveAsImage : {show: true}
}
},
series: [{
type: 'liquidFill',
shape: 'circle',
data: [0.8, {
value: 0.75,
direction: 'left'
}],
radius: '70%',
outline: {
show: false
},
backgroundStyle: {
borderWidth: 2,
borderColor: '#156ACF'
},
amplitude: 10,
waveAnimation: true,
silent: false
}]
};

require 报错？

报错如下:
Uncaught Error: Mismatched anonymous define() module: function (WEBPACK_EXTERNAL_MODULE_2) ....

感觉这个 js 的插件化不够啊

萌新落落的问个问题

在vue中怎么引入这个气泡球插件

Error: Component series.liquidFill not exists. Load it first.
堆栈跟踪：
clazz.enableClassManagement/entity.getClass@webpack-internal:///23:166:23
visitComponent/<@webpack-internal:///440:195:51
each@webpack-internal:///0:263:13
visitComponent@webpack-internal:///440:178:17
componentUtil.enableTopologicalTravel/entity.topologicalTravel@webpack-internal:///89:89:21
mergeOption@webpack-internal:///440:147:13
initBase@webpack-internal:///440:642:9
resetOption@webpack-internal:///440:92:21
setOption@webpack-internal:///440:74:13
echartsProto.setOption@webpack-internal:///1:279:9
initChart@webpack-internal:///208:65:7
boundFn@webpack-internal:///17:184:9
mounted@webpack-internal:///208:27:5
callHook@webpack-internal:///17:2666:9
insert@webpack-internal:///17:3527:7
invokeInsertHook@webpack-internal:///17:5470:9
patch@webpack-internal:///17:5640:5
lifecycleMixin/Vue.prototype._update@webpack-internal:///17:2425:16
updateComponent@webpack-internal:///17:2539:7
get@webpack-internal:///17:2882:13
run@webpack-internal:///17:2959:17
flushSchedulerQueue@webpack-internal:///17:2725:5
queueNextTick/<@webpack-internal:///17:702:11
nextTickHandler@webpack-internal:///17:649:7

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6]
    }]
};

ecomfe / echarts-liquidfill Goto Github PK

echarts-liquidfill's Introduction

Liquid Fill Chart

Install ECharts

NOTE

Install echarts-liquidfill with npm

Download echarts-liquidfill from GitHub

Important Notes

Omitted normal

Flatten textStyle

Quick Start

Examples

A Simple Example

Multiple Waves

Color and Opacity

Static Waves

Still Water

Change A Single Wave

Background Style

Outline Style

Shape

Animation

Change Text

Shadow

Tooltip

Click Event

Non-interactable

API

data {(number|Object)[]}

color {string[]}

shape {string}

center {string[]}

radius {string}

amplitude {number}

waveLength {string|number}

phase {number}

period {number|'auto'|function}

direction {string}

waveAnimation {boolean}

animationEasing {string}

animationEasingUpdate {string}

animationDuration {number}

animationDurationUpdate {number}

outline.show {boolean}

outline.borderDistance {number}

outline.itemStyle.borderColor {string}

outline.itemStyle.borderWidth {number}

outline.itemStyle.shadowBlur {number}

outline.itemStyle.shadowColor {string}

backgroundStyle.color {string}

backgroundStyle.borderWidth {string}

backgroundStyle.borderColor {string}

backgroundStyle.itemStyle.shadowBlur {number}

backgroundStyle.itemStyle.shadowColor {string}

backgroundStyle.itemStyle.opacity {number}

itemStyle.opacity {number}

itemStyle.shadowBlur {number}

itemStyle.shadowColor {string}

emphasis.itemStyle.opacity {number}

label.show {boolean}

label.color {string}

label.insideColor {string}

label.fontSize {number}

label.fontWeight {string}

label.align {string}

label.baseline {string}

label.position {string|string[]}

Build

Notice

echarts-liquidfill's People

Contributors

Stargazers

Watchers

Forkers

echarts-liquidfill's Issues

代码

错误信息

复现步骤

Recommend Projects

Recommend Topics

Omitted `normal`

Flatten `textStyle`