|
@@ -21,7 +21,6 @@ export default {
|
|
data: {
|
|
data: {
|
|
type: Array,
|
|
type: Array,
|
|
default: () => [
|
|
default: () => [
|
|
-
|
|
|
|
{
|
|
{
|
|
title: "女",
|
|
title: "女",
|
|
value: [
|
|
value: [
|
|
@@ -278,18 +277,18 @@ export default {
|
|
},
|
|
},
|
|
xTitle: {
|
|
xTitle: {
|
|
type: String,
|
|
type: String,
|
|
- default: "x轴标题",
|
|
|
|
|
|
+ default: "电压",
|
|
},
|
|
},
|
|
yTitle: {
|
|
yTitle: {
|
|
type: String,
|
|
type: String,
|
|
- default: "Y轴标题",
|
|
|
|
|
|
+ default: "效率离散率",
|
|
},
|
|
},
|
|
showLegend: {
|
|
showLegend: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
default: true,
|
|
default: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- data () {
|
|
|
|
|
|
+ data() {
|
|
return {
|
|
return {
|
|
id: "",
|
|
id: "",
|
|
chart: null,
|
|
chart: null,
|
|
@@ -297,7 +296,7 @@ export default {
|
|
};
|
|
};
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- series () {
|
|
|
|
|
|
+ series() {
|
|
let result = [];
|
|
let result = [];
|
|
this.data.forEach((element, index) => {
|
|
this.data.forEach((element, index) => {
|
|
result.push({
|
|
result.push({
|
|
@@ -307,6 +306,10 @@ export default {
|
|
focus: "series",
|
|
focus: "series",
|
|
},
|
|
},
|
|
data: element.value,
|
|
data: element.value,
|
|
|
|
+ symbolSize: 3,
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: "#216de8",
|
|
|
|
+ },
|
|
});
|
|
});
|
|
});
|
|
});
|
|
return result;
|
|
return result;
|
|
@@ -344,14 +347,16 @@ export default {
|
|
fontSize: util.vh(16),
|
|
fontSize: util.vh(16),
|
|
color: "#fff",
|
|
color: "#fff",
|
|
},
|
|
},
|
|
- formatter: function(params) {
|
|
|
|
|
|
+ formatter: function (params) {
|
|
if (params.componentType == "markLine") {
|
|
if (params.componentType == "markLine") {
|
|
return params.name + "<br />" + params.value;
|
|
return params.name + "<br />" + params.value;
|
|
}
|
|
}
|
|
|
|
|
|
var msg = params.seriesName + "<br />";
|
|
var msg = params.seriesName + "<br />";
|
|
- msg += params.marker + that.xTitle + ":" + params.value[0] + "<br />";
|
|
|
|
- msg += params.marker + that.yTitle + ":" + params.value[1] + "<br />";
|
|
|
|
|
|
+ msg +=
|
|
|
|
+ params.marker + that.xTitle + ":" + params.value[0] + "<br />";
|
|
|
|
+ msg +=
|
|
|
|
+ params.marker + that.yTitle + ":" + params.value[1] + "<br />";
|
|
return msg;
|
|
return msg;
|
|
},
|
|
},
|
|
axisPointer: {
|
|
axisPointer: {
|
|
@@ -383,15 +388,22 @@ export default {
|
|
scale: true,
|
|
scale: true,
|
|
axisLabel: {
|
|
axisLabel: {
|
|
formatter: "{value}",
|
|
formatter: "{value}",
|
|
|
|
+ color: "#b3b3b3",
|
|
},
|
|
},
|
|
splitLine: {
|
|
splitLine: {
|
|
show: false,
|
|
show: false,
|
|
},
|
|
},
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: "#b3b3b3",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
},
|
|
},
|
|
],
|
|
],
|
|
// xAxis: {
|
|
// xAxis: {
|
|
// show: true, // 是否显示 x 轴
|
|
// show: true, // 是否显示 x 轴
|
|
- // position: 'top', // x 轴的位置('top','bottom')
|
|
|
|
|
|
+ // position: 'top', // x 轴的位置('top','bottom')
|
|
// name: "ceshia",
|
|
// name: "ceshia",
|
|
// type: 'value', // 坐标轴类型
|
|
// type: 'value', // 坐标轴类型
|
|
// // nameRotate: 90, // 坐标轴名字旋转,角度值
|
|
// // nameRotate: 90, // 坐标轴名字旋转,角度值
|
|
@@ -426,7 +438,7 @@ export default {
|
|
// // margin: 10, // 刻度标签与轴线之间的距离
|
|
// // margin: 10, // 刻度标签与轴线之间的距离
|
|
// // // formatter 刻度标签的内容格式器,支持字符串模板和回调函数两种形式
|
|
// // // formatter 刻度标签的内容格式器,支持字符串模板和回调函数两种形式
|
|
// // color: '#FFF', // 刻度标签文字的颜色
|
|
// // color: '#FFF', // 刻度标签文字的颜色
|
|
- // // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
|
|
|
|
|
|
+ // // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
|
|
// // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
|
|
// // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
|
|
// // fontSize: '20', // 文字字体大小
|
|
// // fontSize: '20', // 文字字体大小
|
|
// // align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
|
|
// // align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
|
|
@@ -452,7 +464,7 @@ export default {
|
|
// // data: {
|
|
// // data: {
|
|
// // textStyle: {
|
|
// // textStyle: {
|
|
// // color: '#FFF', // 文字的颜色
|
|
// // color: '#FFF', // 文字的颜色
|
|
- // // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
|
|
|
|
|
|
+ // // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
|
|
// // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
|
|
// // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
|
|
// // fontSize: '20', // 文字字体大小
|
|
// // fontSize: '20', // 文字字体大小
|
|
// // align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
|
|
// // align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
|
|
@@ -469,6 +481,13 @@ export default {
|
|
scale: true,
|
|
scale: true,
|
|
axisLabel: {
|
|
axisLabel: {
|
|
formatter: "{value}",
|
|
formatter: "{value}",
|
|
|
|
+ color: "#b3b3b3",
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: "#b3b3b3",
|
|
|
|
+ },
|
|
},
|
|
},
|
|
splitLine: {
|
|
splitLine: {
|
|
show: false,
|
|
show: false,
|
|
@@ -488,22 +507,22 @@ export default {
|
|
window.addEventListener("resize", this.resize);
|
|
window.addEventListener("resize", this.resize);
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- created () {
|
|
|
|
|
|
+ created() {
|
|
this.id = "pie-chart-" + util.newGUID();
|
|
this.id = "pie-chart-" + util.newGUID();
|
|
},
|
|
},
|
|
- mounted () {
|
|
|
|
|
|
+ mounted() {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
this.$el.style.width = this.width;
|
|
this.$el.style.width = this.width;
|
|
this.$el.style.height = this.height;
|
|
this.$el.style.height = this.height;
|
|
this.initChart();
|
|
this.initChart();
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- updated () {
|
|
|
|
|
|
+ updated() {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
this.initChart();
|
|
this.initChart();
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- unmounted () {
|
|
|
|
|
|
+ unmounted() {
|
|
window.removeEventListener("resize", this.resize);
|
|
window.removeEventListener("resize", this.resize);
|
|
},
|
|
},
|
|
};
|
|
};
|