1、在項(xiàng)目中使用echarts-liquidfill

1.1 引入js文件

使用該插件時(shí)，需要在引入 echarts.js

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

下載

echarts.js下載推薦CSDN：https://cdnjs.com/libraries/echarts
echarts-liquidfill.js下載：https://github.com/ecomfe/echarts-liquidfill

報(bào)錯(cuò)

Uncaught TypeError: x.ensureState is not a function

echarts.js和echarts-liquidfill.js版本不兼容

1.2 NPM

echarts-liquidfill@3兼容echarts@5 echarts-liquidfill@2兼容echarts@4

安裝

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

引用

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

或

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

2、簡(jiǎn)單示例

image.png

<!DOCTYPE html>
<html>
<head>
    <title>水球圖</title>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript" src="echarts-liquidfill.min.js"></script>
</head>
<body>
    <div id="app" style="width: 100%;height: 400px"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('app'));
        var option = {
            series: [{
                type: 'liquidFill',
                data: [0.6]
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

3、定制化水球圖

3.1 多個(gè)波形

image.png

將多個(gè)波形表示出來(lái)，既可以表示多個(gè)數(shù)據(jù)，也可以提高圖表的視覺(jué)效果。

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

0.6,0.5,0.4,0.3表示分別在60%，50%，40%，30%處各有一個(gè)波形
要幾個(gè)波形，data值就寫(xiě)幾個(gè)

3.2 設(shè)置波形的顏色，透明度

image.png

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, 0.3],
        color: ['red', '#0f0', 'rgb(0, 0, 255)'],//設(shè)置波形顏色
        itemStyle: {
                opacity: 0.6//設(shè)置normal時(shí)候的透明度
        },
        emphasis: {
            itemStyle: {
                opacity: 0.9//設(shè)置hover時(shí)候的透明度
            }
        }
    }]
};

或者

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

3.3 設(shè)置靜態(tài)的波形

為了防止波浪向左或向右移動(dòng)動(dòng)畫(huà)，將waveAnimation設(shè)置為false。禁用波浪上升的動(dòng)畫(huà)，設(shè)置animationDuration和animationDurationUpdate為0。

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

3.4 設(shè)置水平的靜態(tài)波形

image.png

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        amplitude: 0,
        waveAnimation: 0//考慮性能，建議將該值設(shè)置false
    }]
};

3.5 改變某個(gè)波形樣式

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, {
            value: 0.5,
            direction: 'left',//波形向左移動(dòng)
            itemStyle: {
                color: 'red'//波形顏色
            }
        }, 0.4, 0.3]
    }]
};

direction: 設(shè)為 'left' 或 'right'，指定波浪的移動(dòng)方向

3.6 設(shè)置水球圖背景色和內(nèi)邊框樣式

image.png

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        backgroundStyle: {
            borderWidth: 5,//邊框?qū)挾?            borderColor: 'red',//邊框顏色
            color: 'yellow'//背景色
        }
    }]
};

3.7 設(shè)置外邊框

image.png

設(shè)置outline.show為 false，隱藏外邊框
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        outline: {
            show: false
        }
    }]
};

3.8 設(shè)置水球圖形狀

設(shè)置shape值：
1） 'circle'， 'rect'， 'roundRect'， 'triangle'， 'diamond'， 'pin'， 'arrow'

image.png

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

2）'container':裝滿容器的形狀。

image.png

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

3）一個(gè)以'path://'開(kāi)頭的SVG路徑。

image.png

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'
        }
    }]
};

3.9 動(dòng)畫(huà)

一般來(lái)說(shuō)，在液體填充圖中有兩種類型的動(dòng)畫(huà)。
1）第一類是初始動(dòng)畫(huà)，具有起浪的效果。這個(gè)動(dòng)畫(huà)的easing方法由animationEasing控制，它的持續(xù)時(shí)間由animationDuration控制。
2）第二種類型是更新動(dòng)畫(huà)，通常在數(shù)據(jù)變化和波高變化時(shí)使用。它們由animationEasingUpdate和animationDurationUpdate控制。
例如，要禁用上升動(dòng)畫(huà)，并將動(dòng)畫(huà)更新時(shí)間設(shè)置為2秒，使用以下選項(xiàng):

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);

3.10 改變文字

1）默認(rèn)情況下，液體填充圖的文本標(biāo)簽顯示第一個(gè)數(shù)據(jù)的百分比。例如，對(duì)于數(shù)據(jù)為[0.6,0.5,0.4,0.3]的圖表，默認(rèn)文本為60%。
2）要更改文本，可以使用標(biāo)簽。格式化程序，可以設(shè)置為字符串或函數(shù)。
3）如果是字符串，{a}表示序列名，表示數(shù)據(jù)名，{c}表示數(shù)據(jù)值。

