echarts官方文檔國內鏡像詳情 - echarts官方文檔國內鏡像,ci,數據,官網,雲原生,雲計算 16213681 博客

前言

echarts4 官網：https://echarts.apache.org/v4/zh/option.html#series-scatter.coordinateSystem

echarts5 官網：https://echarts.apache.org/

echarts-liquidfill 水球圖插件官網: https://www.npmjs.com/package/echarts-liquidfill

官方效果圖：

echarts官方文檔國內鏡像_echarts官方文檔國內鏡像

我們可以基於上圖做樣式定製，如下圖

echarts官方文檔國內鏡像_ci_02

安裝

npm install echarts --save
npm install echarts-liquidfill --save

1. echarts-liquidfill 基於 echarts，所以要確保已經安裝了 echarts
2. echarts4 需要安裝 echarts-liquidfill@2.0.6 版本，echarts5 需要安裝 echarts-liquidfill@3.0.0 及以上版本

引入

echarts4 的引入方式

import Echarts from 'echarts'
import 'echarts-liquidfill’

echarts5 的引入方式

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

基本使用示例

1. 一個波浪

echarts官方文檔國內鏡像_官網_03

<template>
    <div id="container" class="liquidfill-container"></div>
</template>

<script>
    import 'echarts-liquidfill'
    export default {
        name: 'LiquidfillTest',
        mounted () {
            const data = [0.68] // 顯示一個波浪
            const dom = document.getElementById('container')
            const chart = this.$echarts.init(dom)
            chart.setOption({
                series: [{
                    type: 'liquidFill',
                    data: data
                }]
            })
        }
    }
</script>

<style lang="scss" scoped>
.liquidfill-container {
    width: 100%;
    height: 100%;
}
</style>

2. 顯示多個波浪

echarts官方文檔國內鏡像_ci_04

<template>
    <div id="container" class="liquidfill-container"></div>
</template>

<script>
    import 'echarts-liquidfill'
    export default {
        name: 'LiquidfillTest',
        mounted () {
            const data = [0.68, 0.5, 0.4] // 顯示多個波浪, 並且數值必須從大到小排列, 若從小到大排列，最大的波浪會遮擋住其餘比它小的波浪
            const dom = document.getElementById('container')
            const chart = this.$echarts.init(dom)
            chart.setOption({
                series: [{
                    type: 'liquidFill',
                    data: data
                }]
            })
        }
    }
</script>

<style lang="scss" scoped>
.liquidfill-container {
    width: 100%;
    height: 100%;
}
</style>

3. itemStyle，emphasis 屬性分別給其中一個波浪設置透明度以及 hover 後的樣式

echarts官方文檔國內鏡像_echarts官方文檔國內鏡像_05

echarts官方文檔國內鏡像_ci_06

<template>
    <div id="container" class="liquidfill-container"></div>
</template>

<script>
    import 'echarts-liquidfill'
    export default {
        name: 'LiquidfillTest',
        mounted () {
             const data = [0.68, 0.5, { // 如果只想給其中某一個波浪，比如最後一個波浪設置透明度以及鼠標移入的透明度
                value: 0.4,
                itemStyle: {
                    opacity: 0.6
                },
                emphasis: {
                    itemStyle: {
                        opacity: 0.9
                    }
                }
            }]
            const dom = document.getElementById('container')
            const chart = this.$echarts.init(dom)
            chart.setOption({
                series: [{
                    type: 'liquidFill',
                    data: data
                }]
            })
        }
    }
</script>

<style lang="scss" scoped>
.liquidfill-container {
    width: 100%;
    height: 100%;
}
</style>

4. direction設置波浪往不同的方向浮動，比如，一條波浪從左往右，另外兩條波浪從右往左

echarts官方文檔國內鏡像_echarts官方文檔國內鏡像_07

<template>
    <div id="container" class="liquidfill-container"></div>
</template>

