南丁格尔饼图支持动态数据

qianming 3 years ago
parent a65f62ac95
commit ad350d3d4d

@ -1088,13 +1088,13 @@ const widgetTools = [
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
],
},
{
@ -4922,7 +4922,7 @@ const widgetTools = [
name: 'layerName',
required: false,
placeholder: '',
value: '图',
value: '南丁格尔玫瑰图',
},
{
type: 'vue-color',

@ -6,7 +6,6 @@
</template>
<script>
import echarts from "echarts";
export default {
name: "WidgetPieNightingaleRoseArea", // https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple
components: {},
@ -28,7 +27,7 @@ export default {
},
series: [
{
name: "面积模式",
//name: "",
type: "pie",
radius: ["10%", "50%"],
center: ["50%", "50%"],
@ -36,21 +35,13 @@ export default {
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: "rose 1" },
{ value: 38, name: "rose 2" },
{ value: 32, name: "rose 3" },
{ value: 30, name: "rose 4" },
{ value: 28, name: "rose 5" },
{ value: 26, name: "rose 6" },
{ value: 22, name: "rose 7" },
{ value: 18, name: "rose 8" }
]
data: []
}
]
},
optionsStyle: {}, //
optionsData: {}, //
optionsCollapse: {}, //
optionsSetup: {}
};
},
@ -90,13 +81,10 @@ export default {
// options
editorOptions () {
this.setOptionsTitle();
// this.setOptionsX()
// this.setOptionsY()
// this.setOptionsTop()
// this.setOptionsTooltip()
// this.setOptionsMargin()
// this.setOptionsLegend()
// this.setOptionsColor()
this.setOptionsValue();
this.setOptionsTooltip();
this.setOptionsLegend();
this.setOptionsColor();
this.setOptionsData();
},
//
@ -117,104 +105,35 @@ export default {
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
};
this.options.title = title;
},
// X
setOptionsX () {
const optionsCollapse = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsCollapse.hideX, //
name: optionsCollapse.xName, //
nameTextStyle: {
color: optionsCollapse.xNameColor,
fontSize: optionsCollapse.xNameFontSize
},
nameRotate: optionsCollapse.textAngle, //
inverse: optionsCollapse.reversalX, //
axisLabel: {
show: true,
interval: optionsCollapse.textInterval, //
rotate: optionsCollapse.textAngle, //
textStyle: {
color: optionsCollapse.Xcolor, // x
fontSize: optionsCollapse.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorX
}
},
splitLine: {
show: optionsCollapse.isShowSplitLineX,
lineStyle: {
color: optionsCollapse.splitLineColorX
},
},
};
this.options.xAxis = xAxis;
},
// Y
setOptionsY () {
//
setOptionsValue() {
const optionsCollapse = this.optionsSetup;
const yAxis = {
type: "value",
show: optionsCollapse.isShowY, //
name: optionsCollapse.textNameY, //
nameTextStyle: {
color: optionsCollapse.NameColorY,
fontSize: optionsCollapse.NameFontSizeY
},
inverse: optionsCollapse.reversalY, //
axisLabel: {
show: true,
textStyle: {
color: optionsCollapse.colorY, // x
fontSize: optionsCollapse.fontSizeY
}
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorY
const series = this.options.series;
const numberValue = optionsCollapse.numberValue ? "{c}" : "";
const percentage = optionsCollapse.percentage ? "({d})%" : "";
const label = {
show: optionsCollapse.isShow,
formatter: `{a|{b}${numberValue} ${percentage}}`,
rich: {
a: {
padding: [-30, 15, -20, 15],
color: optionsCollapse.subTextColor,
fontSize: optionsCollapse.fontSize,
fontWeight: optionsCollapse.fontWeight
}
},
splitLine: {
show: optionsCollapse.isShowSplitLineY,
lineStyle: {
color: optionsCollapse.splitLineColorY
},
},
};
this.options.yAxis = yAxis;
},
// or
setOptionsTop () {
const optionsCollapse = this.optionsSetup;
const series = this.options.series;
fontSize: optionsCollapse.fontSize,
fontWeight: optionsCollapse.optionsCollapse
};
for (const key in series) {
if (series[key].type == "bar") {
series[key].label = {
show: optionsCollapse.isShow,
position: "top",
distance: 10,
fontSize: optionsCollapse.fontSize,
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.fontWeight
};
series[key].barWidth = optionsCollapse.maxWidth;
series[key].barMinHeight = optionsCollapse.minHeight;
if (series[key].type == "pie") {
series[key].label = label;
series[key].labelLine = { show: optionsCollapse.isShow };
}
}
this.options.series = series;
},
// tooltip
setOptionsTooltip () {
@ -259,7 +178,7 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth;
},
//
setOptionsColor () {
setOptionsColor() {
const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.customColor;
if (!customColor) return;
@ -267,19 +186,7 @@ export default {
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
const itemStyle = {
normal: {
color: params => {
return arrColor[params.dataIndex];
},
barBorderRadius: optionsCollapse.radius
}
};
for (const key in this.options.series) {
if (this.options.series[key].type == "bar") {
this.options.series[key].itemStyle = itemStyle;
}
}
this.options.color = arrColor;
this.options = Object.assign({}, this.options);
},
//
@ -315,28 +222,41 @@ export default {
}
}
},
//
dynamicDataFn (val, optionsSetup) {
console.log(val);
setOptionsData() {
const optionsData = this.optionsData; // or
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const staticData = JSON.parse(val);
for (const key in this.options.series) {
if (this.options.series[key].type == "pie") {
this.options.series[key].data = staticData;
}
}
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
// x
if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
this.options.yAxis.data = val.xAxis;
this.options.xAxis.type = "value";
this.options.yAxis.type = "category";
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.options.xAxis.data = val.xAxis;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
this.getEchartData(val);
}
// series
const series = this.options.series;
for (const i in series) {
if (series[i].type == "bar") {
series[i].data = val.series[i].data;
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(res);
});
},
renderingFn(val) {
for (const key in this.options.series) {
if (this.options.series[key].type == "pie") {
this.options.series[key].data = val;
}
}
}

Loading…
Cancel
Save