多个Echart遍历生成 / 词图云

echart官网

安装

如果版本报错推荐安装以下版本
npm install echarts@4.8.0 --savenpm uninstall echarts//这个是卸载命令以下安装成功后是局部引入:

多个Echart遍历生成

vue3+echart

单个页面多个图表循环渲染展示:

在这里插入图片描述

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

点击单个图表可显示弹框

点击图表单个柱状图显示对应的表格弹框操作

在这里插入图片描述

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