vue echarts 水波图占比

最新推荐文章于 2024-01-05 14:27:35 发布

新宇最优秀

最新推荐文章于 2024-01-05 14:27:35 发布

阅读量558

点赞数

分类专栏： echarts 文章标签： vue.js

本文链接：https://blog.csdn.net/tendernessxy/article/details/115672212

版权

本文介绍了如何使用Vue.js结合Echarts的liquidfill插件来创建水波图并展示数据占比，首先需要确保安装了echarts-liquidfill插件，然后在项目中进行相应的配置和使用。

摘要由CSDN通过智能技术生成

实现效果：
在这里插入图片描述
需要提前下载 echarts-liquidfill echarts没有这个插件

<template>
  <div id="waterChart" style="flex: 1; height: 150px; width: 100%"></div>
</template>
<script>
import {
    getNoteMatters } from '@/api/government';
export default {
   
  data() {
   
    return {
   
      durationData: [
      {
   name: "提前办结率", value: 0.9}
 	  {
   name: "按时办结率", value: 1}
 	  {
   name: "超时办结率", value: 0}],
    };
  },
  mounted() {
   
    this.initMap();
  },
  methods: {
   
    initMap() {
   
    // 这里this.$echarts相当于echarts  vue3.0不支持直接引入echarts 需要在全局挂载
    // import * as echarts from 'echarts';
    // import 'echarts-liquidfill';
    // app.config.globalProperties.$echarts = echarts;
      var myChart = this.$echarts.init(document.getElementById('waterChart'))