路徑
D:\ireport365\ireport365.war\js\enduser\designer\vs-component-echarts.js
一 k線圖 初始化數據 數據處理函數 和k線圖 option對象
~~~
// K線圖初始化數據
var k = [["LG",5499.0,6499.0,5499.0,6499.0,5999.0,2,72.0],["TCL",769.0,2499.0,769.0,2499.0,1694.71,7,8461.0],["七星",638.0,638.0,638.0,638.0,638.0,1,55.0],["萬寶",558.0,1049.0,558.0,1049.0,790.8,5,1447.0],["三星",2399.0,6499.0,2399.0,6499.0,4161.5,8,1291.0],["上菱",759.0,1699.0,759.0,1699.0,1131.5,4,241.0],["先科",399.0,549.0,399.0,549.0,482.0,3,532.0],["創維",849.0,2299.0,849.0,2299.0,1540.0,9,3887.0],["華日電器",769.0,999.0,769.0,999.0,884.0,2,120.0],["博世",2490.0,12830.0,2490.0,12830.0,5995.0,6,388.0],["卡薩帝",6999.0,8999.0,6999.0,8999.0,7999.0,2,126.0],["雙鹿",599.0,1029.0,599.0,1029.0,796.5,4,1169.0],["哈士奇",996.0,8799.0,996.0,8799.0,2254.22,9,758.0],["奧克斯",699.0,2599.0,699.0,2599.0,1649.0,2,309.0],["奧馬",499.0,2999.0,499.0,2999.0,1913.29,7,2679.0],["容聲",958.0,5699.0,958.0,5699.0,2649.9,20,21814.0],["富信",339.0,439.0,339.0,439.0,382.333,3,810.0],["尊貴",2299.0,2988.0,2299.0,2988.0,2695.33,3,323.0],["小天鵝",1099.0,1099.0,1099.0,1099.0,1099.0,1,114.0],["康佳",698.0,2598.0,698.0,2598.0,1486.38,16,13779.0],["德努希",1698.0,3799.0,1698.0,3799.0,2965.33,3,125.0],["志高",438.0,639.0,438.0,639.0,538.5,2,119.0],["扎努西?伊萊克斯",1149.0,1149.0,1149.0,1149.0,1149.0,1,71.0],["揚佳",518.0,638.0,518.0,638.0,558.0,3,467.0],["新飛",799.0,2999.0,799.0,2999.0,1726.18,11,2014.0],["晶弘",749.0,3999.0,749.0,3999.0,2365.67,9,1648.0],["松下",3490.0,7590.0,3490.0,7590.0,4710.0,5,830.0],["櫻花",538.0,699.0,538.0,699.0,598.143,7,2595.0],["歐立",419.0,599.0,419.0,599.0,509.0,2,290.0],["海信",559.0,4299.0,559.0,4299.0,2380.18,17,6639.0],["海爾",649.0,7399.0,649.0,7399.0,2816.61,38,41402.0],["海浪",508.0,658.0,508.0,658.0,583.0,2,209.0],["熊貓",538.0,1180.0,538.0,1180.0,766.833,6,6301.0],["索伊",589.0,589.0,589.0,589.0,589.0,1,285.0],["統帥",719.0,3399.0,719.0,3399.0,2001.5,8,4989.0],["美的",699.0,3999.0,699.0,3999.0,1974.44,18,23296.0],["美菱",799.0,4299.0,799.0,4299.0,2227.57,14,8440.0],["榮事達",1299.0,1299.0,1299.0,1299.0,1299.0,1,77.0],["西門子",2398.0,16030.0,2398.0,16030.0,5372.11,28,6388.0],["長虹",749.0,1149.0,749.0,1149.0,949.0,2,443.0],["韓上",488.0,999.0,488.0,999.0,816.8,5,6730.0],["韓電",638.0,1999.0,638.0,1999.0,1094.0,9,918.0]];
// 處理數組對象
function splitData(rawData) {
var categoryData = [];
var values = [];
var avgvalues = [];
var counts = [];
var solds = [];
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
avgvalues.push(rawData[i].splice(4, 1)[0]);
counts.push(rawData[i].splice(4, 1)[0]);
solds.push(rawData[i].splice(4, 1)[0]);
values.push(rawData[i])
}
return {
categoryData: categoryData,
values: values,
avgvalues: avgvalues,
counts: counts,
solds: solds
};
}
var klineData = splitData(k);
// console.log(klineData.categoryData);
// K線圖對象
var klineOptionTemplate = {
title: {
show: false
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
if (params.length > 0) {
var i = params[0].dataIndex;
var html = '';
for(var p in params) {
var seriesName = params[p].seriesName;
var value = params[p].value;
if (p == 0) {
html += seriesName + "<br>";
var name = params[p].name;
html += name + "<br>";
var mValue1 = value[1];
var mValue2 = value[2];
if (mValue1 >= mValue2) {
html += "最高價格：" + mValue1 + "<br>";
html += "最低價格：" + mValue2 + "<br>";
} else {
html += "最高價格：" + mValue2 + "<br>";
html += "最低價格：" + mValue1 + "<br>";
}
} else {
html += seriesName + "：" + value + "<br>";
}
}
return html;
} else {
return "";
}
}
},
legend: {
show:true,
data: ['價格區間', '平均價格', '商品數', '30天總銷量']
},
// dataZoom: [{
// type: 'inside',
// start: 0,
// end: 50
// },
// {
// show: true,
// type: 'slider',
// y: '90%',
// start: 0,
// end: 50
// }
// ],
dataZoom: {
show: false,
realtime: true,
showDetail: true,
handleSize: 12,
height: 30,
type: 'slider',
backgroundColor:"rgba(47,69,84,0)", //組件的背景顏色
fillerColor:"rgba(167,183,204,0.6)", //選中范圍的填充顏色。
borderColor:"#ddd", //邊框顏色。
filterMode: 'filter',
throttle:100,
left:"center", //組件離容器左側的距離,'left', 'center', 'right','20%'
top:"bottom", //組件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //組件離容器右側的距離,'20%'
bottom:"0%", //組件離容器下側的距離,'20%'
},
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: [{
type: 'category',
scale: true,
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#DDD",
width: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0
},
show: true
},
splitLine: {
lineStyle: {
color: "#F6F6F6"
},
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#666",
fontSize: 12
}
},
splitNumber: 20,
data:klineData.categoryData
}],
yAxis: [{
type: 'value',
name: '價格',
position: 'left',
axisLine: {
lineStyle: {
color: "#666",
width: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0
},
show: true
},
splitLine: {
lineStyle: {
color: "#000"
},
show: false
},
},
{
type: 'value',
name: '商品數',
position: 'right',
axisLine: {
lineStyle: {
color: "#666",
width: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0
},
show: true
},
splitLine: {
lineStyle: {
color: "#F6F6F6"
},
show: false
},
},
{
type: 'value',
name: '30天總銷量',
position: 'right',
offset: 50,
axisLine: {
lineStyle: {
color: "#666",
width: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0
},
show: true
},
splitLine: {
lineStyle: {
color: "#F6F6F6"
},
show: false
},
}
],
series: [{
name: '價格區間',
type: 'candlestick',
data:klineData.values,
barWidth: 10,
itemStyle: {
normal: {
color: "#ff8800",
borderColor: "#ff8800"
}
},
markPoint: {
data: [
]
}
},
{
name: '平均價格',
type: 'line',
smooth: true,
data: klineData.avgvalues,
lineStyle: {
normal: {
opacity: 0.5
}
}
},
{
name: '商品數',
type: 'line',
data: klineData.counts,
yAxisIndex: 1,
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
},
{
name: '30天總銷量',
type: 'line',
data:klineData.solds,
yAxisIndex: 2,
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
}
]
};
~~~
二 添加k線圖
~~~
{
name: "",
type: "linegrapht",
coverImage: contextPath + "/images/componenttypes/" + locale + "/echarts/zh_kline.png",
coverImageWidth: a,
tip: "K線圖"
},
~~~
三 copy k線圖 對象
~~~
case "linegrapht":
option = angular.copy(klineOptionTemplate);
break;
~~~
四添加 調用數據處理函數
~~~
case "linegrapht":
internalRefreshKlineModelData();
break;
~~~
五 數據處理函數
~~~
// k線圖處理數據函數
var internalRefreshKlineModelData = function(){
var option2 = component.config.chartConfig;
var option = component.config.chartConfig;
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var data = component.context.data;
// console.info(data);
if (data == null || data.length < 1 || measures.length < 1) {
return
}
// x軸的標簽
var xAxisLabels = [];
var candlestickValue = [];
// 遍歷最后一個維度的所有指標
for (var i = 0; i < data.length; i++) {
// push進去每一個遍歷出來的指標
xAxisLabels.push(data[i][dimensions[dimensions.length - 1].name])
if (measures.length >= 2) {
var values = [];
values.push((data[i][measures[0].name]));
values.push((data[i][measures[1].name]));
values.push((data[i][measures[0].name]));
values.push((data[i][measures[1].name]));
candlestickValue.push(values);
}
}
// 判斷標簽數組里有沒有數組
if (xAxisLabels.length == 0) {
// 沒有則為空
xAxisLabels = [""]
}
component.context.originalXAxisLabels = null;
if (!VSUtils.isEmpty(component.config.xAxisLabelScript)) {
// 復制x軸維度數組
component.context.originalXAxisLabels = angular.copy(xAxisLabels);
try {
// 計算字符串
var f = eval("(function(labelData){ " + Base64.decode(component.config.xAxisLabelScript) + "})");
f.call(null, xAxisLabels)
} catch (e) {
console.log(e)
}
}
// 設置一個新度量的空數組
var newMeasures = [];
// 循環遍歷選中的度量
for (var i = 0; i < measures.length; i++) {
var show = component.config["show_" + i];
console.log(component.config)
if (show != null && show === false) {
// 結束本次循環（跳過下一步）
continue
}
// push進新度量數組
newMeasures.push(measures[i])
}
// console.log(newMeasures)
// 新度量數組賦值給初始數組
measures = newMeasures;
// 圖例
var legendData = [];
if (measures.length >= 2) {
option.xAxis[0].data = xAxisLabels;
option.series[0].data = candlestickValue;
var colors = [];
var yAxis = [];
yAxis.push(option.yAxis[0]);
option.yAxis = yAxis;
option.series[0].itemStyle = {};
option.series[0].itemStyle.normal = {};
if (component.config["columnColor"] == null) {
var colorConfig = getColorConfig(0);
option.series[0].itemStyle.normal.color = colorConfig.main;
option.series[0].itemStyle.normal.borderColor = colorConfig.main;
colors.push(colorConfig.main);
colors.push(colorConfig.main);
} else {
option.series[0].itemStyle.normal.color = component.config["columnColor"];
option.series[0].itemStyle.normal.borderColor = component.config["columnColor"];
colors.push(component.config["columnColor"]);
colors.push(component.config["columnColor"]);
}
var series = [];
series.push(option.series[0]);
option.series = series;
legendData.push("價格區間");
option.legend.data = legendData;
// 如果有新增的度量，新增的為線圖
if (measures.length > 2) {
var newSeries = [];
newSeries.push(option.series[0])
legendData = [];
legendData.push("價格區間");
yAxis = [];
yAxis.push(option.yAxis[0]);
// 遍歷度量數組
for (var i = 2; i < measures.length; i++) {
var lineAxis = {};
lineAxis.type = "value";
lineAxis.name = measures[i].label;
lineAxis.position = "right";
lineAxis.axisLabel = {};
lineAxis.axisLabel.formatter = "{value}";
lineAxis.offset = (yAxis.length - 1) * 50;
yAxis.push(lineAxis);
var lineSeries = {};
lineSeries.type = "line";
lineSeries.smooth = true;
lineSeries.lineStyle = {};
lineSeries.lineStyle.normal = {};
lineSeries.lineStyle.normal.opacity = 0.5;
lineSeries.name = measures[i].name;
lineSeries.yAxisIndex = yAxis.length - 1;
var values = [];
// 遍歷最后一個維度的所有指標
for (var d = 0; d < data.length; d++) {
var value = data[d][measures[i].name];
if (component.config["digit_" + i] != null) {
value = $vsUtils.processValue(value, component.config["digit_" + i]);
}
values.push(value);
}
lineSeries.data = values;
lineSeries.itemStyle = {};
lineSeries.itemStyle.normal = {};
lineSeries.itemStyle.normal.lineStyle = {};
if (component.config["lineColor_" + i] == null) {
// 獲取到折線上的顏色
var colorConfig = getColorConfig(i);
// 賦值給折線圖對象屬性
lineSeries.itemStyle.normal.color = colorConfig.main;
lineSeries.itemStyle.normal.lineStyle.color = colorConfig.main;
colors.push(colorConfig.main);
} else {
// 賦值給我們設置過的顏色
lineSeries.itemStyle.normal.color = component.config["lineColor_" + i];
lineSeries.itemStyle.normal.lineStyle.color = component.config["lineColor_" + i];
colors.push(component.config["lineColor_" + i]);
}
// 把對應索引的push進新數組里
newSeries.push(lineSeries);
legendData.push(measures[i].label);
}
// 賦值echarts的數組數組
option.series = newSeries
option.legend.data = legendData;
option.yAxis = yAxis;
// option.color = colors;
}
// 重新繪制圖形并清除以前的
setTimeout(function () {
// option = angular.copy(klineOptionTemplate);
component.context.chart.setOption(option, true);
})
}
}
~~~
六 接收數據聯動
~~~
case "linegrapht":
var dataIndex = -1;
var axisLabels = component.config.chartConfig.xAxis[0].data;
if (component.context.originalXAxisLabels != null && component.context.originalXAxisLabels.length > dataIndex) {
axisLabels = component.context.originalXAxisLabels
}
for (var i = 0; i < axisLabels.length; i++) {
if ("" + axisLabels[i] === "" + event.source.value) {
dataIndex = i;
break
}
}
if (dataIndex < 0) {
component.context.chart.dispatchAction({
type: "hideTip"
});
return
}
if (dataIndex > -1) {
component.context.chart.dispatchAction({
type: "showTip",
dataIndex: dataIndex,
seriesIndex: 0
})
}
break;
~~~
七 在圖例上添加 與 線圖 面積圖 混合圖 柱狀圖 共用
八 提示框 與以下組件共用
九 拖動組件 與線圖 柱狀圖 面積圖 混合圖 共用
十 監聽拖動組件代碼 共用
十一 監聽提示框 代碼 共用
十二 監聽圖形里的圖例代碼 共用
十三 和 線圖 柱狀圖 面積圖 共用 軸線 里面內容是不一樣的 紅線條里的為新添加的
代碼如下
~~~
switch (component.type) {
case "linegrapht":
case "line":
case "column":
case "mixed":
case "area":
axisCategory.groups.push(yAxis0Group);
component.description.categories.push(axisCategory);
break;
case "bar":
component.description.categories.push(axisCategory);
break
}
var yAxis1Group = {
title: {
text: vsLang.axis_y_right
},
elements: []
};
var yAxis2Group = {
title: {
text: '右Y軸2'
},
elements: []
};
var yAxis3Group = {
title: {
text: '柱體'
},
elements: []
};
axisCategory.groups.push(yAxis1Group);
axisCategory.groups.push(yAxis2Group);
axisCategory.groups.push(yAxis3Group);
~~~
十四 在第十三步下面繼續添加 下面的代碼
~~~
case "linegrapht":
component.config.xAxisTextColor = option.xAxis[0].axisLabel.textStyle.color;
component.config.xAxisTextSize = option.xAxis[0].axisLabel.textStyle.fontSize;
component.config.xAxisLineColor = option.xAxis[0].axisLine.lineStyle.color;
component.config.xAxisLineWidth = option.xAxis[0].axisLine.lineStyle.width;
component.config.xAxisSplitLineColor = option.xAxis[0].splitLine.lineStyle.color;
component.config.xAxisSplitLineWidth = option.xAxis[0].splitLine.lineStyle.width;
xAxisGroup.elements.push({
title: vsLang.axis_line_width,
type: "configSlide",
bind: "xAxisLineWidth",
config: {
slideEnd: 100
}
});
xAxisGroup.elements.push({
title: vsLang.axis_line_color,
type: "colorpicker",
bind: "xAxisLineColor"
});
xAxisGroup.elements.push({
title: vsLang.text_rotate,
type: "configSlide",
bind: "xAxisLabelRotate",
config: {
slideEnd: 360
}
});
xAxisGroup.elements.push({
title: vsLang.text_interval,
type: "configSlide",
bind: "xAxisLabelInterval",
config: {
slideEnd: 100
}
})
xAxisGroup.elements.push({
title: vsLang.font_color,
type: "colorpicker",
bind: "xAxisTextColor"
});
xAxisGroup.elements.push({
title: vsLang.font_size,
type: "configSlide",
bind: "xAxisTextSize",
config: {
slideEnd: 100
}
});
xAxisGroup.elements.push({
title: vsLang.divide_line_width,
type: "configSlide",
bind: "xAxisSplitLineWidth",
config: {
slideEnd: 100
}
});
xAxisGroup.elements.push({
title: vsLang.divide_line_color,
type: "colorpicker",
bind: "xAxisSplitLineColor"
});
xAxisGroup.elements.push({
title: vsLang.label_script,
type: "script-editor",
bind: "xAxisLabelScript",
btnClass: "btn-default",
onClick: function (ele) {
$vsUtils.openScriptEditorWindow($uibModal, $timeout, scope, element, ele.bind, "javascript", function () {
$timeout(function () {
scope.$broadcast(event_refreshBindingData, {})
})
})
}
})
if (option.yAxis[0].axisLabel == null) {
option.yAxis[0].axisLabel = {
textStyle: {},
lineStyle: {},
splitLine: {}
}
}
component.config.yAxisTextColor = option.yAxis[0].axisLabel.textStyle.color;
component.config.yAxisTextSize = option.yAxis[0].axisLabel.textStyle.fontSize;
component.config.yAxisLineColor = option.yAxis[0].axisLine.lineStyle.color;
component.config.yAxisLineWidth = option.yAxis[0].axisLine.lineStyle.width;
component.config.yAxisSplitLineColor = option.yAxis[0].splitLine.lineStyle.color;
component.config.yAxisSplitLineWidth = option.yAxis[0].splitLine.lineStyle.width;
yAxisGroup.elements.push({
title: vsLang.axis_line_width,
type: "configSlide",
bind: "yAxisLineWidth",
config: {
slideEnd: 100
}
});
yAxisGroup.elements.push({
title: vsLang.axis_line_color,
type: "colorpicker",
bind: "yAxisLineColor"
});
yAxisGroup.elements.push({
title: vsLang.font_color,
type: "colorpicker",
bind: "yAxisTextColor"
});
yAxisGroup.elements.push({
title: vsLang.font_size,
type: "configSlide",
bind: "yAxisTextSize",
config: {
slideEnd: 100
}
});
yAxisGroup.elements.push({
title: vsLang.divide_line_width,
type: "configSlide",
bind: "yAxisSplitLineWidth",
config: {
slideEnd: 100
}
});
yAxisGroup.elements.push({
title: vsLang.divide_line_color,
type: "colorpicker",
bind: "yAxisSplitLineColor"
});
yAxisGroup.elements.push({
title: vsLang.divide_line_count,
type: "configSlide",
bind: "yAxisSplitNumber",
config: {
slideEnd: 100
}
});
yAxis0Group.elements.push({
title: vsLang.axis_line_width,
type: "configSlide",
bind: "yAxis0LineWidth",
config: {
slideEnd: 100
}
});
yAxis0Group.elements.push({
title: vsLang.axis_line_color,
type: "colorpicker",
bind: "yAxis0LineColor"
});
yAxis0Group.elements.push({
title: vsLang.base_value,
type: "switch",
bind: "yAxis0Scale",
on: vsLang.auto,
off: "0"
});
yAxis0Group.elements.push({
title: vsLang.min_value,
type: "text-input-sl",
bind: "yAxis0Min"
});
yAxis0Group.elements.push({
title: vsLang.max_value,
type: "text-input-sl",
bind: "yAxis0Max"
});
yAxis0Group.elements.push({
title: vsLang.value_range_script,
type: "script-editor",
bind: "yAxis0ValueRangeScript",
btnClass: "btn-default",
onClick: function (ele) {
$vsUtils.openScriptEditorWindow($uibModal, $timeout, scope, element, ele.bind, "javascript", function () {
$timeout(function () {
scope.$broadcast(event_refreshBindingData, {})
})
})
}
})
if (option.yAxis.length > 1) {
yAxis1Group.elements.push({
title: vsLang.axis_line_width,
type: "configSlide",
bind: "yAxis1LineWidth",
config: {
slideEnd: 100
}
});
yAxis1Group.elements.push({
title: vsLang.axis_line_color,
type: "colorpicker",
bind: "yAxis1LineColor"
});
yAxis1Group.elements.push({
title: vsLang.base_value,
type: "switch",
bind: "yAxis1Scale",
on: vsLang.auto,
off: "0"
});
yAxis1Group.elements.push({
title: vsLang.min_value,
type: "text-input-sl",
bind: "yAxis1Min"
});
yAxis1Group.elements.push({
title: vsLang.max_value,
type: "text-input-sl",
bind: "yAxis1Max"
});
}
yAxis2Group.elements.push({
title: vsLang.axis_line_width,
type: "configSlide",
bind: "yAxis2LineWidth",
config: {
slideEnd: 100
}
});
yAxis2Group.elements.push({
title: vsLang.axis_line_color,
type: "colorpicker",
bind: "yAxis2LineColor"
});
yAxis2Group.elements.push({
title: vsLang.base_value,
type: "switch",
bind: "yAxis2Scale",
on: vsLang.auto,
off: "0"
});
yAxis2Group.elements.push({
title: vsLang.min_value,
type: "text-input-sl",
bind: "yAxis2Min"
});
yAxis2Group.elements.push({
title: vsLang.max_value,
type: "text-input-sl",
bind: "yAxis2Max"
});
yAxis3Group.elements.push({
title: '柱體顏色',
type: "colorpicker",
bind: "xZhuColor"
});
break;
~~~
十五 監聽軸線里的配置項 在柱線 折線 面積 圖 軸線監聽的位置 加 和他們不是共用的
~~~
case "linegrapht":
watches.push({
key: "component.config.xAxisTextColor",
func: function (option, value) {
if (isValidColorValue(value)) {
option.xAxis[0].axisLabel.textStyle.color = value
}
}
});
watches.push({
key: "component.config.xAxisTextSize",
func: function (option, value) {
option.xAxis[0].axisLabel.textStyle.fontSize = value
}
});
watches.push({
key: "component.config.xAxisLineColor",
func: function (option, value) {
if (isValidColorValue(value)) {
option.xAxis[0].axisLine.lineStyle.color = value
}
}
});
watches.push({
key: "component.config.xAxisLineWidth",
func: function (option, value) {
option.xAxis[0].axisLine.lineStyle.width = value
}
});
watches.push({
key: "component.config.xAxisSplitLineColor",
func: function (option, value) {
if (isValidColorValue(value)) {
option.xAxis[0].splitLine.lineStyle.color = value
}
}
});
watches.push({
key: "component.config.xAxisSplitLineWidth",
func: function (option, value) {
option.xAxis[0].splitLine.lineStyle.width = value
}
});
watches.push({
key: "component.config.xAxisLabelRotate",
func: function (option, value) {
option.xAxis[0].axisLabel.rotate = value
}
});
scope.$watch("component.config.xAxisLabelInterval", function (newValue, oldValue) {
var option = component.config.chartConfig;
if (VSUtils.isEmpty(newValue)) {
delete option.xAxis[0].axisLabel.interval
} else {
option.xAxis[0].axisLabel.interval = newValue
}
scope.component.context.chart.setOption(option, true)
});
watches.push({
key: "component.config.xAxisLabelMultiLineTypeObj",
func: function (option, value) {
component.config.xAxisLabelMultiLineType = value.value
}
});
watches.push({
key: "component.config.xAxisValueType",
func: function (option, value) {}
});
watches.push({
key: "component.config.yAxisTextColor",
func: function (option, value) {
if (isValidColorValue(value)) {
for (var i = 0; i < option.yAxis.length; i++) {
option.yAxis[i].axisLabel.textStyle.color = value
}
}
}
});
watches.push({
key: "component.config.yAxisTextSize",
func: function (option, value) {
for (var i = 0; i < option.yAxis.length; i++) {
option.yAxis[i].axisLabel.textStyle.fontSize = value
}
}
});
watches.push({
key: "component.config.yAxisLineColor",
func: function (option, value) {
if (isValidColorValue(value)) {
for (var i = 0; i < option.yAxis.length; i++) {
option.yAxis[i].axisLine.lineStyle.color = value
}
}
}
});
watches.push({
key: "component.config.yAxisLabelRotate",
func: function (option, value) {
option.yAxis[0].axisLabel.rotate = value
}
});
scope.$watch("component.config.yAxisLabelInterval", function (newValue, oldValue) {
var option = component.config.chartConfig;
if (VSUtils.isEmpty(newValue)) {
delete option.yAxis[0].axisLabel.interval
} else {
option.yAxis[0].axisLabel.interval = newValue
}
scope.component.context.chart.setOption(option, true)
});
watches.push({
key: "component.config.yAxisLineWidth",
func: function (option, value) {
for (var i = 0; i < option.yAxis.length; i++) {
option.yAxis[i].axisLine.lineStyle.width = value
}
}
});
watches.push({
key: "component.config.yAxisSplitLineColor",
func: function (option, value) {
if (isValidColorValue(value)) {
for (var i = 0; i < option.yAxis.length; i++) {
option.yAxis[i].splitLine.lineStyle.color = value
}
}
}
});
watches.push({
key: "component.config.yAxisSplitLineWidth",
func: function (option, value) {
for (var i = 0; i < option.yAxis.length; i++) {
option.yAxis[i].splitLine.lineStyle.width = value
}
}
});
watches.push({
key: "component.config.yAxisSplitNumber",
func: function (option, value) {
for (var i = 0; i < option.yAxis.length; i++) {
option.yAxis[i].splitNumber = value
}
}
});
watches.push({
key: "component.config.yAxisLabelScript",
func: function (option, value) {
scope.$broadcast(event_refreshChartView, {})
}
});
//
watches.push({
key: "component.config.xAxisLabelScript",
func: function (option, value) {
scope.$broadcast(event_refreshChartView, {})
}
});
watches.push({
key: "component.config.yAxis0LineColor",
func: function (option, value) {
if (isValidColorValue(value)) {
option.yAxis[0].axisLine.lineStyle.color = value
}
}
});
watches.push({
key: "component.config.yAxis0LineWidth",
func: function (option, value) {
option.yAxis[0].axisLine.lineStyle.width = value
}
});
watches.push({
key: "component.config.yAxis0Scale",
func: function (option, value) {
if (value != null && value) {
option.yAxis[0].scale = true
} else {
option.yAxis[0].scale = false
}
}
});
watches.push({
key: "component.config.yAxis0Min",
func: function (option, value) {
if (value != null && value.length > 0) {
option.yAxis[0].min = parseFloat(value)
} else {
delete option.yAxis[0].min
}
}
});
watches.push({
key: "component.config.yAxis0Max",
func: function (option, value) {
if (value != null && value.length > 0) {
option.yAxis[0].max = parseFloat(value)
} else {
delete option.yAxis[0].max
}
}
});
watches.push({
key: "component.config.yAxis0Gap",
func: function (option, value) {
if (value != null && value.length > 0) {
var tempValue = "" + value;
if (tempValue.indexOf(",") > 0) {
var vs = tempValue.split(",");
option.yAxis[0].boundaryGap = [parseFloat(vs[0]), parseFloat(vs[1])]
} else {
option.yAxis[0].boundaryGap = [parseFloat(value), parseFloat(value)]
}
} else {
delete option.yAxis[0].boundaryGap
}
}
});
watches.push({
key: "component.config.yAxis0Unit",
func: function (option, value) {
if (value != null) {
scope.$broadcast(event_refreshChartView, {})
}
}
});
watches.push({
key: "component.config.yAxis0ValueType",
func: function (option, value) {
if (value != null) {
scope.$broadcast(event_refreshChartView, {})
}
}
});
watches.push({
key: "component.config.yAxis0Digit",
func: function (option, value) {
if (value != null) {
scope.$broadcast(event_refreshChartView, {})
}
}
});
watches.push({
key: "component.config.yAxis1Scale",
func: function (option, value) {
if (value != null && value) {
option.yAxis[1].scale = true
} else {
option.yAxis[1].scale = false
}
}
});
watches.push({
key: "component.config.yAxis1Min",
func: function (option, value) {
if (option.yAxis.length > 1) {
if (value != null && value.length > 0) {
option.yAxis[1].min = value
} else {
delete option.yAxis[1].min
}
}
}
});
watches.push({
key: "component.config.yAxis1Max",
func: function (option, value) {
if (option.yAxis.length > 1) {
if (value != null && value.length > 0) {
option.yAxis[1].max = value
} else {
delete option.yAxis[1].max
}
}
}
});
watches.push({
key: "component.config.yAxis1LineColor",
func: function (option, value) {
if (isValidColorValue(value)) {
option.yAxis[1].axisLine.lineStyle.color = value
}
}
});
watches.push({
key: "component.config.yAxis1LineWidth",
func: function (option, value) {
option.yAxis[1].axisLine.lineStyle.width = value
}
});
watches.push({
key: "component.config.yAxis2Scale",
func: function (option, value) {
if (value != null && value) {
option.yAxis[2].scale = true
} else {
option.yAxis[2].scale = false
}
}
});
watches.push({
key: "component.config.yAxis2Min",
func: function (option, value) {
if (option.yAxis.length > 1) {
if (value != null && value.length > 0) {
option.yAxis[2].min = value
} else {
delete option.yAxis[2].min
}
}
}
});
watches.push({
key: "component.config.yAxis2Max",
func: function (option, value) {
if (option.yAxis.length > 1) {
if (value != null && value.length > 0) {
option.yAxis[2].max = value
} else {
delete option.yAxis[2].max
}
}
}
});
watches.push({
key: "component.config.yAxis2LineColor",
func: function (option, value) {
if (isValidColorValue(value)) {
option.yAxis[2].axisLine.lineStyle.color = value
}
}
});
watches.push({
key: "component.config.yAxis2LineWidth",
func: function (option, value) {
option.yAxis[2].axisLine.lineStyle.width = value
}
});
watches.push({
key: "component.config.xZhuColor",
func: function (option, value) {
option.series[0].itemStyle.normal.color = value;
option.series[0].itemStyle.normal.borderColor = value
}
});
break
~~~
合并代碼的時候 給你js文件 做參考吧 有些添加代碼的位置 沒辦法寫
- video
- treemap
- mian.html文件注釋
- 配置項tab
- 配置項屬性
- internalRefreshAxisMdelData函數梳理
- 函數配置項-engine文件
- 替換數據源流程
- design.js
- 樹圖
- 下鉆 廢棄
- 人體圖
- 下鉆地圖
- 行列互轉
- 預覽樣式
- logo旁邊的報表名
- echarts 組件生成圖片
- 數據集樣式
- 頭部 黑色head
- 手機 ipad 圖片
- k線圖部分
- 平臺管理css樣式
- 目錄css和平板的邊距
- 設計頁-數據源-目錄
- 數據集 - 查看數據表 -按鈕和目錄樣式
- 報表列表頁按鈕css
- 角色管理頁按鈕css
- 推送通知按鈕css
- 子賬號按鈕css
- 數據連接
- openlayers地圖線路圖
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 說明
- 常用圖標小bug
- echarts 氣泡地圖
- echarts 線路軌跡圖
- 導出pdf
- 可視化sql--css
- 表格滾動
- 主題色
- 時間軸
- 分享彈框
- 管理平臺header和菜單
- 報表平臺和菜單
- 初始化組件顏色
- 其他彈框
- olap分析樣式-廢棄
- 3d地圖柱狀圖
- 關系圖
- olap分析
- 地區地圖
- k線圖相關屬性設置
- 世界地圖
- 時間軸（new）
- 選擇省份下轉地圖
- 選擇省市飛線地圖
- 面積預警地圖默認顏色
- 組件覆層開關組件
- 汽車儀表盤bug
- 雷達圖bug修復不能分享的問題
- 餅狀 條形圖 自動播放
- 臨時用
- 自動輪播
- 方形元素 按鈕浮動報錯
- 面積預警地圖整合可選擇省市區
- 下鉆地圖添加返回按鈕
- 下鉆地圖修復預警bug
- 基本時間組件
- 添加時鐘組件
- 3d地球組件
- 盒須圖
- 組件加載動畫
- 報表背景漸變色
- 主題模板
- 沒用
- 3機房第三方組件
- 設計
- 分享
- 3d機房需要的靜態資源
- cesium地球需要的文件以及樣式
- cesium地球
- 設計頁
- 分享頁
- 圖標條形圖
- 世豪-前端代碼整理
- component.css 文件新添加
- 雜項
- index.jsp
- designer.css 樣式暫時不整理 里面比較雜
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加組件設置頁模板
- 以前的報表頁設置控制器---做個記錄
- 大概修改過的代碼
- 2019-5-8 修改皮膚控制器
- 選擇模板
- 桑基圖2019-11-20
- bug 修正 2019-11-21
- 插圖柱狀圖
- cesiumchart組件
- gis 地圖 聯動 彈框 圖標
- 動態面積圖添加按鈕類配置項
- 玫瑰圖形組件
- cesium 圖形 和three.js 沖突的bug
- gis 地圖 默認圖層
- 網格標簽
- gis 點圖 值域
- gis 面圖 值域
- 按鈕圖標添加提示框
- 百度地圖
- 剩余的組件
- gulp說明文檔
- 色斑圖加透明