update
This commit is contained in:
@@ -331,6 +331,12 @@ export default {
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onJsonChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
onJsonSave(val) {
|
||||
console.log(val);
|
||||
},
|
||||
// 无论哪个输入框改变 都需要触发事件 将值回传
|
||||
changed(val, key) {
|
||||
if (val.extend) {
|
||||
|
||||
@@ -1822,7 +1822,7 @@ const widgetTools = [
|
||||
placeholder: 'px',
|
||||
relactiveDom: 'dataType',
|
||||
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',
|
||||
@@ -2360,7 +2360,7 @@ const widgetTools = [
|
||||
placeholder: 'px',
|
||||
relactiveDom: 'dataType',
|
||||
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',
|
||||
@@ -3003,7 +3003,7 @@ const widgetTools = [
|
||||
placeholder: 'px',
|
||||
relactiveDom: 'dataType',
|
||||
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',
|
||||
@@ -3628,7 +3628,7 @@ const widgetTools = [
|
||||
placeholder: 'px',
|
||||
relactiveDom: 'dataType',
|
||||
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',
|
||||
@@ -4021,7 +4021,7 @@ const widgetTools = [
|
||||
placeholder: 'px',
|
||||
relactiveDom: 'dataType',
|
||||
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',
|
||||
@@ -4395,7 +4395,7 @@ const widgetTools = [
|
||||
placeholder: 'px',
|
||||
relactiveDom: 'dataType',
|
||||
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',
|
||||
@@ -4548,7 +4548,7 @@ const widgetTools = [
|
||||
placeholder: 'px',
|
||||
relactiveDom: 'dataType',
|
||||
relactiveDomValue: 'staticData',
|
||||
value: '{"value": 50, "name": "名称", "unit": "%"}',
|
||||
value: {value: 50, name: "名称", unit: "%"},
|
||||
},
|
||||
{
|
||||
type: 'dycustComponents',
|
||||
@@ -4995,7 +4995,7 @@ const widgetTools = [
|
||||
placeholder: 'px',
|
||||
relactiveDom: 'dataType',
|
||||
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',
|
||||
|
||||
@@ -95,7 +95,12 @@ 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,
|
||||
color: "rgba(0,244,255,1)" // 0% 处的颜色
|
||||
@@ -115,9 +120,9 @@ export default {
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: ['-10', '-30'],
|
||||
position: ["-10", "-30"],
|
||||
distance: 1,
|
||||
formatter: '{a|{c}}',
|
||||
formatter: "{a|{c}}",
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 15,
|
||||
@@ -326,11 +331,16 @@ export default {
|
||||
legend.itemWidth = optionsCollapse.lengedWidth;
|
||||
},
|
||||
// 渐变色
|
||||
setOptionsColor(){
|
||||
setOptionsColor() {
|
||||
const optionsCollapse = this.optionsSetup;
|
||||
const itemStyle = this.options.series[0]['itemStyle']
|
||||
const itemStyle = this.options.series[0]["itemStyle"];
|
||||
const normal = {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: optionsCollapse.bar0color // 0% 处的颜色
|
||||
@@ -345,8 +355,8 @@ export default {
|
||||
barBorderRadius: optionsCollapse.radius, //圆角
|
||||
shadowColor: optionsCollapse.shadowColor, // 阴影颜色
|
||||
shadowBlur: optionsCollapse.shadowBlur //模糊系数
|
||||
}
|
||||
itemStyle['normal'] = normal
|
||||
};
|
||||
itemStyle["normal"] = normal;
|
||||
},
|
||||
// 数据解析
|
||||
setOptionsData() {
|
||||
@@ -362,7 +372,7 @@ export default {
|
||||
},
|
||||
// 静态数据
|
||||
staticDataFn(val, optionsSetup) {
|
||||
const staticData = JSON.parse(val);
|
||||
const staticData = typeof val == "string" ? JSON.parse(val) : val;
|
||||
// x轴
|
||||
if (optionsSetup.verticalShow) {
|
||||
this.options.xAxis.data = [];
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div :style="styleObj">
|
||||
<v-chart :options="options"
|
||||
autoresize />
|
||||
<v-chart :options="options" autoresize />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,7 +12,7 @@ export default {
|
||||
value: Object,
|
||||
ispreview: Boolean
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
legend: {
|
||||
@@ -46,7 +45,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styleObj () {
|
||||
styleObj() {
|
||||
return {
|
||||
position: this.ispreview ? "absolute" : "static",
|
||||
width: this.optionsStyle.width + "px",
|
||||
@@ -59,7 +58,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler (val) {
|
||||
handler(val) {
|
||||
console.log(val);
|
||||
this.optionsStyle = val.position;
|
||||
this.optionsData = val.data;
|
||||
@@ -70,7 +69,7 @@ export default {
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.optionsStyle = this.value.position;
|
||||
this.optionsData = this.value.data;
|
||||
this.optionsCollapse = this.value.setup;
|
||||
@@ -79,7 +78,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
// 修改图标options属性
|
||||
editorOptions () {
|
||||
editorOptions() {
|
||||
this.setOptionsTitle();
|
||||
this.setOptionsValue();
|
||||
this.setOptionsTooltip();
|
||||
@@ -89,11 +88,11 @@ export default {
|
||||
this.setOptionsRosetype();
|
||||
},
|
||||
// 饼图模式 面积模式"area" 半径模式"radius"
|
||||
setOptionsRosetype () {
|
||||
this.options.series[0]['roseType'] = this.optionsSetup.nightingleRosetype
|
||||
setOptionsRosetype() {
|
||||
this.options.series[0]["roseType"] = this.optionsSetup.nightingleRosetype;
|
||||
},
|
||||
// 标题修改
|
||||
setOptionsTitle () {
|
||||
setOptionsTitle() {
|
||||
const optionsCollapse = this.optionsSetup;
|
||||
const title = {};
|
||||
title.text = optionsCollapse.titleText;
|
||||
@@ -141,7 +140,7 @@ export default {
|
||||
}
|
||||
},
|
||||
// tooltip 设置
|
||||
setOptionsTooltip () {
|
||||
setOptionsTooltip() {
|
||||
const optionsCollapse = this.optionsSetup;
|
||||
const tooltip = {
|
||||
trigger: "item",
|
||||
@@ -154,7 +153,7 @@ export default {
|
||||
this.options.tooltip = tooltip;
|
||||
},
|
||||
// 边距设置
|
||||
setOptionsMargin () {
|
||||
setOptionsMargin() {
|
||||
const optionsCollapse = this.optionsSetup;
|
||||
const grid = {
|
||||
left: optionsCollapse.marginLeft,
|
||||
@@ -166,7 +165,7 @@ export default {
|
||||
this.options.grid = grid;
|
||||
},
|
||||
// 图例操作 legend
|
||||
setOptionsLegend () {
|
||||
setOptionsLegend() {
|
||||
const optionsCollapse = this.optionsSetup;
|
||||
const legend = this.options.legend;
|
||||
legend.show = optionsCollapse.isShowLegend;
|
||||
@@ -202,7 +201,7 @@ export default {
|
||||
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
|
||||
},
|
||||
staticDataFn(val) {
|
||||
const staticData = JSON.parse(val);
|
||||
const staticData = typeof val == "string" ? JSON.parse(val) : val;
|
||||
for (const key in this.options.series) {
|
||||
if (this.options.series[key].type == "pie") {
|
||||
this.options.series[key].data = staticData;
|
||||
|
||||
@@ -296,7 +296,7 @@ export default {
|
||||
},
|
||||
// 静态数据
|
||||
staticDataFn(val, optionsSetup) {
|
||||
const staticData = JSON.parse(val);
|
||||
const staticData = typeof val == "string" ? JSON.parse(val) : val;
|
||||
// x轴
|
||||
if (optionsSetup.verticalShow) {
|
||||
this.options.xAxis.data = [];
|
||||
|
||||
@@ -383,7 +383,7 @@ export default {
|
||||
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
|
||||
},
|
||||
staticDataFn(val) {
|
||||
const staticData = JSON.parse(val);
|
||||
const staticData = typeof val == "string" ? JSON.parse(val) : val;
|
||||
// x轴
|
||||
this.options.xAxis.data = staticData.xAxis;
|
||||
// series
|
||||
|
||||
@@ -204,7 +204,7 @@ export default {
|
||||
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
|
||||
},
|
||||
staticDataFn(val) {
|
||||
const staticData = JSON.parse(val);
|
||||
const staticData = typeof val == "string" ? JSON.parse(val) : val;
|
||||
for (const key in this.options.series) {
|
||||
if (this.options.series[key].type == "funnel") {
|
||||
this.options.series[key].data = staticData;
|
||||
|
||||
@@ -102,24 +102,22 @@ export default {
|
||||
},
|
||||
setOptionsData() {
|
||||
const optionsData = this.optionsData; // 数据类型 静态 or 动态
|
||||
console.log(optionsData);
|
||||
optionsData.dataType == "staticData"
|
||||
? this.staticDataFn(optionsData.staticData)
|
||||
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
|
||||
},
|
||||
staticDataFn(val) {
|
||||
const unit = JSON.parse(val).unit;
|
||||
const staticData = typeof val == "string" ? JSON.parse(val) : val;
|
||||
const series = this.options.series;
|
||||
for (const key in series) {
|
||||
series[key].detail.formatter = `{value}${unit}`;
|
||||
series[key].detail.formatter = `{value}${staticData.unit}`;
|
||||
series[key].data[0] = {
|
||||
value: JSON.parse(val).value,
|
||||
name: JSON.parse(val).name
|
||||
value: staticData.value,
|
||||
name: staticData.name
|
||||
};
|
||||
}
|
||||
},
|
||||
dynamicDataFn(val, refreshTime) {
|
||||
console.log(val);
|
||||
if (!val) return;
|
||||
if (this.ispreview) {
|
||||
this.getEchartData(val);
|
||||
|
||||
@@ -297,7 +297,7 @@ export default {
|
||||
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
|
||||
},
|
||||
staticDataFn(val) {
|
||||
const staticData = JSON.parse(val);
|
||||
const staticData = typeof val == "string" ? JSON.parse(val) : val;
|
||||
// x轴
|
||||
this.options.xAxis.data = staticData.categories;
|
||||
// series
|
||||
|
||||
@@ -93,12 +93,13 @@ export default {
|
||||
this.setOptionsPiechartStyle();
|
||||
},
|
||||
// 饼图样式
|
||||
setOptionsPiechartStyle(){
|
||||
setOptionsPiechartStyle() {
|
||||
if (this.optionsSetup.piechartStyle == "shixin") {
|
||||
this.options.series[0]['radius'] = "50%"
|
||||
}else if (this.optionsSetup.piechartStyle == "kongxin"){
|
||||
this.options.series[0]['radius'] = ["40%", "70%"]
|
||||
}else {}
|
||||
this.options.series[0]["radius"] = "50%";
|
||||
} else if (this.optionsSetup.piechartStyle == "kongxin") {
|
||||
this.options.series[0]["radius"] = ["40%", "70%"];
|
||||
} else {
|
||||
}
|
||||
},
|
||||
// 标题设置
|
||||
setOptionsTitle() {
|
||||
@@ -197,7 +198,7 @@ export default {
|
||||
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
|
||||
},
|
||||
staticDataFn(val) {
|
||||
const staticData = JSON.parse(val);
|
||||
const staticData = typeof val == "string" ? JSON.parse(val) : val;
|
||||
for (const key in this.options.series) {
|
||||
if (this.options.series[key].type == "pie") {
|
||||
this.options.series[key].data = staticData;
|
||||
|
||||
Reference in New Issue
Block a user