Foming
4 years ago
committed by
Gitee
commit
6eb3a7b717
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@ -0,0 +1,21 @@
|
|||||||
|
use aj_report_init;
|
||||||
|
CREATE TABLE if not exists `aj_report_comparestack` (
|
||||||
|
`id` int(11) NOT NULL AUTO_INCREMENT,
|
||||||
|
`time` date DEFAULT NULL,
|
||||||
|
`type` varchar(255) DEFAULT NULL,
|
||||||
|
`nums` bigint(11) DEFAULT NULL,
|
||||||
|
PRIMARY KEY (`id`)
|
||||||
|
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
|
||||||
|
|
||||||
|
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (1, '2021-08-23', '成功', 12);
|
||||||
|
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (2, '2021-08-23', '失败', 1);
|
||||||
|
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (3, '2021-08-24', '成功', 24);
|
||||||
|
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (4, '2021-08-24', '失败', 5);
|
||||||
|
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (5, '2021-08-25', '成功', 13);
|
||||||
|
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (6, '2021-08-25', '失败', 8);
|
||||||
|
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (7, '2021-08-26', '成功', 19);
|
||||||
|
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (8, '2021-08-26', '失败', 3);
|
||||||
|
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (9, '2021-08-27', '成功', 9);
|
||||||
|
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (10, '2021-08-27', '失败', 15);
|
||||||
|
|
||||||
|
INSERT INTO `aj_report`.`gaea_report_data_set`(`set_code`, `set_name`, `set_desc`, `source_code`, `dyn_sentence`, `case_result`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('compare_ajreport', '柱状对比图示例数据', '', 'mysql_ajreport', 'SELECT time,type,nums from aj_report_comparestack', '[{\"time\":\"2021-08-23\",\"type\":\"成功\",\"nums\":12},{\"time\":\"2021-08-23\",\"type\":\"失败\",\"nums\":1},{\"time\":\"2021-08-24\",\"type\":\"成功\",\"nums\":24},{\"time\":\"2021-08-24\",\"type\":\"失败\",\"nums\":5},{\"time\":\"2021-08-25\",\"type\":\"成功\",\"nums\":13},{\"time\":\"2021-08-25\",\"type\":\"失败\",\"nums\":8},{\"time\":\"2021-08-26\",\"type\":\"成功\",\"nums\":19},{\"time\":\"2021-08-26\",\"type\":\"失败\",\"nums\":3},{\"time\":\"2021-08-27\",\"type\":\"成功\",\"nums\":9},{\"time\":\"2021-08-27\",\"type\":\"失败\",\"nums\":15}]', 1, 0, 'admin', '2021-08-27 13:48:33', 'admin', '2021-08-27 13:48:33', 1);
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,620 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="styleObj">
|
||||||
|
<v-chart :options="options" autoresize/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "WidgetBarCompareChart",
|
||||||
|
//参考 https://www.makeapie.com/editor.html?c=xrJwcCF3NZ
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
value: Object,
|
||||||
|
ispreview: Boolean
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: {
|
||||||
|
title: {
|
||||||
|
//text: '柱状对比图',
|
||||||
|
x: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
//边距
|
||||||
|
grid: [
|
||||||
|
{//左
|
||||||
|
show: false,//边框线
|
||||||
|
left: '4%',
|
||||||
|
top: 60,
|
||||||
|
bottom: 10,
|
||||||
|
containLabel: true,
|
||||||
|
width: '40%'
|
||||||
|
},
|
||||||
|
{//中间字体位置
|
||||||
|
show: false,
|
||||||
|
left: '50.5%',
|
||||||
|
top: 60,
|
||||||
|
bottom: 25,
|
||||||
|
width: '0%'
|
||||||
|
},
|
||||||
|
{//右
|
||||||
|
show: false,
|
||||||
|
right: '4%',
|
||||||
|
top: 60,
|
||||||
|
bottom: 10,
|
||||||
|
containLabel: true,
|
||||||
|
width: '40%'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图例
|
||||||
|
legend: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
textAlign: 'center'
|
||||||
|
},
|
||||||
|
//itemGap:80,
|
||||||
|
//itemWidth: 0
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{// 左
|
||||||
|
splitNumber: 2,
|
||||||
|
type: 'value',
|
||||||
|
inverse: true,
|
||||||
|
axisLine: {//底分割线
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
position: 'bottom',
|
||||||
|
axisLabel: { // x轴
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: { // 竖分割线
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#57617f',
|
||||||
|
width: 1,
|
||||||
|
type: 'solid'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 1,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{// 右
|
||||||
|
gridIndex: 2,
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
position: 'bottom',
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#57617f',
|
||||||
|
width: 1,
|
||||||
|
type: 'solid',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
inverse: true,
|
||||||
|
position: 'right',
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
{//处理轴数据
|
||||||
|
gridIndex: 1,
|
||||||
|
type: 'category',
|
||||||
|
inverse: true,
|
||||||
|
position: 'left',
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
align: 'center',
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: 14,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 2,
|
||||||
|
type: 'category',
|
||||||
|
inverse: true,
|
||||||
|
position: 'left',
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 20,
|
||||||
|
barWidth: 15,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
color: 'red',
|
||||||
|
position: 'insideLeft',
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff',
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#36c5e7',
|
||||||
|
barBorderRadius: [8, 0, 0, 8],
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'bar',
|
||||||
|
barGap: 20,
|
||||||
|
barWidth: 15,
|
||||||
|
xAxisIndex: 2,
|
||||||
|
yAxisIndex: 2,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
color: 'red',
|
||||||
|
position: 'insideRight',
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#e68b55',
|
||||||
|
barBorderRadius: [0, 8, 8, 0],
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
optionsStyle: {},
|
||||||
|
optionsData: {},
|
||||||
|
optionsSetup: {},
|
||||||
|
flagInter: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
styleObj() {
|
||||||
|
return {
|
||||||
|
position: this.ispreview ? "absolute" : "static",
|
||||||
|
width: this.optionsStyle.width + "px",
|
||||||
|
height: this.optionsStyle.height + "px",
|
||||||
|
left: this.optionsStyle.left + "px",
|
||||||
|
top: this.optionsStyle.top + "px",
|
||||||
|
background: this.optionsSetup.background
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(val) {
|
||||||
|
this.optionsStyle = val.position;
|
||||||
|
this.optionsData = val.data;
|
||||||
|
this.optionsSetup = val.setup;
|
||||||
|
this.optionsSetup = val.setup;
|
||||||
|
this.editorOptions();
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.optionsStyle = this.value.position;
|
||||||
|
this.optionsData = this.value.data;
|
||||||
|
this.optionsCollapse = this.value.setup;
|
||||||
|
this.optionsSetup = this.value.setup;
|
||||||
|
this.editorOptions();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 修改图标options属性
|
||||||
|
editorOptions() {
|
||||||
|
this.setOptionsTitle();
|
||||||
|
this.setOptionsXLeft();
|
||||||
|
this.setOptionsXRight();
|
||||||
|
this.setOptionsY();
|
||||||
|
this.setOptionsTop();
|
||||||
|
this.setOptionsTooltip();
|
||||||
|
this.setOptionsGrid();
|
||||||
|
this.setOptionsLegend();
|
||||||
|
this.setOptionsColor();
|
||||||
|
this.setOptionsData();
|
||||||
|
},
|
||||||
|
// 标题修改
|
||||||
|
setOptionsTitle() {
|
||||||
|
const optionsCollapse = this.optionsSetup;
|
||||||
|
const title = {};
|
||||||
|
title.text = optionsCollapse.titleText;
|
||||||
|
title.show = optionsCollapse.isNoTitle;
|
||||||
|
title.left = optionsCollapse.textAlign;
|
||||||
|
title.textStyle = {
|
||||||
|
color: optionsCollapse.textColor,
|
||||||
|
fontSize: optionsCollapse.textFontSize,
|
||||||
|
fontWeight: optionsCollapse.textFontWeight
|
||||||
|
};
|
||||||
|
this.options.title = title;
|
||||||
|
},
|
||||||
|
// 左X轴设置
|
||||||
|
setOptionsXLeft() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const xAxisLeft = {
|
||||||
|
splitNumber: optionsSetup.splitNumberLeft,
|
||||||
|
type: 'value',
|
||||||
|
inverse: true,
|
||||||
|
axisLine: {//X轴线
|
||||||
|
show: optionsSetup.xLineLeft,
|
||||||
|
lineStyle: {
|
||||||
|
color: optionsSetup.lineColorXLeft,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: optionsSetup.tickLineLeft,
|
||||||
|
},
|
||||||
|
position: 'bottom',
|
||||||
|
axisLabel: { // x轴
|
||||||
|
show: optionsSetup.hideXLeft,
|
||||||
|
textStyle: {
|
||||||
|
color: optionsSetup.XcolorLeft,
|
||||||
|
fontSize: optionsSetup.fontSizeXLeft
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: { // 分割线
|
||||||
|
show: optionsSetup.SplitLineLeft,
|
||||||
|
lineStyle: {
|
||||||
|
color: optionsSetup.SplitLineColorLeft,
|
||||||
|
width: optionsSetup.SplitLinefontSizeLeft,
|
||||||
|
type: 'solid'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.options.xAxis[0] = xAxisLeft;
|
||||||
|
},
|
||||||
|
// 右X轴设置
|
||||||
|
setOptionsXRight() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const xAxisRight = {
|
||||||
|
gridIndex: 2,
|
||||||
|
splitNumber: optionsSetup.splitNumberRight,
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {//X轴线
|
||||||
|
show: optionsSetup.xLineRight,
|
||||||
|
lineStyle: {
|
||||||
|
color: optionsSetup.lineColorXRight,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: optionsSetup.tickLineRight,
|
||||||
|
},
|
||||||
|
position: 'bottom',
|
||||||
|
axisLabel: { // x轴
|
||||||
|
show: optionsSetup.hideXRight,
|
||||||
|
textStyle: {
|
||||||
|
color: optionsSetup.XcolorRight,
|
||||||
|
fontSize: optionsSetup.fontSizeXRight
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: { // 分割线
|
||||||
|
show: optionsSetup.SplitLineRight,
|
||||||
|
lineStyle: {
|
||||||
|
color: optionsSetup.SplitLineColorRight,
|
||||||
|
width: optionsSetup.SplitLinefontSizeRight,
|
||||||
|
type: 'solid'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.options.xAxis[2] = xAxisRight;
|
||||||
|
},
|
||||||
|
// Y轴设置
|
||||||
|
setOptionsY() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const axisLine = {
|
||||||
|
show: optionsSetup.lineY,
|
||||||
|
lineStyle: {
|
||||||
|
color: optionsSetup.lineColorY
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const axisTick = {
|
||||||
|
show: optionsSetup.tickLineY
|
||||||
|
};
|
||||||
|
const axisLabel = {
|
||||||
|
show: optionsSetup.hideY,
|
||||||
|
textStyle: {
|
||||||
|
align: optionsSetup.textAlign,
|
||||||
|
color: optionsSetup.colorY,
|
||||||
|
fontSize: optionsSetup.fontSizeY,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.options.yAxis[1]['axisLine'] = axisLine;
|
||||||
|
this.options.yAxis[1]['axisTick'] = axisTick;
|
||||||
|
this.options.yAxis[1]['axisLabel'] = axisLabel;
|
||||||
|
},
|
||||||
|
// 数值设定、柱体设置
|
||||||
|
setOptionsTop() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const series = this.options.series;
|
||||||
|
for (const key in series) {
|
||||||
|
if (series[key].type == "bar") {
|
||||||
|
series[0].label = {
|
||||||
|
normal: {
|
||||||
|
show: optionsSetup.isShow,
|
||||||
|
position: 'insideLeft',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: optionsSetup.fontSize,
|
||||||
|
color: optionsSetup.subTextColor,
|
||||||
|
fontWeight: optionsSetup.fontWeight
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series[1].label = {
|
||||||
|
normal: {
|
||||||
|
show: optionsSetup.isShow,
|
||||||
|
color: 'red',
|
||||||
|
position: 'insideRight',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: optionsSetup.fontSize,
|
||||||
|
color: optionsSetup.subTextColor,
|
||||||
|
fontWeight: optionsSetup.fontWeight
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series[key].barWidth = optionsSetup.maxWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.options.series = series;
|
||||||
|
},
|
||||||
|
// tooltip 提示语设置
|
||||||
|
setOptionsTooltip() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const tooltip = {
|
||||||
|
trigger: "item",
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: optionsSetup.lineColor,
|
||||||
|
fontSize: optionsSetup.fontSize
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.options.tooltip = tooltip;
|
||||||
|
},
|
||||||
|
// 边距设置
|
||||||
|
getOptionsBottom(){
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
let bottom = optionsSetup.marginBottom;
|
||||||
|
if (optionsSetup.hideXLeft) {
|
||||||
|
bottom = optionsSetup.marginBottom + 15
|
||||||
|
}else if (optionsSetup.hideXRight){
|
||||||
|
bottom = optionsSetup.marginBottom + 15
|
||||||
|
}
|
||||||
|
return bottom
|
||||||
|
},
|
||||||
|
setOptionsGrid() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const grid = [
|
||||||
|
{//左
|
||||||
|
show: optionsSetup.frameLineLeft,
|
||||||
|
left: optionsSetup.marginLeftRight,
|
||||||
|
top: optionsSetup.marginTop,
|
||||||
|
bottom: optionsSetup.marginBottom,
|
||||||
|
containLabel: true,
|
||||||
|
width: '40%'
|
||||||
|
},
|
||||||
|
{//中间字体位置
|
||||||
|
show: false,
|
||||||
|
left: "51%",
|
||||||
|
top: optionsSetup.marginTop,
|
||||||
|
bottom: this.getOptionsBottom(),
|
||||||
|
width: '0%'
|
||||||
|
},
|
||||||
|
{//右
|
||||||
|
show: optionsSetup.frameLineRight,
|
||||||
|
right: optionsSetup.marginLeftRight,
|
||||||
|
top: optionsSetup.marginTop,
|
||||||
|
bottom: optionsSetup.marginBottom,
|
||||||
|
containLabel: true,
|
||||||
|
width: '40%'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
this.options.grid = grid;
|
||||||
|
},
|
||||||
|
// 图例操作
|
||||||
|
setOptionsLegend() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const legend = this.options.legend;
|
||||||
|
legend.show = optionsSetup.isShowLegend;
|
||||||
|
legend.left = optionsSetup.lateralPosition;
|
||||||
|
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
|
||||||
|
legend.bottom =
|
||||||
|
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
|
||||||
|
legend.orient = optionsSetup.layoutFront;
|
||||||
|
legend.textStyle = {
|
||||||
|
color: optionsSetup.lengedColor,
|
||||||
|
fontSize: optionsSetup.lengedFontSize
|
||||||
|
};
|
||||||
|
legend.itemWidth = optionsSetup.lengedWidth;
|
||||||
|
},
|
||||||
|
// 颜色修改、圆角修改
|
||||||
|
setOptionsColor() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const customColor = optionsSetup.customColor;
|
||||||
|
if (!customColor) return;
|
||||||
|
const itemStyleLeft = {
|
||||||
|
normal: {
|
||||||
|
color: customColor[0].color,
|
||||||
|
barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius]
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
const itemStyleRight = {
|
||||||
|
normal: {
|
||||||
|
color: customColor[1].color,
|
||||||
|
barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0]
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
this.options.series[0].itemStyle = itemStyleLeft;
|
||||||
|
this.options.series[1].itemStyle = itemStyleRight;
|
||||||
|
},
|
||||||
|
// 数据解析
|
||||||
|
setOptionsData() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const optionsData = this.optionsData; // 数据类型 静态 or 动态
|
||||||
|
optionsData.dataType == "staticData"
|
||||||
|
? this.staticDataFn(optionsData.staticData, optionsSetup)
|
||||||
|
: this.dynamicDataFn(
|
||||||
|
optionsData.dynamicData,
|
||||||
|
optionsData.refreshTime,
|
||||||
|
optionsSetup
|
||||||
|
);
|
||||||
|
},
|
||||||
|
//去重
|
||||||
|
setUnique(arr) {
|
||||||
|
let newArr = [];
|
||||||
|
arr.forEach(item => {
|
||||||
|
return newArr.includes(item) ? '' : newArr.push(item);
|
||||||
|
});
|
||||||
|
return newArr;
|
||||||
|
},
|
||||||
|
//静态数据
|
||||||
|
staticDataFn(val) {
|
||||||
|
//数据
|
||||||
|
let xAxisList = [];
|
||||||
|
let yAxisList = [];
|
||||||
|
let arrayList = [];
|
||||||
|
for (const i in val) {
|
||||||
|
xAxisList[i] = val[i].axis
|
||||||
|
yAxisList[i] = val[i].name
|
||||||
|
}
|
||||||
|
xAxisList = this.setUnique(xAxisList)
|
||||||
|
yAxisList = this.setUnique(yAxisList)
|
||||||
|
for (const i in yAxisList) {
|
||||||
|
const data = new Array(yAxisList.length).fill(0)
|
||||||
|
for (const j in xAxisList) {
|
||||||
|
for (const k in val) {
|
||||||
|
if (val[k].name == yAxisList[i]) {
|
||||||
|
if (val[k].axis == xAxisList[j]) {
|
||||||
|
data[j] = val[k].data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
arrayList.push({
|
||||||
|
name: yAxisList[i],
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.options.series[0]['name'] = arrayList[0].name
|
||||||
|
this.options.series[0]['data'] = arrayList[0].data
|
||||||
|
this.options.series[1]['name'] = arrayList[1].name
|
||||||
|
this.options.series[1]['data'] = arrayList[1].data
|
||||||
|
this.options.yAxis[1]['data'] = xAxisList
|
||||||
|
},
|
||||||
|
// 动态数据
|
||||||
|
dynamicDataFn(val, refreshTime, optionsSetup) {
|
||||||
|
if (!val) return;
|
||||||
|
if (this.ispreview) {
|
||||||
|
this.getEchartData(val, optionsSetup);
|
||||||
|
this.flagInter = setInterval(() => {
|
||||||
|
this.getEchartData(val, optionsSetup);
|
||||||
|
}, refreshTime);
|
||||||
|
} else {
|
||||||
|
this.getEchartData(val, optionsSetup);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getEchartData(val, optionsSetup) {
|
||||||
|
const data = this.queryEchartsData(val);
|
||||||
|
data.then(res => {
|
||||||
|
this.renderingFn(optionsSetup, res);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
renderingFn(optionsSetup, val) {
|
||||||
|
this.options.yAxis[1]['data'] = val.xAxis
|
||||||
|
if (val.series[0].type == "bar"){
|
||||||
|
this.options.series[0]['name'] = val.series[0].name
|
||||||
|
this.options.series[0]['data'] = val.series[0].data
|
||||||
|
this.options.series[1]['name'] = val.series[1].name
|
||||||
|
this.options.series[1]['data'] = val.series[1].data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.echarts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Binary file not shown.
Loading…
Reference in New Issue