多个Echart遍历生成 / 词图云

echart官网

安装

javascript 复制代码
如果版本报错推荐安装以下版本
npm install echarts@4.8.0 --save

npm uninstall echarts//这个是卸载命令

以下安装成功后是局部引入:

多个Echart遍历生成

javascript 复制代码
vue3+echart
javascript 复制代码
单个页面多个图表循环渲染展示:
javascript 复制代码
<template>
  <div class="main">
    <div class="section">
      <div class="section" v-for="(chartOption, index) in chartOptions" :key="index">
        <div :ref="el => chartRefs[index] = el" style="width:1400px;height: 400px"></div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { ref, reactive, toRefs, onUnmounted, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router"; //引入路由
import * as echarts from "echarts";
export default {
  name: "",
  setup() {
    let router = useRouter(),
    route = useRoute();
    // 图标数据
    const chartOptions: any = [
      {
        title: [
          {
            left: "left",
            text: "违规命中统计",
          }
        ],
        legend: {
          data: ['违规规则', 'Union Ads']
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          { 
            name: '违规规则',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              color: "#23e3fb", 
            },
          },
        ],
        tooltip: {
          // 这里暂时不设置 formatter
        }
      },
      {
        title: [
          {
            left: "left",
            text: "违规门店统计",
          }
        ],
        legend: {
          data: ['违规门店', 'Union Ads']
        },
        tooltip: {
          // 这里暂时不设置 formatter
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            name: '违规门店',
            itemStyle: {
              color: "#23e3fb", 
            },
          },
        ],
      },
      {
        title: [
          {
            left: "left",
            text: "违规坐席统计",
          }
        ],
         legend: {
          data: ['违规坐席', 'Union Ads']
        },
        tooltip: {
          // 这里暂时不设置 formatter
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            name:'违规坐席'
          },
        ],
      },
    ];

    const data: any = reactive({
    });
    const chartRefs = ref<HTMLDivElement[]>([]);
    const charts = ref<echarts.ECharts[]>([]);
    onMounted(() => {
      chartOptions.forEach((option, index) => {
        if (chartRefs.value[index]) {
          const chart = echarts.init(chartRefs.value[index]);
          const finalOption = {
            ...option,
            tooltip: {
              ...option.tooltip,
            }
          };
          chart.setOption(finalOption);
          charts.value[index] = chart;
        }
      });
    });

    onUnmounted(() => {
      charts.value.forEach(chart => {
        if (chart) {
          chart.dispose();
        }
      });
    });

    const refData = toRefs(data);
    return {
      ...refData,
      chartOptions,
      chartRefs,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

点击单个图表可显示弹框

javascript 复制代码
点击图表单个柱状图显示对应的表格弹框操作
javascript 复制代码
<template>
  <div class="main">
    <div class="section">
      <div class="section" v-for="(chartOption, index) in chartOptions" :key="index">
        <div :ref="el => chartRefs[index] = el" style="width:1400px;height: 400px"></div>
      </div>
      <!-- 隐藏表格 -->
      <div  class="table-section">
      <el-dialog v-model="showTable" title="" width="500" align-center>
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="value" label="值" />
        <el-table-column  label="编辑" >
            <template #default="scope">
           <el-button type="primary" @click="btnView(scope.row)">查看</el-button>
            </template>
        </el-table-column>
      </el-table></el-dialog>
    </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { ref, reactive, toRefs, onUnmounted, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router"; //引入路由
import * as echarts from "echarts";
export default {
  name: "",
  setup() {
    let router = useRouter(),
    route = useRoute();
    // 图标数据
    const chartOptions: any = [
      {
        title: [
          {
            left: "left",
            text: "违规命中统计",
          }
        ],
        legend: {
          data: ['违规规则', 'Union Ads']
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          { 
            name: '违规规则',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              color: "#23e3fb", 
            },
          },
        ],
        tooltip: {
          // 这里暂时不设置 formatter
        }
      },
      {
        title: [
          {
            left: "left",
            text: "违规门店统计",
          }
        ],
        legend: {
          data: ['违规门店', 'Union Ads']
        },
        tooltip: {
          // 这里暂时不设置 formatter
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            name: '违规门店',
            itemStyle: {
              color: "#23e3fb", 
            },
          },
        ],
      },
      {
        title: [
          {
            left: "left",
            text: "违规坐席统计",
          }
        ],
         legend: {
          data: ['违规坐席', 'Union Ads']
        },
        tooltip: {
          // 这里暂时不设置 formatter
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            name:'违规坐席'
          },
        ],
      },
    ];
    const initParams = (params: any) => {
      let tooltipContent = '';
      const bullet = '<span style="display: inline-block; width: 10px; height: 10px; background-color:#23e3fb; border-radius: 50%; margin-right: 5px;"></span>';
      if (Array.isArray(params)) {
        // 多个数据项
        params.forEach((param) => {
          tooltipContent += `${param.seriesName}<br/>${bullet}${param.name} &nbsp; ${param.value}<br/>`;
        });
      } else {
        // 单个数据项
        tooltipContent += `${params.seriesName}<br/>${bullet}${params.name} &nbsp; ${params.value}<br/>`;
      }

      return tooltipContent;
    };

    const data: any = reactive({
      // chartOptions:chartOptions,//也可在这里赋值使用(也可定义并暴露出去)
      showTable:false,//点击图标显示弹框表格
      tableData:[]=[],//弹框表格数据
    });
    const chartRefs = ref<HTMLDivElement[]>([]);
    const charts = ref<echarts.ECharts[]>([]);
    const handleChartClick = (params: any) => {
      data.showTable = true;
      data.tableData = [
        { name: params.seriesName, value: params.value },
        { name: '日期', value: params.name },
        // 可以根据需要添加更多字段
      ];
    };
    onMounted(() => {
      chartOptions.forEach((option, index) => {
        if (chartRefs.value[index]) {
          const chart = echarts.init(chartRefs.value[index]);
          const finalOption = {
            ...option,
            tooltip: {
              ...option.tooltip,
              formatter: initParams
            }
          };
          chart.setOption(finalOption);
          chart.on('click', handleChartClick);
          charts.value[index] = chart;
        }
      });
    });

    onUnmounted(() => {
      charts.value.forEach(chart => {
        if (chart) {
          chart.dispose();
        }
      });
    });

    const refData = toRefs(data);
    return {
      ...refData,
      chartOptions,
      chartRefs,
      initParams
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

词图云

相关推荐
肖祥7 小时前
uni-app x使用uview-plus
vue
dcloud_jibinbin11 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
龙仔CLL15 小时前
vue3下载图片,pdf,excle,word通用函数
pdf·vue·word
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
瓯雅爱分享3 天前
Java+Vue构建的采购招投标一体化管理系统,集成招标计划、投标审核、在线竞价、中标公示及合同跟踪功能,附完整源码,助力企业实现采购全流程自动化与规范化
java·mysql·vue·软件工程·源代码管理
苏打水com3 天前
前端框架深度解析:Vue 从入门到实战,掌握渐进式开发核心
vue
棋子一名3 天前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
苏打水com4 天前
前端框架深度解析:Vue.js 3 从 Composition API 到生态升级,解锁企业级开发新能力
vue
知识分享小能手4 天前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue