柱体在竖显示下,数值显示和渐变色调整

qianming 3 years ago
parent ddb11556ec
commit a2d04f30b7

@ -111,7 +111,7 @@ export const widgetBarchart = {
},
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
@ -162,7 +162,7 @@ export const widgetBarchart = {
},
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
@ -203,7 +203,7 @@ export const widgetBarchart = {
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 12
value: 14
},
{
type: 'vue-color',
@ -219,7 +219,7 @@ export const widgetBarchart = {
name: 'fontSizeX',
required: false,
placeholder: '',
value: 12,
value: 14,
},
{
type: 'el-slider',
@ -389,11 +389,19 @@ export const widgetBarchart = {
name: 'isShow',
required: false,
placeholder: '',
value: false
value: true
},
{
type: 'el-input-number',
label: '字体大小',
label: '距离',
name: 'distance',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',
@ -428,17 +436,17 @@ export const widgetBarchart = {
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
label: '字体字号',
name: 'tipFontSize',
required: false,
placeholder: '',
placeholder: 16,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
placeholder: '#ff7f50',
},
],
},
@ -497,7 +505,7 @@ export const widgetBarchart = {
},
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'lengedFontSize',
required: false,
placeholder: '',

@ -433,13 +433,115 @@ export const widgetBarlinechart = {
},
],
},
{
name: '折线数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeLine',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorLine',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightLine',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '柱体数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowBar',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeBar',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorBar',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightBar',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
name: 'tipFontSize',
required: false,
placeholder: '',
value: 12
@ -450,7 +552,7 @@ export const widgetBarlinechart = {
name: 'lineColor',
required: false,
placeholder: '',
value: '#fff'
value: '#e68b55'
},
],
},

