Vue结合echarts实现水滴图

效果展示

核心代码

<template>
      <div id="cpu" style="width: 270px;height: 200px;"></div>
</template>
 
<script>
  import * as echarts from 'echarts';
    export default {
      name: "show",
      methods:{
          aucDrawLine() {
            // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
            // 这里'auc'是自己取的名字，跟div标签属性的id后面的值是一一对应的
            let myChart = echarts.init(document.getElementById('cpu'));
            // 绘制图表
            myChart.setOption( {
              title: {
                text: 'CPU使用率', // 标题名
                // 标题的样式
                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, // 边框线与图表的距离 数字
                  itemStyle: {
                    opacity: 0.9, // 边框的透明度   默认为 1
                    borderWidth: 2, // 边框的宽度
                    shadowBlur: 14, // 边框的阴影范围 一旦设置了内外都有阴影
                    shadowColor: "#fff", // 边框的阴影颜色,
                    borderColor:'#3AA66E' // 边框颜色
                  }
                },
                itemStyle: {
                  opacity: 0.9, // 波浪的透明度
                  shadowBlur: 0 // 波浪的阴影范围
                },
                backgroundStyle: {
                  color: '#fff' // 图表的背景颜色
                },
                label: { // 数据展示样式
                  show: true,
                  color: '#888',
                  insideColor: '#fff',
                  fontSize: 24,
                  fontWeight: 400,
                },
 
              }]
            })
          },
        },
      mounted() {
        this.aucDrawLine();
      },
    }
</script>复制