多个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>

词图云

相关推荐
java_heartLake4 小时前
Vue3之状态管理Vuex
vue·vuex·前端状态管理
小马超会养兔子4 小时前
如何写一个数字老虎机滚轮
开发语言·前端·javascript·vue
小马超会养兔子1 天前
如何写一个转盘
开发语言·前端·vue
bpmf_fff2 天前
二八(vue2-04)、scoped、data函数、父子通信、props校验、非父子通信(EventBus、provide&inject)、v-model进阶
vue
好开心332 天前
04、Vue与Ajax
前端·ajax·前端框架·vue·js
工业互联网专业2 天前
Python毕业设计选题:基于Python的社区爱心养老管理系统设计与实现_django
python·django·vue·毕业设计·源码·课程设计
平行线也会相交2 天前
云图库平台(一)后端项目初始化
spring boot·vue·云图库平台
ling081408143 天前
Vue3全局挂载Dialog组件
前端·javascript·vue
langzitianya3 天前
XMLHttpRequest接受chunked编码传输的HTTP Response时有问题
vue·xmlhttprequest·angular·chunked·流式