vue+echarts实现多个仪表盘图表

天使的同类

已于 2022-06-16 16:57:56 修改

阅读量1.3k

点赞数 1

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

于 2022-06-16 16:57:23 首次发布

本文链接：https://blog.youkuaiyun.com/Summer_JK/article/details/125319109

版权

本文介绍如何使用Vue.js和Echarts将官方单个仪表盘示例扩展为多个仪表盘。通过示例代码展示实现过程，并配以图表展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+echarts实现多个仪表盘图表

根据echarts官网单个仪表盘修改成多个仪表盘，代码如下：

<template>
  <div class="app-container homeIndex">
	<div class="mineEcharts">
		<div ref="mineEcharts" style="height: 200px" />
  </div>
</template>

<script>
import echarts from "echarts";

export default {
   
  name: "index",
  data() {
   
    return {
   
      mineEcharts: null,
    };
  },
  mounted() {
   
    this.getList();
  },
  methods: {
   
    getList() {
   
      var chartDom = this.$refs.mineEcharts;
      var myChart = echarts.init(chartDom);
      var option;

      option = {
   
      //鼠标悬停文字提示
        tooltip: {
   
          formatter: "{b} : {c}份",
        },
        series: [
          {
   
            name: "",
            type: "gauge",
            radius: "50%",
            center: ["15%"