loveflow
7 months ago
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 978 B |
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
let dataList = this.chartObj.data;
|
||||
let maxArr = [];
|
||||
let maxValue = 0;
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
let total = 0;
|
||||
|
||||
dataList.forEach((item) => {
|
||||
xData.push(item.name);
|
||||
yData.push(item.value);
|
||||
if (maxValue < item.value) {
|
||||
maxValue = item.value;
|
||||
}
|
||||
});
|
||||
dataList.forEach((item) => {
|
||||
maxArr.push(maxValue);
|
||||
total = total + item.value;
|
||||
});
|
||||
if (!total) {
|
||||
total = 1;
|
||||
}
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "100",
|
||||
top: "10", // 设置条形图的边距
|
||||
right: "50",
|
||||
bottom: "6",
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
data: xData,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
width: 100,
|
||||
padding: [0, 0, 0, -90],
|
||||
align: "left",
|
||||
rich: {
|
||||
index: {
|
||||
padding: [4, 5, 2, 5],
|
||||
color: this.chartObj.color[2],
|
||||
borderWidth: 1,
|
||||
borderRadius: 2,
|
||||
borderColor: this.chartObj.color[2],
|
||||
},
|
||||
name: {
|
||||
width: 100,
|
||||
padding: [0, 0, 0, 2],
|
||||
color: "#ffffff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
formatter: (name, index) => {
|
||||
const _index = index + 1;
|
||||
if (name.length > 4) {
|
||||
name = name.substring(0, 4) + "...";
|
||||
}
|
||||
if (dataList.length) {
|
||||
return `{index|${_index}} {name|${name}}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
offset: 0,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
// 内
|
||||
type: "bar",
|
||||
barWidth: 6,
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
var color = {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: this.chartObj.color[0], // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: this.chartObj.color[1], // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
};
|
||||
return color;
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: dataList,
|
||||
z: 2,
|
||||
animationEasing: "elasticOut",
|
||||
},
|
||||
{
|
||||
// 外边框
|
||||
type: "pictorialBar",
|
||||
symbol: "rect",
|
||||
symbolBoundingData: maxValue,
|
||||
barWidth: 1,
|
||||
itemStyle: {
|
||||
barBorderRadius: 10,
|
||||
normal: {
|
||||
color: "none",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
padding: [6, 0, 0, 4],
|
||||
textStyle: {
|
||||
rich: {
|
||||
value: {
|
||||
width: 54,
|
||||
padding: [4, 10, 0, -60],
|
||||
color: "#9CE0FF",
|
||||
fontSize: 14,
|
||||
},
|
||||
rate: {
|
||||
fontSize: 14,
|
||||
color: this.chartObj.color[2],
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: (params) => {
|
||||
var text = `{rate|${params.data}次}`; // `{{f|(params.data / total) * 100 + %}`;
|
||||
return text;
|
||||
},
|
||||
|
||||
rich: {
|
||||
a: {
|
||||
color: "#9CE0FF",
|
||||
fontSize: 16,
|
||||
align: "right",
|
||||
},
|
||||
},
|
||||
position: "right",
|
||||
distance: 1, // 向右偏移位置
|
||||
show: true,
|
||||
},
|
||||
data: yData,
|
||||
z: 0,
|
||||
animationEasing: "elasticOut",
|
||||
},
|
||||
{
|
||||
name: "外框",
|
||||
type: "pictorialBar",
|
||||
symbol: "rect",
|
||||
symbolBoundingData: maxValue,
|
||||
barGap: "-100%", // 设置外框粗细
|
||||
data: maxArr,
|
||||
barWidth: 6,
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0.06)", // 填充色
|
||||
label: {
|
||||
// 标签显示位置
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
z: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chartObj: {
|
||||
handler(newval) {
|
||||
this.setOption();
|
||||
},
|
||||
deep: true,
|
||||
// immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%" id="pieWrap">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
let point = this.chartObj.point; //环形图的具体 百分比
|
||||
let total = this.chartObj.total;
|
||||
|
||||
this.option = {
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
// 圆环中央文字
|
||||
show: false, // 是否显示
|
||||
},
|
||||
color: this.chartObj.color,
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: this.chartObj.icon,
|
||||
width: 80,
|
||||
height: 80,
|
||||
zIndex: 1,
|
||||
},
|
||||
left: 100,
|
||||
top: "center",
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: '访问来源1',
|
||||
type: "pie",
|
||||
radius: [30, 36],
|
||||
center: [140, "center"],
|
||||
data: [
|
||||
{
|
||||
value: 100, //对应显示的部分数据即100%
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderRadius: 15,
|
||||
color: "#1B2221",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
// name: '访问来源2',
|
||||
type: "pie",
|
||||
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
|
||||
radius: [30, 36],
|
||||
center: [140, "center"],
|
||||
avoidLabelOverlap: true, // 标签重叠时进行调整
|
||||
data: [
|
||||
{
|
||||
value: (point / total) * 100,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderRadius: 15, //圆角
|
||||
color: {
|
||||
// 设置渐变色
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: this.chartObj.color[1], // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: this.chartObj.color[2], // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
value: 120, //百分比
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255,255,255,0)", //透明
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
getHeight() {
|
||||
let div = document.getElementById("pieWrap");
|
||||
return div.clientHeight;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chartObj: {
|
||||
handler(newval) {
|
||||
this.setOption();
|
||||
},
|
||||
deep: true,
|
||||
// immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%" id="pieWrap">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
let point = this.chartObj.point; //环形图的具体 百分比
|
||||
let total = this.chartObj.total;
|
||||
|
||||
this.option = {
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
// 圆环中央文字
|
||||
show: true, // 是否显示
|
||||
text: this.chartObj.name,
|
||||
subtext: this.chartObj.point,
|
||||
textStyle: { fontSize: 12, lineHeight: 12, color: "#D0DEEE" },
|
||||
subtextStyle: {
|
||||
fontSize: 18,
|
||||
lineHeight: 10,
|
||||
color: "#F3FFF9",
|
||||
},
|
||||
textAlign: "center",
|
||||
left: "47%",
|
||||
top: 140,
|
||||
},
|
||||
color: this.chartObj.color,
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: this.chartObj.icon,
|
||||
width: 180,
|
||||
height: 180,
|
||||
zIndex: 1,
|
||||
},
|
||||
left: "center",
|
||||
top: -20,
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: '访问来源1',
|
||||
type: "pie",
|
||||
radius: [35, 45],
|
||||
center: ["center", 70],
|
||||
data: [
|
||||
{
|
||||
value: 100, //对应显示的部分数据即100%
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderRadius: 15,
|
||||
color: "#1B2221",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
label: {
|
||||
position: "center",
|
||||
formatter: ((100 * point) / total).toFixed(0) + "%",
|
||||
color: this.chartObj.color[0],
|
||||
fontSize: 18,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
// name: '访问来源2',
|
||||
type: "pie",
|
||||
showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
|
||||
radius: [35, 45],
|
||||
center: ["center", 70],
|
||||
avoidLabelOverlap: true, // 标签重叠时进行调整
|
||||
data: [
|
||||
{
|
||||
value: (point / total) * 100,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderRadius: 15, //圆角
|
||||
color: {
|
||||
// 设置渐变色
|
||||
type: "linear",
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: this.chartObj.color[1], // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: this.chartObj.color[2], // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
value: 120, //百分比
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255,255,255,0)", //透明
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
getHeight() {
|
||||
let div = document.getElementById("pieWrap");
|
||||
return div.clientHeight;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chartObj: {
|
||||
handler(newval) {
|
||||
this.setOption();
|
||||
},
|
||||
deep: true,
|
||||
// immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||