@ -58,14 +58,6 @@ export const widgetGradientBarchart = {
placeholder: '',
value: 5,
},
/* {
type: 'el-slider',
label: '最小高度',
name: 'minHeight',
require: false,
placeholder: '',
value: 0,
},*/
],
},
{
@ -388,7 +380,15 @@ export const widgetGradientBarchart = {
name: 'isShow',
required: false,
placeholder: '',
value: false
value: true
},
{
type: 'el-input-number',
label: '距离',
name: 'distance',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
@ -438,7 +438,7 @@ export const widgetGradientBarchart = {
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
placeholder: '#ff7f50',
},
],
},
@ -485,7 +485,7 @@ export const widgetGradientBarchart = {
name: 'bar0color',
required: false,
placeholder: '',
value: '#00F4FF'
value: 'rgba(0,244,255,1)'
},
{
type: 'vue-color',
@ -493,7 +493,7 @@ export const widgetGradientBarchart = {
name: 'bar100color',
required: false,
placeholder: '',
value: '#004DA7'
value: 'rgba(0,77,167,1)'
},
{
type: 'vue-color',
@ -501,7 +501,7 @@ export const widgetGradientBarchart = {
name: 'shadowColor',
required: false,
placeholder: '',
value: '#00A0DD'
value: 'rgba(0,160,221,1)'
},
{
type: 'el-input-number',

@ -1,11 +1,12 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "WidgetGradientColorBarchart", //https://www.makeapie.com/editor.html?c=x0oZWoncE
components: {},
@ -16,9 +17,8 @@ export default {
data() {
return {
options: {
// backgroundColor: '#00265f',
title: {
text: "政策补贴额度",
text: "",
x: "center",
y: "4%",
textStyle: {
@ -49,14 +49,7 @@ export default {
},
xAxis: {
type: "category",
data: [
"制造业",
"建筑业",
"农林牧渔",
"房地产",
"金融业",
"居民服务及其他"
],
data: [],
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.12)"
@ -71,7 +64,7 @@ export default {
}
},
yAxis: {
name: "单位:万元",
name: "",
axisLabel: {
formatter: "{value}",
color: "#e2e9ff"
@ -95,11 +88,7 @@ export default {
barWidth: "20px",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{
offset: 0,
@ -184,57 +173,57 @@ export default {
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsCollapse.subText;
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
this.options.title = title;
},
// X
setOptionsX() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsCollapse.hideX, //
name: optionsCollapse.xName, //
show: optionsSetup.hideX, //
name: optionsSetup.xName, //
nameTextStyle: {
color: optionsCollapse.nameColorX,
fontSize: optionsCollapse.nameFontSizeX
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
nameRotate: optionsCollapse.textAngle, //
inverse: optionsCollapse.reversalX, //
nameRotate: optionsSetup.textAngle, //
inverse: optionsSetup.reversalX, //
axisLabel: {
show: true,
interval: optionsCollapse.textInterval, //
rotate: optionsCollapse.textAngle, //
interval: optionsSetup.textInterval, //
rotate: optionsSetup.textAngle, //
textStyle: {
color: optionsCollapse.Xcolor, // x
fontSize: optionsCollapse.fontSizeX
color: optionsSetup.Xcolor, // x
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorX
color: optionsSetup.lineColorX
}
},
splitLine: {
show: optionsCollapse.isShowSplitLineX,
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsCollapse.splitLineColorX
color: optionsSetup.splitLineColorX
}
}
};
@ -242,36 +231,36 @@ export default {
},
// Y
setOptionsY() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const yAxis = {
type: "value",
scale : optionsCollapse.scale,
splitNumber: optionsCollapse.splitNumber,//
show: optionsCollapse.isShowY, //
name: optionsCollapse.textNameY, //
scale: optionsSetup.scale,
splitNumber: optionsSetup.splitNumber,//
show: optionsSetup.isShowY, //
name: optionsSetup.textNameY, //
nameTextStyle: { //
color: optionsCollapse.nameColorY,
fontSize: optionsCollapse.namefontSizeY
color: optionsSetup.nameColorY,
fontSize: optionsSetup.namefontSizeY
},
inverse: optionsCollapse.reversalY, //
inverse: optionsSetup.reversalY, //
axisLabel: {
show: true,
rotate: optionsCollapse.ytextAngle, //
rotate: optionsSetup.ytextAngle, //
textStyle: {
color: optionsCollapse.colorY, // y
fontSize: optionsCollapse.fontSizeY
color: optionsSetup.colorY, // y
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorY
color: optionsSetup.lineColorY
}
},
splitLine: {
show: optionsCollapse.isShowSplitLineY,
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsCollapse.splitLineColorY
color: optionsSetup.splitLineColorY
}
}
};
@ -279,91 +268,115 @@ export default {
},
// or
setOptionsTop() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "bar") {
series[key].label = {
show: optionsCollapse.isShow,
if (series[0].type == "bar") {
if (optionsSetup.verticalShow) {
series[0].label = {
show: optionsSetup.isShow,
position: "right",
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
}
} else {
series[0].label = {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsCollapse.fontSize,
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.fontWeight
};
series[key].barWidth = optionsCollapse.maxWidth;
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
}
}
series[0].barWidth = optionsSetup.maxWidth;
}
this.options.series = series;
},
// tooltip
setOptionsTooltip() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsCollapse.lineColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
}
};
this.options.tooltip = tooltip;
},
//
setOptionsMargin() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop,
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true
};
this.options.grid = grid;
},
// legend
setOptionsLegend() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend;
legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsCollapse.layoutFront;
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.lengedColor,
fontSize: optionsSetup.fontSize
};
legend.itemWidth = optionsCollapse.lengedWidth;
legend.itemWidth = optionsSetup.lengedWidth;
},
//
setOptionsColor() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const itemStyle = this.options.series[0]["itemStyle"];
const normal = {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: optionsCollapse.bar0color // 0%
},
{
offset: 1,
color: optionsCollapse.bar100color // 100%
}
],
false
),
barBorderRadius: optionsCollapse.radius, //
shadowColor: optionsCollapse.shadowColor, //
shadowBlur: optionsCollapse.shadowBlur //
};
let normal = {}
if (optionsSetup.verticalShow) {
normal = {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0,
[
{
offset: 0,
color: optionsSetup.bar0color // 0%
},
{
offset: 1,
color: optionsSetup.bar100color // 100%
}
],
),
barBorderRadius: optionsSetup.radius, //
shadowColor: optionsSetup.shadowColor, //
shadowBlur: optionsSetup.shadowBlur //
}
} else {
normal = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{
offset: 0,
color: optionsSetup.bar0color // 0%
},
{
offset: 1,
color: optionsSetup.bar100color // 100%
}
],
),
barBorderRadius: optionsSetup.radius, //
shadowColor: optionsSetup.shadowColor, //
shadowBlur: optionsSetup.shadowBlur //
}
}
itemStyle["normal"] = normal;
},
//
@ -373,10 +386,10 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
},
//
staticDataFn(val, optionsSetup) {
@ -395,10 +408,8 @@ export default {
}
// series
const series = this.options.series;
for (const i in series) {
if (series[i].type == "bar") {
series[i].data = staticData.series[0].data;
}
if (series[0].type == "bar") {
series[0].data = staticData.series[0].data;
}
},
//

@ -5,9 +5,7 @@
</template>
<script>
/*import echarts from "echarts";
var myChart = echarts.init(this.$refs.myChart)*/
var per = 60 ;
var per = 60;
export default {
name: "widgetPiePercentageChart",//https://www.makeapie.com/editor.html?c=xFkzKG-bpl
components: {},
@ -19,7 +17,6 @@ export default {
return {
angle: 0,
options: {
//backgroundColor: '#061740',
title: {
text: '{nums|' + per + '}{percent|%}',
x: 'center',
@ -341,10 +338,10 @@ export default {
this.editorOptions();
},
mounted() {
/* setInterval(() => {
this.angle = this.angle + 3
myChart.setOption(options,true)
}, 1000);*/
/* setInterval(() => {
this.angle = this.angle + 3
myChart.setOption(options,true)
}, 1000);*/
},
methods: {
//point
@ -358,8 +355,6 @@ export default {
},
editorOptions() {
this.setOptionsTitle();
//this.setOptionsTooltip();
//this.setOptionsLegend();
this.setOptionsColor();
this.setOptionsData();
this.setOptionLine();
@ -419,11 +414,11 @@ export default {
};
itemStyle['normal'] = normal
},
setOptionSurplusColor(){
setOptionSurplusColor() {
const itemStyle = this.options.series[6]['data'][1]['itemStyle']
const normal = {
color: this.optionsSetup.colorsurplus,
};
color: this.optionsSetup.colorsurplus,
};
itemStyle['normal'] = normal
},
setOptionLine() {
@ -451,8 +446,8 @@ export default {
staticDataFn(val) {
const title = this.options.title;
title.text = '{nums|' + val + '}{percent|%}';
this.options.series[6]['data'][0]['value'] = val ;
this.options.series[6]['data'][1]['value'] = 100 - val ;
this.options.series[6]['data'][0]['value'] = val;
this.options.series[6]['data'][1]['value'] = 100 - val;
},
dynamicDataFn(val, refreshTime) {
if (!val) return;

@ -1,6 +1,6 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart :options="options" autoresize/>
</div>
</template>
@ -104,57 +104,57 @@ export default {
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsCollapse.subText;
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
this.options.title = title;
},
// X
setOptionsX() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsCollapse.hideX, //
name: optionsCollapse.xName, //
show: optionsSetup.hideX, //
name: optionsSetup.xName, //
nameTextStyle: {
color: optionsCollapse.xNameColor,
fontSize: optionsCollapse.xNameFontSize
color: optionsSetup.xNameColor,
fontSize: optionsSetup.xNameFontSize
},
nameRotate: optionsCollapse.textAngle, //
inverse: optionsCollapse.reversalX, //
nameRotate: optionsSetup.textAngle, //
inverse: optionsSetup.reversalX, //
axisLabel: {
show: true,
interval: optionsCollapse.textInterval, //
rotate: optionsCollapse.textAngle, //
interval: optionsSetup.textInterval, //
rotate: optionsSetup.textAngle, //
textStyle: {
color: optionsCollapse.Xcolor, // x
fontSize: optionsCollapse.fontSizeX
color: optionsSetup.Xcolor, // x
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorX
color: optionsSetup.lineColorX
}
},
splitLine: {
show: optionsCollapse.isShowSplitLineX,
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsCollapse.splitLineColorX
color: optionsSetup.splitLineColorX
}
}
};
@ -162,36 +162,36 @@ export default {
},
// Y
setOptionsY() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const yAxis = {
type: "value",
scale : optionsCollapse.scale,
splitNumber: optionsCollapse.splitNumber,//
show: optionsCollapse.isShowY, //
name: optionsCollapse.textNameY, //
scale: optionsSetup.scale,
splitNumber: optionsSetup.splitNumber,//
show: optionsSetup.isShowY, //
name: optionsSetup.textNameY, //
nameTextStyle: {
color: optionsCollapse.nameColorY,
fontSize: optionsCollapse.nameFontSizeY
color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY
},
inverse: optionsCollapse.reversalY, //
inverse: optionsSetup.reversalY, //
axisLabel: {
show: true,
rotate: optionsCollapse.ytextAngle, //
rotate: optionsSetup.ytextAngle, //
textStyle: {
color: optionsCollapse.colorY, // x
fontSize: optionsCollapse.fontSizeY
color: optionsSetup.colorY, // x
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorY
color: optionsSetup.lineColorY
}
},
splitLine: {
show: optionsCollapse.isShowSplitLineY,
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsCollapse.splitLineColorY
color: optionsSetup.splitLineColorY
}
}
};
@ -200,71 +200,80 @@ export default {
},
// or
setOptionsTop() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "bar") {
series[key].label = {
show: optionsCollapse.isShow,
if (series[0].type == "bar") {
if (optionsSetup.verticalShow) {
series[0].label = {
show: optionsSetup.isShow,
position: 'right',
distance: optionsSetup.distance,
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
}
}
} else {
series[0].label = {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsCollapse.fontSize,
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.fontWeight
};
series[key].barWidth = optionsCollapse.maxWidth;
series[key].barMinHeight = optionsCollapse.minHeight;
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
}
}
}
this.options.series = series;
series[0].barWidth = optionsSetup.maxWidth;
series[0].barMinHeight = optionsSetup.minHeight;
},
// tooltip
setOptionsTooltip() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsCollapse.lineColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipFontSize
}
};
this.options.tooltip = tooltip;
},
//
setOptionsMargin() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop,
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true
};
this.options.grid = grid;
},
// legend
setOptionsLegend() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend;
legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsCollapse.layoutFront;
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.lengedColor,
fontSize: optionsSetup.fontSize
};
legend.itemWidth = optionsCollapse.lengedWidth;
legend.itemWidth = optionsSetup.lengedWidth;
},
//
setOptionsColor() {
const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.customColor;
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
@ -275,7 +284,7 @@ export default {
color: params => {
return arrColor[params.dataIndex];
},
barBorderRadius: optionsCollapse.radius
barBorderRadius: optionsSetup.radius
}
};
for (const key in this.options.series) {
@ -292,10 +301,10 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
},
//
staticDataFn(val, optionsSetup) {
@ -314,10 +323,8 @@ export default {
}
// series
const series = this.options.series;
for (const i in series) {
if (series[i].type == "bar") {
series[i].data = staticData.series[0].data;
}
if (series[0].type == "bar") {
series[0].data = staticData.series[0].data;
}
},
//
@ -351,7 +358,6 @@ export default {
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
// series
const series = this.options.series;
for (const i in series) {

@ -1,6 +1,6 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart :options="options" autoresize/>
</div>
</template>
@ -261,7 +261,7 @@ export default {
];
this.options.yAxis = yAxis;
},
// 线
// 线
setOptionsTop() {
const optionsCollapse = this.optionsSetup;
const series = this.options.series;
@ -284,29 +284,30 @@ export default {
};
series[key].itemStyle.borderRadius = optionsCollapse.radius;
series[key].label = {
show: optionsCollapse.isShow,
show: optionsCollapse.isShowLine,
position: "top",
distance: 10,
fontSize: optionsCollapse.fontSize,
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.fontWeight
distance: optionsCollapse.distanceLine,
fontSize: optionsCollapse.fontSizeLine,
color: optionsCollapse.subTextColorLine,
fontWeight: optionsCollapse.fontWeightLine
};
}
}
this.options.series = series;
},
//
setOptionsBar() {
const optionsCollapse = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "bar") {
series[key].label = {
show: optionsCollapse.isShow,
show: optionsCollapse.isShowBar,
position: "top",
distance: 10,
fontSize: optionsCollapse.fontSize,
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.fontWeight
distance: optionsCollapse.distanceBar,
fontSize: optionsCollapse.fontSizeBar,
color: optionsCollapse.subTextColorBar,
fontWeight: optionsCollapse.fontWeightBar
};
series[key].barWidth = optionsCollapse.maxWidth;
series[key].barMinHeight = optionsCollapse.minHeight;
@ -323,7 +324,7 @@ export default {
show: true,
textStyle: {
color: optionsCollapse.lineColor,
fontSize: optionsCollapse.fontSize
fontSize: optionsCollapse.tipFontSize
}
};
this.options.tooltip = tooltip;

Loading…
Cancel
Save