image.png

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\nValue: {c}',
            fontSize: 28
        }
    }]
};

或者

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
        }
    }]
};

文本位置默認(rèn)位于center。label.position可以設(shè)置為'inside', 'left', 'right', 'top', 'bottom'，或水平和垂直位置，例如：['10%'，'20%']，這意味著左邊的'10%'(由label.align控制，可以設(shè)置'left', 'center', or 'right')和“20%”頂部(由label.baseline控制，可以設(shè)置 'top', 'middle', or 'bottom')。

3.11 陰影

image.png

默認(rèn)情況下，波浪和輪廓有陰影。以下是如何改變它們的方法

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)'
            }
        }
    }]
};

3.12 提示框
添加tooltip,鼠標(biāo)移入后的提示框信息顯示

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

3.13 點(diǎn)擊事件

在waves上添加點(diǎn)擊事件:

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

與其他圖表類型一樣，上述代碼只會(huì)觸發(fā)wave上的事件。如果你想在整個(gè)畫(huà)布或特定元素上跟蹤事件，你可以像這樣在zrender中添加監(jiān)聽(tīng)器:

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

Non-interactable
要使一個(gè)元素(例如，一個(gè)波)非交互，只需將silent設(shè)置為true。

4、API

默認(rèn)項(xiàng)參數(shù)

{
    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
        }
    }
}

4.1 data {(number|Object)[]}

1）data里的每一項(xiàng)必須為0-1之間的值
2）data的每一項(xiàng)也可以是Object，設(shè)置單波形樣式

//設(shè)置第二波形為紅色
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, {
            value: 0.5,
            itemStyle: {
                color: 'red'
            }
        }, 0.4, 0.3]
    }]
};

4.2 color {string[]}

設(shè)置波形顏色

color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF']

4.3 shape {string}

設(shè)置水球圖形狀
1）'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
2）一個(gè)以'path://'開(kāi)頭的SVG路徑

4.4 center {string[]}

水球圖的位置。第一個(gè)值是x位置，第二個(gè)是y位置。每個(gè)值都可以是一個(gè)相對(duì)值，比如‘50%’，它是相對(duì)于容器寬度和高度的較小值，或者是一個(gè)絕對(duì)值，比如100px。

4.5 radius {string}

圖表的半徑，可以是一個(gè)相對(duì)值，如“50%”，這是相對(duì)于容器的寬度和高度的較小值，或一個(gè)絕對(duì)值，如“100px”。

4.6 amplitude {number}

水波的振幅，以像素或百分比表示。如果是百分比，那就是相對(duì)于直徑。

4.7 waveLength {string|number}

水波的波長(zhǎng)，可以是一個(gè)相對(duì)值，如“50%”，這是相對(duì)于直徑，或絕對(duì)值，如“100px”或“100”。

4.8 phase {number}

