qianming 3 years ago
parent e8a86fe649
commit dd07f598c6

@ -48,7 +48,7 @@ export const widgetLineCompare = {
name: 'pointSize',
required: false,
placeholder: '',
value: 10,
value: 5,
},
{
type: 'el-switch',
@ -80,7 +80,7 @@ export const widgetLineCompare = {
name: 'lineWidth',
required: false,
placeholder: '',
value: 4,
value: 2,
},
],
},
@ -281,7 +281,7 @@ export const widgetLineCompare = {
name: 'scaleYTop',
required: false,
placeholder: '',
value: true,
value: false,
},
{
type: 'el-input-number',
@ -397,7 +397,7 @@ export const widgetLineCompare = {
name: 'scaleYBottom',
required: false,
placeholder: '',
value: true,
value: false,
},
{
type: 'el-input-number',
@ -520,19 +520,31 @@ export const widgetLineCompare = {
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'tipsFontSize',
type: 'el-switch',
label: '显示',
name: 'tipShow',
required: false,
placeholder: '',
value: 16
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
type: 'el-select',
label: '类型',
name: 'tipType',
required: false,
placeholder: '',
selectOptions: [
{code: 'line', name: '线形'},
{code: 'cross', name: '十字形'},
],
value: 'line'
},
{
type: 'vue-color',
label: '颜色',
name: 'tipColor',
required: false,
placeholder: '#e68b55',
},
],
},

@ -1,6 +1,6 @@
/*
* @Descripttion: 折线堆叠图 json
* @version:
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:38:17
* @LastEditors: qianlishi
@ -56,7 +56,7 @@ export const widgetLineStack = {
name: 'pointSize',
required: false,
placeholder: '',
value: 10,
value: 5,
},
{
type: 'el-switch',
@ -669,4 +669,4 @@ export const widgetLineStack = {
},
],
}
}
}

@ -33,18 +33,18 @@ export default {
axisPointer: {
type: 'line',
lineStyle: {
color: 'ffffff',
color: '#ffffff',
type: 'dashed',
},
},
/*axisPointer: {
type: 'cross',
lineStyle: {
color: 'ffffff',
color: '#ffffff',
type: 'dashed',
},
crossStyle: {
color: 'ffffff',
color: '#ffffff',
}
},*/
},
@ -182,6 +182,9 @@ export default {
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
showSymbol: true,//
symbol: 'circle',
symbolSize: 5,
smooth: true, // 线线
itemStyle: {
color: '#36c5e7',
@ -190,7 +193,7 @@ export default {
color: '#36c5e7',
width: 2,
},
label: {
label: { //
position: 'top',
distance: 10,
show: true,
@ -204,6 +207,9 @@ export default {
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
showSymbol: true,//
symbol: 'circle',
symbolSize: 5,
smooth: true, // 线线
itemStyle: {
color: '#e68b55',
@ -212,7 +218,7 @@ export default {
color: '#e68b55',
width: 2,
},
label: {
label: {//
position: 'bottom',
distance: 10,
show: true,
@ -267,11 +273,11 @@ export default {
this.setOptionsX();
this.setOptionsYTop();
this.setOptionsYBottom();
// this.setOptionsTop();
// this.setOptionsTooltip();
this.setOptionsTop();
this.setOptionsTooltip();
this.setOptionsGrid();
// this.setOptionsLegend();
// this.setOptionsColor();
this.setOptionsLegend();
this.setOptionsColor();
this.setOptionsData();
},
//
@ -427,57 +433,77 @@ export default {
}
this.options.yAxis[1] = yAxis
},
//
// 线
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
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;
series[key].showSymbol = optionsSetup.markPoint
series[key].symbolSize = optionsSetup.pointSize
series[key].smooth = optionsSetup.smoothCurve
if (optionsSetup.area) {
series[key].areaStyle = {
opacity: optionsSetup.areaThickness / 100
}
} else {
series[key].areaStyle = {
opacity: 0
}
}
}
//
if (series[0].type == 'line') {
series[0].label = {
position: 'top',
distance: 10,
show: optionsSetup.isShow,
color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight
}
series[1].label = {
position: 'bottom',
distance: 10,
show: optionsSetup.isShow,
color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight
}
}
this.options.series = series;
},
// tooltip
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
let tooltip = {}
if (optionsSetup.tipType == "line") {
tooltip = {
show: optionsSetup.tipShow,
trigger: 'axis',
axisPointer: {
type: optionsSetup.tipType,
lineStyle: {
color: optionsSetup.tipColor,
type: 'dashed',
},
},
}
};
} else {
tooltip = {
show: optionsSetup.tipShow,
trigger: 'axis',
axisPointer: {
type: optionsSetup.tipType,
lineStyle: {
color: optionsSetup.tipColor,
type: 'dashed',
},
crossStyle: {
color: optionsSetup.tipColor,
}
},
}
}
this.options.tooltip = tooltip;
},
//
@ -517,31 +543,27 @@ export default {
};
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 series = this.options.series
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
const itemStyleRight = {
normal: {
color: customColor[1].color,
barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0]
},
emphasis: {
show: false,
},
if (!customColor) return;
for (const key in series) {
const itemStyle = {
color: arrColor[key],
}
const lineStyle = {
color: arrColor[key],
width: optionsSetup.lineWidth,
}
this.options.series[key].itemStyle = itemStyle
this.options.series[key].lineStyle = lineStyle
}
this.options.series[0].itemStyle = itemStyleLeft;
this.options.series[1].itemStyle = itemStyleRight;
},
//
setOptionsData() {

@ -319,7 +319,6 @@ export default {
symbol: 'circle',
showSymbol: optionsSetup.markPoint,
symbolSize: optionsSetup.pointSize,
symbolColor: arrColor[i],
smooth: optionsSetup.smoothCurve,
// 线
lineStyle: {

@ -277,7 +277,6 @@ export default {
fontSize: optionsCollapse.fontSize
};
legend.itemWidth = optionsCollapse.lengedWidth;
console.log(legend);
},
//
setOptionsColor() {

Loading…
Cancel
Save