多个Echart遍历生成 / 词图云
echart官网安装
如果版本报错推荐安装以下版本
npm install echarts@4.8.0 --save
npm uninstall echarts//这个是卸载命令
以下安装成功后是局部引入:
多个Echart遍历生成
vue3+echart
单个页面多个图表循环渲染展示:
https://i-blog.csdnimg.cn/direct/39e344d684334e459a359684383c782c.png
<template>
<div class="main">
<div class="section">
<div class="section" v-for="(chartOption, index) in chartOptions" :key="index">
<div :ref="el => chartRefs = el" style="width:1400px;height: 400px"></div>
</div>
<!-- 隐藏表格 -->
<!-- <divclass="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-columnlabel="编辑" >
<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: ,
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: ,
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: ,
type: "bar",
name:'违规坐席'
},
],
},
];
const data: any = reactive({
});
const chartRefs = ref<HTMLDivElement[]>([]);
const charts = ref<echarts.ECharts[]>([]);
onMounted(() => {
chartOptions.forEach((option, index) => {
if (chartRefs.value) {
const chart = echarts.init(chartRefs.value);
const finalOption = {
...option,
tooltip: {
...option.tooltip,
}
};
chart.setOption(finalOption);
charts.value = chart;
}
});
});
onUnmounted(() => {
charts.value.forEach(chart => {
if (chart) {
chart.dispose();
}
});
});
const refData = toRefs(data);
return {
...refData,
chartOptions,
chartRefs,
};
},
};
</script>
<style lang="scss" scoped>
</style>
点击单个图表可显示弹框
点击图表单个柱状图显示对应的表格弹框操作
https://i-blog.csdnimg.cn/direct/554d12576ae042929d6f467eb5462ff5.png
<template>
<div class="main">
<div class="section">
<div class="section" v-for="(chartOption, index) in chartOptions" :key="index">
<div :ref="el => chartRefs = el" style="width:1400px;height: 400px"></div>
</div>
<!-- 隐藏表格 -->
<divclass="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-columnlabel="编辑" >
<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: ,
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: ,
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: ,
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} ${param.value}<br/>`;
});
} else {
// 单个数据项
tooltipContent += `${params.seriesName}<br/>${bullet}${params.name} ${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) {
const chart = echarts.init(chartRefs.value);
const finalOption = {
...option,
tooltip: {
...option.tooltip,
formatter: initParams
}
};
chart.setOption(finalOption);
chart.on('click', handleChartClick);
charts.value = 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>
词图云
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]