弧度系統(tǒng)中波的相位。默認(rèn)情況下，是auto即每一個(gè)波比前面一個(gè)波大`Math.PI / 4的相位。

4.9 period {number|'auto'|function}

向前移動(dòng)一個(gè)波長(zhǎng)所需的毫秒數(shù)。默認(rèn)情況下，它被設(shè)置為“auto”即前面的波有更高的速度。
它也可以是一個(gè)函數(shù)格式。

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;
        }
    }]
}

4.10 direction {string}

水波移動(dòng)的方向，可以設(shè)置為'right'或者'left'

4.11 waveAnimation {boolean}

是否允許水波向左移動(dòng)或向右移動(dòng)。

4.12 animationEasing {string}

初始動(dòng)畫(huà)的緩動(dòng)效果，例如當(dāng)波從底部開(kāi)始上升

4.13 animationEasingUpdate {string}

數(shù)據(jù)更新動(dòng)畫(huà)的緩動(dòng)效果，例如，當(dāng)數(shù)據(jù)值變化和波的位置變化時(shí)。

4.14 animationDuration {number}

初始動(dòng)畫(huà)的時(shí)長(zhǎng)，單位為毫秒。

4.15 animationDurationUpdate {number}

數(shù)據(jù)更新動(dòng)畫(huà)的時(shí)長(zhǎng)，單位為毫秒。

4.16 outline.show {boolean}

是否顯示外邊框

4.16 outline.borderDistance {number}

外邊框與內(nèi)圈之間的距離。

4.17 outline.itemStyle.borderColor {string}

外邊框顏色

4.18 outline.itemStyle.borderWidth {number}

外邊框?qū)挾?/p>

4.19 outline.itemStyle.shadowBlur {number}

外邊框陰影的模糊大小

4.20 outline.itemStyle.shadowColor {string}

外邊框陰影顏色

4.21 backgroundStyle.color {string}

內(nèi)圈背景色

4.22 backgroundStyle.borderWidth {string}

內(nèi)圈描邊邊框

4.23 backgroundStyle.borderColor {string}

內(nèi)圈描邊邊框顏色

4.24 backgroundStyle.itemStyle.shadowBlur {number}

背景色陰影的模糊大小

4.25 backgroundStyle.itemStyle.shadowColor {string}

背景色陰影的顏色

4.26 backgroundStyle.itemStyle.opacity {number}

背景色的透明度

4.27 itemStyle.opacity {number}

水波透明度

4.28 itemStyle.shadowBlur {number}

水波陰影的模糊大小

4.29 itemStyle.shadowColor {string}

水波陰影的顏色

4.30 emphasis.itemStyle.opacity {number}

當(dāng)鼠標(biāo)移入后，水波的透明度

4.31 label.show {boolean}

是否顯示文本標(biāo)簽

4.32 label.color {string}

文本標(biāo)簽的顏色(background上的)

4.33 label.insideColor {string}

文本標(biāo)簽的顏色(wave上的)即文本標(biāo)簽在wave上的顏色

4.34 label.fontSize {number}

文本標(biāo)簽的字體大小

4.35 label.fontWeight {string}

文本標(biāo)簽的字體粗細(xì)

4.36 label.align {string}

文本標(biāo)簽的對(duì)齊。 'left', 'center'或 'right'.

4.37 label.baseline {string}

文本標(biāo)簽的垂直對(duì)齊方式, 'top', 'middle'或 'bottom'.

4.38 label.position {string|string[]}

文本標(biāo)簽的位置，默認(rèn)是center。值可以設(shè)置為 'inside', 'left', 'right', 'top', 'bottom'或水平和垂直位置”(“10%”,“20%”)”,意思是“10%”的左邊,“20%”。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

echarts-liquidfill水球圖教程

1、在項(xiàng)目中使用echarts-liquidfill

1.1 引入js文件

下載

報(bào)錯(cuò)

1.2 NPM

安裝

引用

2、簡(jiǎn)單示例

3、定制化水球圖

3.1 多個(gè)波形

3.2 設(shè)置波形的顏色，透明度

3.3 設(shè)置靜態(tài)的波形

3.4 設(shè)置水平的靜態(tài)波形

3.5 改變某個(gè)波形樣式

3.6 設(shè)置水球圖背景色和內(nèi)邊框樣式

3.7 設(shè)置外邊框

3.8 設(shè)置水球圖形狀

3.9 動(dòng)畫(huà)

3.10 改變文字

3.11 陰影

3.13 點(diǎn)擊事件

4、API

4.1 data {(number|Object)[]}

4.2 color {string[]}

4.3 shape {string}

4.4 center {string[]}

4.5 radius {string}

4.6 amplitude {number}

4.7 waveLength {string|number}

4.8 phase {number}

4.9 period {number|'auto'|function}

4.10 direction {string}

4.11 waveAnimation {boolean}

4.12 animationEasing {string}

4.13 animationEasingUpdate {string}

4.14 animationDuration {number}

4.15 animationDurationUpdate {number}

4.16 outline.show {boolean}

4.16 outline.borderDistance {number}

4.17 outline.itemStyle.borderColor {string}

4.18 outline.itemStyle.borderWidth {number}

4.19 outline.itemStyle.shadowBlur {number}

4.20 outline.itemStyle.shadowColor {string}

4.21 backgroundStyle.color {string}

4.22 backgroundStyle.borderWidth {string}

4.23 backgroundStyle.borderColor {string}

4.24 backgroundStyle.itemStyle.shadowBlur {number}

4.25 backgroundStyle.itemStyle.shadowColor {string}

4.26 backgroundStyle.itemStyle.opacity {number}

4.27 itemStyle.opacity {number}

4.28 itemStyle.shadowBlur {number}

4.29 itemStyle.shadowColor {string}

4.30 emphasis.itemStyle.opacity {number}

4.31 label.show {boolean}

4.32 label.color {string}

4.33 label.insideColor {string}

4.34 label.fontSize {number}

4.35 label.fontWeight {string}

4.36 label.align {string}

4.37 label.baseline {string}

4.38 label.position {string|string[]}

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、在項(xiàng)目中使用echarts-liquidfill

2、簡(jiǎn)單示例

3、定制化水球圖

3.2 設(shè)置波形的顏色，透明度

4、API