qianlishi 4 years ago
parent ad756a2ae0
commit 79d30d2516

@ -331,6 +331,12 @@ export default {
}, },
mounted() {}, mounted() {},
methods: { methods: {
onJsonChange(val) {
console.log(val);
},
onJsonSave(val) {
console.log(val);
},
// //
changed(val, key) { changed(val, key) {
if (val.extend) { if (val.extend) {

@ -1822,7 +1822,7 @@ const widgetTools = [
placeholder: 'px', placeholder: 'px',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}', value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]},
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -2360,7 +2360,7 @@ const widgetTools = [
placeholder: 'px', placeholder: 'px',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}', value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]},
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -3003,7 +3003,7 @@ const widgetTools = [
placeholder: 'px', placeholder: 'px',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1009,3409,2309,5409,3409]}]}', value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1009,3409,2309,5409,3409]}]},
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -3628,7 +3628,7 @@ const widgetTools = [
placeholder: 'px', placeholder: 'px',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: '{"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]}', value: {"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]},
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -4021,7 +4021,7 @@ const widgetTools = [
placeholder: 'px', placeholder: 'px',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: '[{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}]', value: [{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}]
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -4395,7 +4395,7 @@ const widgetTools = [
placeholder: 'px', placeholder: 'px',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: '[{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}]', value: [{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}],
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -4548,7 +4548,7 @@ const widgetTools = [
placeholder: 'px', placeholder: 'px',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: '{"value": 50, "name": "名称", "unit": "%"}', value: {value: 50, name: "名称", unit: "%"},
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -4995,7 +4995,7 @@ const widgetTools = [
placeholder: 'px', placeholder: 'px',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: '[{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}]', value: [{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}],
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',

@ -95,7 +95,12 @@ export default {
barWidth: "20px", barWidth: "20px",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ {
offset: 0, offset: 0,
color: "rgba(0,244,255,1)" // 0% color: "rgba(0,244,255,1)" // 0%
@ -115,9 +120,9 @@ export default {
label: { label: {
normal: { normal: {
show: true, show: true,
position: ['-10', '-30'], position: ["-10", "-30"],
distance: 1, distance: 1,
formatter: '{a|{c}}', formatter: "{a|{c}}",
rich: { rich: {
a: { a: {
fontSize: 15, fontSize: 15,
@ -326,11 +331,16 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth; legend.itemWidth = optionsCollapse.lengedWidth;
}, },
// //
setOptionsColor(){ setOptionsColor() {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const itemStyle = this.options.series[0]['itemStyle'] const itemStyle = this.options.series[0]["itemStyle"];
const normal = { const normal = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ {
offset: 0, offset: 0,
color: optionsCollapse.bar0color // 0% color: optionsCollapse.bar0color // 0%
@ -345,8 +355,8 @@ export default {
barBorderRadius: optionsCollapse.radius, // barBorderRadius: optionsCollapse.radius, //
shadowColor: optionsCollapse.shadowColor, // shadowColor: optionsCollapse.shadowColor, //
shadowBlur: optionsCollapse.shadowBlur // shadowBlur: optionsCollapse.shadowBlur //
} };
itemStyle['normal'] = normal itemStyle["normal"] = normal;
}, },
// //
setOptionsData() { setOptionsData() {
@ -362,7 +372,7 @@ export default {
}, },
// //
staticDataFn(val, optionsSetup) { staticDataFn(val, optionsSetup) {
const staticData = JSON.parse(val); const staticData = typeof val == "string" ? JSON.parse(val) : val;
// x // x
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];

@ -1,7 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" <v-chart :options="options" autoresize />
autoresize />
</div> </div>
</template> </template>
@ -13,7 +12,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean
}, },
data () { data() {
return { return {
options: { options: {
legend: { legend: {
@ -46,7 +45,7 @@ export default {
}; };
}, },
computed: { computed: {
styleObj () { styleObj() {
return { return {
position: this.ispreview ? "absolute" : "static", position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px", width: this.optionsStyle.width + "px",
@ -59,7 +58,7 @@ export default {
}, },
watch: { watch: {
value: { value: {
handler (val) { handler(val) {
console.log(val); console.log(val);
this.optionsStyle = val.position; this.optionsStyle = val.position;
this.optionsData = val.data; this.optionsData = val.data;
@ -70,7 +69,7 @@ export default {
deep: true deep: true
} }
}, },
mounted () { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
this.optionsData = this.value.data; this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
@ -79,7 +78,7 @@ export default {
}, },
methods: { methods: {
// options // options
editorOptions () { editorOptions() {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsValue(); this.setOptionsValue();
this.setOptionsTooltip(); this.setOptionsTooltip();
@ -89,11 +88,11 @@ export default {
this.setOptionsRosetype(); this.setOptionsRosetype();
}, },
// "area" "radius" // "area" "radius"
setOptionsRosetype () { setOptionsRosetype() {
this.options.series[0]['roseType'] = this.optionsSetup.nightingleRosetype this.options.series[0]["roseType"] = this.optionsSetup.nightingleRosetype;
}, },
// //
setOptionsTitle () { setOptionsTitle() {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const title = {}; const title = {};
title.text = optionsCollapse.titleText; title.text = optionsCollapse.titleText;
@ -141,7 +140,7 @@ export default {
} }
}, },
// tooltip // tooltip
setOptionsTooltip () { setOptionsTooltip() {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const tooltip = { const tooltip = {
trigger: "item", trigger: "item",
@ -154,7 +153,7 @@ export default {
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
// //
setOptionsMargin () { setOptionsMargin() {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const grid = { const grid = {
left: optionsCollapse.marginLeft, left: optionsCollapse.marginLeft,
@ -166,7 +165,7 @@ export default {
this.options.grid = grid; this.options.grid = grid;
}, },
// legend // legend
setOptionsLegend () { setOptionsLegend() {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const legend = this.options.legend; const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend; legend.show = optionsCollapse.isShowLegend;
@ -202,7 +201,7 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const staticData = JSON.parse(val); const staticData = typeof val == "string" ? JSON.parse(val) : val;
for (const key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == "pie") { if (this.options.series[key].type == "pie") {
this.options.series[key].data = staticData; this.options.series[key].data = staticData;

@ -296,7 +296,7 @@ export default {
}, },
// //
staticDataFn(val, optionsSetup) { staticDataFn(val, optionsSetup) {
const staticData = JSON.parse(val); const staticData = typeof val == "string" ? JSON.parse(val) : val;
// x // x
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];

@ -383,7 +383,7 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const staticData = JSON.parse(val); const staticData = typeof val == "string" ? JSON.parse(val) : val;
// x // x
this.options.xAxis.data = staticData.xAxis; this.options.xAxis.data = staticData.xAxis;
// series // series

@ -204,7 +204,7 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const staticData = JSON.parse(val); const staticData = typeof val == "string" ? JSON.parse(val) : val;
for (const key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == "funnel") { if (this.options.series[key].type == "funnel") {
this.options.series[key].data = staticData; this.options.series[key].data = staticData;

@ -102,24 +102,22 @@ export default {
}, },
setOptionsData() { setOptionsData() {
const optionsData = this.optionsData; // or const optionsData = this.optionsData; // or
console.log(optionsData);
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData) ? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const unit = JSON.parse(val).unit; const staticData = typeof val == "string" ? JSON.parse(val) : val;
const series = this.options.series; const series = this.options.series;
for (const key in series) { for (const key in series) {
series[key].detail.formatter = `{value}${unit}`; series[key].detail.formatter = `{value}${staticData.unit}`;
series[key].data[0] = { series[key].data[0] = {
value: JSON.parse(val).value, value: staticData.value,
name: JSON.parse(val).name name: staticData.name
}; };
} }
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
console.log(val);
if (!val) return; if (!val) return;
if (this.ispreview) { if (this.ispreview) {
this.getEchartData(val); this.getEchartData(val);

@ -297,7 +297,7 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const staticData = JSON.parse(val); const staticData = typeof val == "string" ? JSON.parse(val) : val;
// x // x
this.options.xAxis.data = staticData.categories; this.options.xAxis.data = staticData.categories;
// series // series

@ -93,12 +93,13 @@ export default {
this.setOptionsPiechartStyle(); this.setOptionsPiechartStyle();
}, },
// //
setOptionsPiechartStyle(){ setOptionsPiechartStyle() {
if (this.optionsSetup.piechartStyle == "shixin") { if (this.optionsSetup.piechartStyle == "shixin") {
this.options.series[0]['radius'] = "50%" this.options.series[0]["radius"] = "50%";
}else if (this.optionsSetup.piechartStyle == "kongxin"){ } else if (this.optionsSetup.piechartStyle == "kongxin") {
this.options.series[0]['radius'] = ["40%", "70%"] this.options.series[0]["radius"] = ["40%", "70%"];
}else {} } else {
}
}, },
// //
setOptionsTitle() { setOptionsTitle() {
@ -197,7 +198,7 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const staticData = JSON.parse(val); const staticData = typeof val == "string" ? JSON.parse(val) : val;
for (const key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == "pie") { if (this.options.series[key].type == "pie") {
this.options.series[key].data = staticData; this.options.series[key].data = staticData;

Loading…
Cancel
Save