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

qianming 3 years ago
parent ddb11556ec
commit a2d04f30b7

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

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

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

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

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

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

Loading…
Cancel
Save