quick-admin-vue3-core
Version:
以快（计算机执行效率、开发效率）为核心的后台管理系统开发模板
330 lines (329 loc) • 9.32 kB
JavaScript
import { defineComponent as n, resolveComponent as p, createElementBlock as d, openBlock as m, createVNode as e, createElementVNode as a, withCtx as s } from "vue";
import { _ as i } from "./Chart.vue_vue_type_script_setup_true_lang-D42ckqgo.js";
import { _ as r } from "./ChartLine.vue_vue_type_script_setup_true_lang-BUIkbh_u.js";
import { _ as f } from "./ChartBar.vue_vue_type_script_setup_true_lang-B_hUELNo.js";
import { _ as x } from "./ChartPie.vue_vue_type_script_setup_true_lang-BhbIzByD.js";
import { _ as y, a as _ } from "./MultiCharts.vue_vue_type_script_setup_true_lang-D9H0hEEJ.js";
import { _ as c } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const u = { class: "row f-sb-s" }, h = { class: "row f-sb-s" }, A = /* @__PURE__ */ n({
name: "DemoCenterChartEcharts",
__name: "index",
setup(b) {
const l = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line"
}
]
}, o = [
{
type: "line",
title: "折线图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 4, 30],
["2019-01-02", 110, 21, 5, 30],
["2019-01-03", 120, 22, 6, 30],
["2019-01-04", 140, 23, 7, 30],
["2019-01-05", 150, 24, 8, 30],
["2019-01-06", 160, 25, 9, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "金额($)" },
series: { smooth: !0 }
},
{
type: "line",
title: "折线图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "%" },
series: { smooth: !0 }
},
{
type: "line",
title: "折线图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 4, 30],
["2019-01-02", 110, 21, 5, 30],
["2019-01-03", 120, 22, 6, 30],
["2019-01-04", 140, 23, 7, 30],
["2019-01-05", 150, 24, 8, 30],
["2019-01-06", 160, 25, 9, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "金额($)" },
series: { smooth: !0 }
},
{
type: "bar",
title: "柱状图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "数量" },
series: {
barWidth: 5,
itemStyle: {
borderRadius: [8, 8, 0, 0]
}
}
},
{
type: "bar",
title: "柱状图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "数量" },
series: {
barWidth: 5,
itemStyle: {
borderRadius: [8, 8, 0, 0]
}
}
},
{
type: "bar",
title: "柱状图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "数量" },
series: {
barWidth: 5,
itemStyle: {
borderRadius: [8, 8, 0, 0]
}
}
},
{
type: "pie",
title: "饼状图",
dataset: [
["type", "销售额"],
["销售额", 100],
["订单量", 110],
["客单价", 120],
["动销率", 150]
],
xAxis: { show: !1 },
yAxis: { show: !1 },
series: [{ radius: 70 }, { radius: [45, 70] }]
},
{
type: "pie",
title: "饼状图",
dataset: [
["type", "销售额"],
["销售额", 100],
["订单量", 110],
["客单价", 120],
["动销率", 150]
],
xAxis: { show: !1 },
yAxis: { show: !1 },
series: [{ radius: 70 }, { radius: [45, 70] }]
},
{
type: "pie",
title: "饼状图",
dataset: [
["type", "销售额"],
["销售额", 100],
["订单量", 110],
["客单价", 120],
["动销率", 150]
],
xAxis: { show: !1 },
yAxis: { show: !1 },
series: [{ radius: 70 }, { radius: [45, 70] }]
},
{
type: "line",
title: "折线图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "%" },
series: { smooth: !0 }
},
{
type: "bar",
title: "柱状图",
dataset: [
["type", "销售额", "订单量", "客单价", "动销率"],
["2019-01-01", 100, 20, 44, 30],
["2019-01-02", 110, 21, 55, 30],
["2019-01-03", 120, 22, 66, 30],
["2019-01-04", 140, 23, 72, 30],
["2019-01-05", 150, 24, 180, 30],
["2019-01-06", 160, 25, 92, 30]
],
xAxis: { name: "日期" },
yAxis: { name: "数量" },
series: {
barWidth: 10,
itemStyle: {
borderRadius: [8, 8, 0, 0]
}
}
},
{
type: "pie",
title: "饼状图",
dataset: [
["type", "销售额"],
["销售额", 100],
["订单量", 110],
["客单价", 120],
["动销率", 150]
],
xAxis: { show: !1 },
yAxis: { show: !1 },
series: [{ radius: 70 }, { radius: [45, 70] }]
}
];
return (w, C) => {
const t = p("BaseSection");
return m(), d("div", null, [
e(t, {
gap: !1,
class: "row f-1",
title: "通图图表 - 折线图"
}, {
default: s(() => [
e(r)
]),
_: 1
}),
a("div", u, [
e(t, {
gap: !1,
class: "f-1",
title: "基础万能图 - Chart"
}, {
default: s(() => [
e(i)
]),
_: 1
}),
e(t, {
gap: !1,
class: "f-1",
title: "饼图 - ChartPie"
}, {
default: s(() => [
e(x)
]),
_: 1
})
]),
a("div", h, [
e(t, {
gap: !1,
class: "f-1",
title: "自定义option - Chart"
}, {
default: s(() => [
e(i, { option: l })
]),
_: 1
}),
e(t, {
gap: !1,
class: "f-1",
title: "折线图 - ChartLine"
}, {
default: s(() => [
e(r)
]),
_: 1
}),
e(t, {
gap: !1,
class: "f-1",
title: "柱状图 - ChartBar（多维度）"
}, {
default: s(() => [
e(f)
]),
_: 1
}),
e(t, {
gap: !1,
class: "f-1",
title: "柱状图 - ChartBars（多个）"
}, {
default: s(() => [
e(y)
]),
_: 1
})
]),
e(t, {
gap: !1,
class: "row f-1",
title: "单例多图 - MultiCharts（后续完善）"
}, {
default: s(() => [
e(_, {
data: o,
layout: "4x3",
log: "单例多图"
})
]),
_: 1
})
]);
};
}
}), E = /* @__PURE__ */ c(A, [["__scopeId", "data-v-e4bbf30c"]]);
export {
E as default
};