快捷導(dǎo)航

Vue結(jié)合echarts實(shí)現(xiàn)繪制水滴圖

更新時(shí)間：2023年07月30日 14:38:44 作者：瘋狂的小強(qiáng)呀

這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合echarts實(shí)現(xiàn)水滴圖的繪制，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

效果展示

核心代碼

<template>
      <div id="cpu" style="width: 270px;height: 200px;"></div>
</template>

<script>
  import * as echarts from 'echarts';
    export default {
      name: "show",
      methods:{
          aucDrawLine() {
            // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例，所以只能在mounted中調(diào)用
            // 這里'auc'是自己取的名字，跟div標(biāo)簽屬性的id后面的值是一一對應(yīng)的
            let myChart = echarts.init(document.getElementById('cpu'));
            // 繪制圖表
            myChart.setOption( {
              title: {
                text: 'CPU使用率', // 標(biāo)題名
                // 標(biāo)題的樣式
                textStyle: {
                  color: '#888', // 字體顏色
                  fontFamily: 'Microsoft YaHei', // 字體
                  fontSize: 20,
                  fontWeight: '400',
                  align: 'center', // 文字的水平方式
                },
                left: 'center', // 定位
                top: '5%'
              },
              series: [{
                type: 'liquidFill',
                radius: '60%',
                waveAnimation: true,
                data: [{
                  value: 0.5,
                  direction: 'left',
                  itemStyle: {
                    normal: {
                      color: '#7DCEA0'
                    }
                  }
                },
                  {
                    value: 0.45,
                    direction: 'right',
                    itemStyle: {
                      normal: {
                        color: '#52BE80 '
                      }
                    }
                  },
                ],
                outline: {
                  show: true,
                  borderDistance: 5, // 邊框線與圖表的距離 數(shù)字
                  itemStyle: {
                    opacity: 0.9, // 邊框的透明度   默認(rèn)為 1
                    borderWidth: 2, // 邊框的寬度
                    shadowBlur: 14, // 邊框的陰影范圍 一旦設(shè)置了內(nèi)外都有陰影
                    shadowColor: "#fff", // 邊框的陰影顏色,
                    borderColor:'#3AA66E' // 邊框顏色
                  }
                },
                itemStyle: {
                  opacity: 0.9, // 波浪的透明度
                  shadowBlur: 0 // 波浪的陰影范圍
                },
                backgroundStyle: {
                  color: '#fff' // 圖表的背景顏色
                },
                label: { // 數(shù)據(jù)展示樣式
                  show: true,
                  color: '#888',
                  insideColor: '#fff',
                  fontSize: 24,
                  fontWeight: 400,
                },

              }]
            })
          },
        },
      mounted() {
        this.aucDrawLine();
      },
    }
</script>

到此這篇關(guān)于Vue結(jié)合echarts實(shí)現(xiàn)繪制水滴圖的文章就介紹到這了,更多相關(guān)Vue水滴圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: