Echarts實戰案例代碼(5)：liquidFill水球組件利用svg path定製你自己的個性化圖標動態圖

svg水球圖演示效果

如上述的動態水球圖效果，替換不同的svg圖片即可實現不同的動態水球效果。

svg格式說明（百度百科）

SVG是一種圖像文件格式，它的英文全稱爲Scalable Vector Graphics，意思爲可縮放的矢量圖形。它是基於XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯盟進行開發的。嚴格來說應該是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，並可以隨時插入到HTML中通過瀏覽器來觀看。

svg圖片的製作或獲取

1.創建path形狀的方法,利用Illustartior定製你自己的個性化圖標（需要有一定的設計基礎）；
2.素材網下載svg格式,如阿里巴巴旗下iconfont；或下載ai格式，而後直接打開到Illustartor編輯；
3.右鍵查看路徑，把所有可釋放的複合路徑全部釋放，只保留要一個路徑，也只能用一個路徑；
4.全部選中右鍵菜單裏選擇→建立複合路徑（ 複製 path 標籤內的 d 屬性的值，如果有多個，則拼接到一起，然後粘貼替換 symbols 裏面的路徑，也就）；
5.文件-導出-導出爲 -保存類型【選擇SVG】-點擊按鈕導出；
6.SVG文件右鍵菜單選擇記事本打開，效果如下：

7.svg代碼將顯示出來，找到path標籤 d=“複製這裏的代碼”；

svg水球圖的Echarts代碼

option = {
    backgroundColor: "#000",
    title: {
        text: 'Mouse Beautiful',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: '#fff'
        }
    },
    series: [{
        type: 'liquidFill',
        data: [0.7],
        radius: '90%',
        waveLength: '30%',
        waveHeight: '10',
        amplitude: 20,
        outline: {
            show: false
        },
        backgroundStyle: {
            color: '#333',
            borderColor: '#000',
            borderWidth: 2,
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        },
        //path代碼粘貼到此處,代碼的多少取決於圖形的複雜度
        shape:'path://M1185 32L1182 34L1181 40L1197 56L1198 73L1196 75L1191 91L1186 100L1185 106L1174 113L1176 119L1174 125L1179 133L1185 134L1185 143L1192 147L1195 154L1194 160L1196 162L1197 175L1202 183L1204 193L1211 198L1211 200L1197 209L1191 210L1189 214L1185 217L1179 228L1185 240L1181 241L1182 248L1180 250L1178 249L1178 246L1175 247L1162 234L1158 234L1157 236L1159 243L1156 247L1165 259L1167 259L1168 262L1174 267L1173 269L1171 268L1168 274L1178 279L1180 286L1182 288L1180 292L1183 294L1183 297L1186 301L1183 303L1181 302L1177 295L1169 299L1166 296L1163 297L1165 299L1165 304L1161 306L1158 305L1152 312L1144 310L1140 307L1136 308L1132 305L1127 307L1129 311L1128 314L1125 310L1124 305L1119 306L1114 312L1111 312L1109 308L1107 308L1103 317L1092 328L1094 333L1090 336L1087 335L1085 337L1085 343L1087 346L1091 349L1092 347L1094 348L1090 353L1086 355L1083 354L1082 351L1082 354L1080 356L1073 356L1063 363L1045 370L1042 370L1035 363L1024 365L1021 367L1012 367L1012 383L1016 392L1019 394L1024 390L1027 390L1034 396L1031 413L1024 423L1024 425L1029 422L1031 422L1031 424L1029 429L1019 430L1015 434L1003 470L999 472L992 472L995 463L999 460L998 455L990 456L984 468L981 471L977 471L965 467L959 470L959 468L956 467L957 460L955 454L958 452L958 449L956 447L953 446L947 449L939 457L928 453L927 446L923 444L920 439L921 428L925 418L924 413L922 413L922 411L912 411L909 397L905 395L892 399L886 398L896 393L898 390L896 385L890 385L885 387L880 382L865 382L861 379L856 380L845 388L842 382L835 377L830 369L826 366L823 355L818 350L815 350L807 354L786 369L780 368L772 357L775 354L775 350L779 340L777 336L772 334L771 331L775 324L771 322L767 317L768 311L764 304L766 299L755 298L754 295L757 294L757 292L752 288L741 283L732 281L729 278L720 278L719 273L708 260L702 256L701 253L703 238L699 230L698 222L705 205L702 199L695 193L693 178L706 168L713 155L721 155L726 152L727 145L729 143L733 141L744 142L746 138L755 133L753 131L753 121L756 111L757 99L753 92L743 88L740 88L731 93L724 92L730 77L735 72L739 71L744 67L749 60L756 59L762 44L754 32L750 30L739 30L736 27L743 14L747 11L760 9L762 7L767 -8L775 -14L786 -19L800 -33L804 -31L806 -16L816 -5L818 14L822 16L835 12L848 17L853 24L861 44L866 50L877 56L886 56L891 54L899 47L899 39L890 23L891 16L903 2L926 -11L936 -10L939 -6L944 10L947 11L949 7L965 -2L972 -12L980 -37L987 -43L992 -44L995 -43L1000 -36L1000 -25L1002 -19L1010 -17L1024 -20L1029 -11L1030 -5L1034 1L1040 9L1048 15L1056 15L1057 9L1051 -6L1052 -9L1059 -12L1071 -10L1095 -1L1100 5L1102 17L1110 29L1139 23L1148 30L1156 32L1167 29L1169 23L1175 17L1177 17L1186 23L1183 30L1184 31z',
        color: ['rgba(255,255,0,0.3)'], //水波的顏色 對應的是data裏面值
        label: {
            normal: {
                formatter: '70%',
            }
        }
    }]
};

Done!