<script>
    import 'echarts-liquidfill'
    export default {
        name: 'LiquidfillTest',
        mounted () {
             const data = [0.68, 0.5, { // 如果只想給其中某一個波浪，比如最後一個波浪設置透明度以及鼠標移入的透明度
                value: 0.4,
                direction: 'left', // 讓波浪往不同的方向浮動，比如這裏設置往左，未設置的波浪會往右
                itemStyle: {
                    opacity: 0.6
                },
                emphasis: {
                    itemStyle: {
                        opacity: 0.9
                    }
                }
            }]
            const dom = document.getElementById('container')
            const chart = this.$echarts.init(dom)
            chart.setOption({
                series: [{
                    type: 'liquidFill',
                    data: data
                }]
            })
        }
    }
</script>

<style lang="scss" scoped>
.liquidfill-container {
    width: 100%;
    height: 100%;
}
</style>

5. shape 屬性改變水球的形狀，默認為 circle

echarts官方文檔國內鏡像_數據_08

<template>
    <div id="container" class="liquidfill-container"></div>
</template>

<script>
    import 'echarts-liquidfill'
    export default {
        name: 'LiquidfillTest',
        mounted () {
            const data = [0.68, 0.5, 0.4]
            const dom = document.getElementById('container')
            const chart = this.$echarts.init(dom)
            chart.setOption({
                series: [{
                    type: 'liquidFill',
                    data: data,
                    shape: 'diamond' // 改變水球圖的形狀，比如 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                }]
            })
        }
    }
</script>

<style lang="scss" scoped>
.liquidfill-container {
    width: 100%;
    height: 100%;
}
</style>

6. color 屬性，修改波浪的顏色

並會自動與下面代碼 data 中的數據從大到小進行映射，如，red-0.68；blue-0.5；yellow-0.4

echarts官方文檔國內鏡像_數據_09

<template>
    <div id="container" class="liquidfill-container"></div>
</template>

<script>
    import 'echarts-liquidfill'
    export default {
        name: 'LiquidfillTest',
        mounted () {
             const data = [0.68, 0.5, 0.4]
            const dom = document.getElementById('container')
            const chart = this.$echarts.init(dom)
            chart.setOption({
                series: [{
                    type: 'liquidFill',
                    data: data,
                    shape: 'circle', // 改變水球圖的形狀，比如 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    color: ['red', 'blue', 'yellow'] // 修改波浪的顏色，並會自動與 data 中的數據從大到小進行映射，如，red-0.68；blue-0.5；yellow-0.4
                }]
            })
        }
    }
</script>

<style lang="scss" scoped>
.liquidfill-container {
    width: 100%;
    height: 100%;
}
</style>

7. background 屬性，修改水球圖背景顏色

echarts官方文檔國內鏡像_ci_10

<template>
    <div id="container" class="liquidfill-container"></div>
</template>

<script>
    import 'echarts-liquidfill'
    export default {
        name: 'LiquidfillTest',
        mounted () {
             const data = [0.68, 0.5, 0.4]
            const dom = document.getElementById('container')
            const chart = this.$echarts.init(dom)
            chart.setOption({
                series: [{
                    type: 'liquidFill',
                    data: data,
                    shape: 'circle', // 改變水球圖的形狀，比如 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    color: ['red', 'blue', 'yellow'], // 修改波浪的顏色，並會自動與 data 中的數據從大到小進行映射，如，red-0.68；blue-0.5；yellow-0.4
                     backgroundStyle: {
                        color: 'purple', // 修改背景顏色
                        borderWidth: 4, // 修改背景邊框寬度
                        borderColor: 'green' // 修改背景邊框的顏色
                    }
                }]
            })
        }
    }
</script>

<style lang="scss" scoped>
.liquidfill-container {
    width: 100%;
    height: 100%;
}
</style>

8. outline 屬性，修改外層樣式

echarts官方文檔國內鏡像_ci_11

<template>
    <div id="container" class="liquidfill-container"></div>
</template>

<script>
    import 'echarts-liquidfill'
    export default {
        name: 'LiquidfillTest',
        mounted () {
             const data = [0.68, 0.5, 0.4]
            const dom = document.getElementById('container')
            const chart = this.$echarts.init(dom)
            chart.setOption({
                series: [{
                    type: 'liquidFill',
                    data: data,
                    shape: 'circle', // 改變水球圖的形狀，比如 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    color: ['red', 'blue', 'yellow'], // 修改波浪的顏色，並會自動與 data 中的數據從大到小進行映射，如，red-0.68；blue-0.5；yellow-0.4
                     backgroundStyle: {
                        color: 'purple', // 修改背景顏色
                        borderWidth: 4, // 修改背景邊框寬度
                        borderColor: 'green' // 修改背景邊框的顏色
                    },
                     outline: { // 修改外層樣式
                        show: true,
                        borderDistance: 10, // 設置和外層輪廓的間距
                        itemStyle: {
                            borderWidth: 2, // 設置外層邊框寬度
                            borderColor: 'red', // 設置外層邊框顏色
                            shadowBlur: 'none' // 消除外層邊框陰影
                        }
                    }
                }]
            })
        }
    }
</script>

<style lang="scss" scoped>
.liquidfill-container {
    width: 100%;
    height: 100%;
}
</style>

注：因為想偷懶，水球效果圖沒有做動圖，所以有一些效果設置截圖後也看不出效果，我把完整示例和註釋附上😂

完整示例 Demo

<template>
    <div id="container" class="liquidfill-container"></div>
</template>

<script>
    import 'echarts-liquidfill'
    export default {
        name: 'LiquidfillTest',
        mounted () {
            // const data = [0.68] // 顯示一個波浪
            // const data = [0.68, 0.5, 0.4] // 顯示多個波浪, 並且數值必須從大到小排列, 若從小到大排列，最大的波浪會遮擋住其餘比它小的波浪
            const data = [0.68, 0.5, { // 如果只想給其中某一個波浪，比如最後一個波浪設置透明度以及鼠標移入的透明度
                value: 0.4,
                direction: 'left', // 讓波浪往不同的方向浮動，比如這裏設置往左，未設置的波浪會往右
                itemStyle: {
                    opacity: 0.6
                },
                emphasis: {
                    itemStyle: {
                        opacity: 0.9
                    }
                }
            }]
            const dom = document.getElementById('container')
            const chart = this.$echarts.init(dom)
            chart.setOption({
                series: [{
                    type: 'liquidFill',
                    data: data,
                    // radius: '100%', // 半徑
                    shape: 'circle', // 改變水球圖的形狀，比如 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    color: ['red', 'blue', 'yellow'], // 修改波浪的顏色，並會自動與 data 中的數據從大到小進行映射，如，red-0.68；blue-0.5；yellow-0.4
                    // itemStyle: { // 設置水球透明度
                    //     opacity: 0.6
                    // },
                    // emphasis: { // 設置鼠標移入波浪後的透明度，不設置該數值，默認跟 itemStyle 中設置的一樣，為 0.6
                    //     itemStyle: {
                    //         opacity: 0.9
                    //     }
                    // },
                    // waveAnimation: false, // 讓波浪停止繪製，從動態變為靜止，該屬性最好和 AnimationDuration， AnimationDurationUpdate 一起設置
                    // AnimationDuration: 0,
                    // AnimationDurationUpdate: 0,
                    amplitude: 10, // 控制波浪的振幅，為 0，怎會變為直線的波紋並且波浪為靜止，如果給 10，波紋明顯幅度變小，50 則會很陡峭
                    backgroundStyle: {
                        color: 'purple', // 修改背景顏色
                        borderWidth: 4, // 修改背景邊框寬度
                        borderColor: 'green' // 修改背景邊框的顏色
                    },
                    outline: { // 修改外層樣式
                        show: true,
                        borderDistance: 10, // 設置和外層輪廓的間距
                        itemStyle: {
                            borderWidth: 2, // 設置外層邊框寬度
                            borderColor: 'red', // 設置外層邊框顏色
                            shadowBlur: 'none' // 消除外層邊框陰影
                        }
                    }
                    // outline: { // 隱藏外層
                    //     show: false
                    // }
                }]
            })
        }
    }
</script>

<style lang="scss" scoped>
.liquidfill-container {
    width: 100%;
    height: 100%;
}
</style>

本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。

16213681 博客

16213681 博客

博客 / 詳情

echarts官方文檔國內鏡像

發佈評論

Product

Company

Support

Company

博客 / 詳情

echarts官方文檔國內鏡像

發佈 評論

發佈評論