(function () {'use strict';
/**
* generate directive link function
*
* @param {Service} $http, http service to make ajax requests from angular
* @param {String} type, chart type
*/
function getLinkFunction($http, theme, util, type) {
return function (scope, element, attrs) {
scope.config = scope.config || {};
var dom = element.find('div')[0], width, height, chart;
var chartEvent = {};
function getSizes(config) {
width = config.width || attrs.width || 320;
height = config.height || attrs.height || 240;
dom.style.width = width + 'px';
dom.style.height = height + 'px';
}
function getOptions(data, config, type) {
// merge default config
config = angular.extend({
showXAxis: true,
showYAxis: true,
showLegend: true,
showGrid: true
}, config);
var grid = {
x: 0,
y: 5,
width: width - 5,
height: height - 35
};
var xAxis = angular.extend({
orient: 'top',
axisLine: { show: false }
}, angular.isObject(config.xAxis) ? config.xAxis : {});
var yAxis = angular.extend({
type: 'value',
orient: 'right',
scale: false,
axisLine: { show: false },
axisLabel: {
formatter: function (v) {
return util.formatKMBT(v);
}
}
}, angular.isObject(config.yAxis) ? config.yAxis : {});
// basic config
var options = {
title: util.getTitle(data, config, type),
tooltip: util.getTooltip(data, config, type),
legend: util.getLegend(data, config, type),
toolbox: angular.extend({ show: false }, angular.isObject(config.toolbox) ? config.toolbox : {}),
xAxis: [ angular.extend(xAxis, util.getAxisTicks(data, config, type)) ],
yAxis: [ yAxis ],
series: util.getSeries(data, config, type)
};
if (!config.showXAxis) {
angular.forEach(options.xAxis, function (axis) {
axis.axisLine = { show: false };
axis.axisLabel = { show: false };
axis.axisTick = { show: false };
});
}
if (!config.showYAxis) {
angular.forEach(options.yAxis, function (axis) {
axis.axisLine = { show: false };
axis.axisLabel = { show: false };
axis.axisTick = { show: false };
});
}
if (!config.showLegend || type === 'gauge' || type === 'map') {
delete options.legend;
}
if (!util.isAxisChart(type)) {
delete options.xAxis;
delete options.yAxis;
}
if (config.dataZoom) {
options.dataZoom = angular.extend({
show: true,
realtime: true
}, config.dataZoom);
}
if (config.dataRange) {
options.dataRange = angular.extend({}, config.dataRange);
}
options.grid = grid;
if (!config.showGrid || type === 'gauge' || type === 'map' || type === 'pie' || type === 'donut') {
delete options.grid;
}
return options;
}
var isAjaxInProgress = false;
var textStyle = {
color: 'red',
fontSize: 36,
fontWeight: 900,
fontFamily: 'Microsoft Yahei, Arial'
};
function setOptions() {
if (!scope.data || !scope.config) {
return;
}
var options;
getSizes(scope.config);
if (!chart) {
chart = echarts.init(dom, theme.get(scope.config.theme || 'macarons'));
}
if (scope.config.event) {
if (!Array.isArray(scope.config.event)) {
scope.config.event = [scope.config.event];
}
if (Array.isArray(scope.config.event)) {
scope.config.event.forEach(function (ele) {
if (!chartEvent[ele.type]) {
chartEvent[ele.type] = true;
chart.on(ele.type, function (param) {
ele.fn(param);
});
}
});
}
}
// string type for data param is assumed to ajax datarequests
if (angular.isString(scope.data)) {
if (isAjaxInProgress) {
return;
}
isAjaxInProgress = true;
// show loading
chart.showLoading({
text: scope.config.loading || '\u594B\u529B\u52A0\u8F7D\u4E2D...',
textStyle: textStyle
});
// fire data request
$http.get(scope.data).success(function (response) {
isAjaxInProgress = false;
chart.hideLoading();
if (response.data) {
options = getOptions(response.data, scope.config, type);
if (scope.config.forceClear) {
chart.clear();
}
if (options.series.length) {
chart.setOption(options);
chart.resize();
} else {
chart.showLoading({
text: scope.config.errorMsg || '\u6CA1\u6709\u6570\u636E',
textStyle: textStyle
});
}
} else {
chart.showLoading({
text: scope.config.emptyMsg || '\u6570\u636E\u52A0\u8F7D\u5931\u8D25',
textStyle: textStyle
});
}
}).error(function (response) {
isAjaxInProgress = false;
chart.showLoading({
text: scope.config.emptyMsg || '\u6570\u636E\u52A0\u8F7D\u5931\u8D25',
textStyle: textStyle
});
}); // if data is avaliable, render immediately
} else {
options = getOptions(scope.data, scope.config, type);
if (scope.config.forceClear) {
chart.clear();
}
if (options.series.length) {
chart.setOption(options);
chart.resize();
} else {
chart.showLoading({
text: scope.config.errorMsg || '\u6CA1\u6709\u6570\u636E',
textStyle: textStyle
});
}
}
}
// update when charts config changes
scope.$watch(function () {
return scope.config;
}, function (value) {
if (value) {
setOptions();
}
});
};
}
/**
* add directives
*/
angular.module('angular-echarts', ['angular-echarts.theme', 'angular-echarts.util']).directive('lineChart', ['$http', 'theme', 'util', function ($http, theme, util) {
return {
restrict: 'EA',
template: '
',
scope: {
config: '=config',
data: '=data'
},
link: getLinkFunction($http, theme, util, 'line')
};
}]).directive('barChart', ['$http', 'theme', 'util', function ($http, theme, util) {
return {
restrict: 'EA',
template: '',
scope: {
config: '=config',
data: '=data'
},
link: getLinkFunction($http, theme, util, 'bar')
};
}]).directive('areaChart', ['$http', 'theme', 'util', function ($http, theme, util) {
return {
restrict: 'EA',
template: '',
scope: {
config: '=config',
data: '=data'
},
link: getLinkFunction($http, theme, util, 'area')
};
}]).directive('pieChart', ['$http', 'theme', 'util', function ($http, theme, util) {
return {
restrict: 'EA',
template: '',
scope: {
config: '=config',
data: '=data'
},
link: getLinkFunction($http, theme, util, 'pie')
};
}]).directive('donutChart', ['$http', 'theme', 'util', function ($http, theme, util) {
return {
restrict: 'EA',
template: '',
scope: {
config: '=config',
data: '=data'
},
link: getLinkFunction($http, theme, util, 'donut')
};
}]).directive('gaugeChart', ['$http', 'theme', 'util', function ($http, theme, util) {
return {
restrict: 'EA',
template: '',
scope: {
config: '=config',
data: '=data'
},
link: getLinkFunction($http, theme, util, 'gauge')
};
}]).directive('mapChart', ['$http', 'theme', 'util', function ($http, theme, util) {
return {
restrict: 'EA',
template: '',
scope: {
config: '=config',
data: '=data'
},
link: getLinkFunction($http, theme, util, 'map')
};
}]);
'use strict';
/**
* util services
*/
angular.module('angular-echarts.util', []).factory('util', function () {
function isPieChart(type) {
return ['pie', 'donut'].indexOf(type) > -1;
}
function isMapChart(type) {
return ['map'].indexOf(type) > -1;
}
function isAxisChart(type) {
return ['line', 'bar', 'area'].indexOf(type) > -1;
}
/**
* get x axis ticks from the 1st serie
*/
function getAxisTicks(data, config, type) {
var ticks = [];
if (data[0]) {
angular.forEach(data[0].datapoints, function (datapoint) {
ticks.push(datapoint.x);
});
}
return {
type: 'category',
boundaryGap: type === 'bar',
data: ticks
};
}
/**
* get series config
*
* @param {Array} data serie data
* @param {Object} config options
* @param {String} chart type
*/
function getSeries(data, config, type) {
var series = [];
angular.forEach(data, function (serie) {
// datapoints for line, area, bar chart
var datapoints = [];
angular.forEach(serie.datapoints, function (datapoint) {
datapoints.push(datapoint.y);
});
var conf = {
type: type || 'line',
name: serie.name,
data: datapoints
};
// area chart is actually line chart with special itemStyle
if (type === 'area') {
conf.type = 'line';
conf.itemStyle = { normal: { areaStyle: { type: 'default' } } };
}
// gauge chart need many special config
if (type === 'gauge') {
conf = angular.extend(conf, {
splitNumber: 10,
// 分割段数,默认为5
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: {
// 坐标轴小标记
splitNumber: 10,
// 每份split细分多少段
length: 12,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
// 坐标轴文本标签,详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
},
splitLine: {
// 分隔线
show: true,
// 默认显示,属性show控制显示与否
length: 30,
// 属性length控制线长
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: { width: 5 },
title: {
show: true,
offsetCenter: [0, '-40%'],
// x, y,单位px
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder'
}
},
detail: {
formatter: '{value}%',
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto',
fontWeight: 'bolder'
}
}
}, config.gauge || {});
}
// datapoints for pie chart and gauges are different
if (!isAxisChart(type)) {
conf.data = [];
angular.forEach(serie.datapoints, function (datapoint) {
conf.data.push({
value: datapoint.y,
name: datapoint.x
});
});
}
if (isPieChart(type)) {
// donut charts are actually pie charts
conf.type = 'pie';
// pie chart need special radius, center config
conf.center = config.center || ['40%', '50%'];
conf.radius = config.radius || '60%';
// donut chart require special itemStyle
if (type === 'donut') {
conf.radius = config.radius || ['50%', '70%'];
conf = angular.extend(conf, {
itemStyle: {
normal: {
label: { show: false },
labelLine: { show: false }
},
emphasis: {
label: {
show: true,
position: 'center',
textStyle: {
fontSize: '50',
fontWeight: 'bold'
}
}
}
}
}, config.donut || {});
} else if (type === 'pie') {
conf = angular.extend(conf, {
itemStyle: {
normal: {
label: {
position: 'inner',
formatter: function (a, b, c, d) {
return (d - 0).toFixed(0) + '%';
}
},
labelLine: { show: false }
},
emphasis: {
label: {
show: true,
formatter: '{b}\n{d}%'
}
}
}
}, config.pie || {});
}
}
if (isMapChart(type)) {
conf.type = 'map';
conf = angular.extend(conf, {}, config.map || {});
}
// if stack set to true
if (config.stack) {
conf.stack = 'total';
}
series.push(conf);
});
return series;
}
/**
* get legends from data series
*/
function getLegend(data, config, type) {
var legend = { data: [] };
if (isPieChart(type)) {
if (data[0]) {
angular.forEach(data[0].datapoints, function (datapoint) {
legend.data.push(datapoint.x);
});
}
legend.orient = 'verticle';
legend.x = 'right';
legend.y = 'center';
} else {
angular.forEach(data, function (serie) {
legend.data.push(serie.name);
});
legend.orient = 'verticle';
legend.x = 52;
legend.y = config.subtitle ? 54 : 30;
}
return angular.extend(legend, config.legend || {});
}
/**
* get tooltip config
*/
function getTooltip(data, config, type) {
var tooltip = {};
switch (type) {
case 'line':
case 'area':
tooltip.trigger = 'axis';
break;
case 'pie':
case 'donut':
case 'bar':
case 'map':
case 'gauge':
tooltip.trigger = 'item';
break;
}
if (type === 'pie') {
tooltip.formatter = '{a}
{b}: {c} ({d}%)';
}
if (type === 'map') {
tooltip.formatter = '{b}';
}
return angular.extend(tooltip, angular.isObject(config.tooltip) ? config.tooltip : {});
}
function getTitle(data, config, type) {
if (angular.isObject(config.title)) {
return config.title;
}
return isPieChart(type) ? null : {
text: config.title,
subtext: config.subtitle || '',
x: 50
};
}
function formatKMBT(y, formatter) {
if (!formatter) {
formatter = function (v) {
return Math.round(v * 100) / 100;
};
}
y = Math.abs(y);
if (y >= 1000000000000) {
return formatter(y / 1000000000000) + 'T';
} else if (y >= 1000000000) {
return formatter(y / 1000000000) + 'B';
} else if (y >= 1000000) {
return formatter(y / 1000000) + 'M';
} else if (y >= 1000) {
return formatter(y / 1000) + 'K';
} else if (y < 1 && y > 0) {
return formatter(y);
} else if (y === 0) {
return '';
} else {
return formatter(y);
}
}
return {
isPieChart: isPieChart,
isAxisChart: isAxisChart,
getAxisTicks: getAxisTicks,
getSeries: getSeries,
getLegend: getLegend,
getTooltip: getTooltip,
getTitle: getTitle,
formatKMBT: formatKMBT
};
});
'use strict';
/**
* theme services
* posible themes: infographic macarons shine dark blue green red gray default
*/
angular.module('angular-echarts.theme', []).factory('theme', ['infographic', 'macarons', 'shine', 'dark', 'blue', 'green', 'red', function (infographic, macarons, shine, dark, blue, green, red, grey) {
var themes = {
infographic: infographic,
macarons: macarons,
shine: shine,
dark: dark,
blue: blue,
green: green,
red: red,
grey: grey,
};
return {
get: function (name) {
return themes[name] ? themes[name] : {};
},
};
}]);
'use strict';
/**
* blue theme
*/
angular.module('angular-echarts.theme').factory('blue', function () {
return {
// 默认色板
color: [
'#1790cf','#1bb2d8','#99d2dd','#88b0bb',
'#1c7099','#038cc4','#75abd0','#afd6dd'
],
// 图表标题
title: {
itemGap: 8,
textStyle: {
fontWeight: 'normal',
color: '#1790cf'
}
},
// 值域
dataRange: { color: ['#1178ad','#72bbd0'] },
// 工具箱
toolbox: { color: ['#1790cf','#1790cf','#1790cf','#1790cf'] },
// 提示框
tooltip: {
backgroundColor: 'rgba(0,0,0,0.5)',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'line',
// 默认为直线,可选为:'line' | 'shadow'
lineStyle: {
// 直线指示器样式设置
color: '#1790cf',
type: 'dashed'
},
crossStyle: { color: '#1790cf' },
shadowStyle: {
// 阴影指示器样式设置
color: 'rgba(200,200,200,0.3)'
}
}
},
// 区域缩放控制器
dataZoom: {
dataBackgroundColor: '#eee',
// 数据背景颜色
fillerColor: 'rgba(144,197,237,0.2)',
// 填充颜色
handleColor: '#1790cf' // 手柄颜色
},
grid: { borderWidth: 0 },
// 类目轴
categoryAxis: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#1790cf'
}
},
splitLine: {
// 分隔线
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
},
// 数值型坐标轴默认参数
valueAxis: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#1790cf'
}
},
splitArea: {
show: true,
areaStyle: { color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)'] }
},
splitLine: {
// 分隔线
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
},
timeline: {
lineStyle: { color: '#1790cf' },
controlStyle: {
normal: { color: '#1790cf' },
emphasis: { color: '#1790cf' }
}
},
// K线图默认参数
k: {
itemStyle: {
normal: {
color: '#1bb2d8',
// 阳线填充颜色
color0: '#99d2dd',
// 阴线填充颜色
lineStyle: {
width: 1,
color: '#1c7099',
// 阳线边框颜色
color0: '#88b0bb' // 阴线边框颜色
}
}
}
},
map: {
itemStyle: {
normal: {
areaStyle: { color: '#ddd' },
label: { textStyle: { color: '#c12e34' } }
},
emphasis: {
// 也是选中样式
areaStyle: { color: '#99d2dd' },
label: { textStyle: { color: '#c12e34' } }
}
}
},
force: { itemStyle: { normal: { linkStyle: { strokeColor: '#1790cf' } } } },
chord: {
padding: 4,
itemStyle: {
normal: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
},
emphasis: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
}
}
},
gauge: {
startAngle: 225,
endAngle: -45,
axisLine: {
// 坐标轴线
show: true,
// 默认显示,属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.2, '#1bb2d8'],[0.8, '#1790cf'],[1, '#1c7099']],
width: 8
}
},
axisTick: {
// 坐标轴小标记
splitNumber: 10,
// 每份split细分多少段
length: 12,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
// 坐标轴文本标签,详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
},
splitLine: {
// 分隔线
length: 18,
// 属性length控制线长
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
length: '90%',
color: 'auto'
},
title: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
detail: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
}
},
textStyle: { fontFamily: '\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif' }
};
});
'use strict';
/**
* dark theme
*/
angular.module('angular-echarts.theme').factory('dark', function () {
return {
// 全图默认背景
backgroundColor: '#1b1b1b',
// 默认色板
color: [
'#FE8463','#9BCA63','#FAD860','#60C0DD','#0084C6',
'#D7504B','#C6E579','#26C0C0','#F0805A','#F4E001',
'#B5C334'
],
// 图表标题
title: {
itemGap: 8,
textStyle: {
fontWeight: 'normal',
color: '#fff' // 主标题文字颜色
}
},
// 图例
legend: {
itemGap: 8,
textStyle: {
color: '#ccc' // 图例文字颜色
}
},
// 值域
dataRange: {
itemWidth: 15,
color: ['#FFF808','#21BCF9'],
textStyle: {
color: '#ccc' // 值域文字颜色
}
},
toolbox: {
color: ['#fff', '#fff', '#fff', '#fff'],
effectiveColor: '#FE8463',
disableColor: '#666',
itemGap: 8
},
// 提示框
tooltip: {
backgroundColor: 'rgba(250,250,250,0.8)',
// 提示背景颜色,默认为透明度为0.7的黑色
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'line',
// 默认为直线,可选为:'line' | 'shadow'
lineStyle: {
// 直线指示器样式设置
color: '#aaa'
},
crossStyle: { color: '#aaa' },
shadowStyle: {
// 阴影指示器样式设置
color: 'rgba(200,200,200,0.2)'
}
},
textStyle: { color: '#333' }
},
// 区域缩放控制器
dataZoom: {
dataBackgroundColor: '#555',
// 数据背景颜色
fillerColor: 'rgba(200,200,200,0.2)',
// 填充颜色
handleColor: '#eee' // 手柄颜色
},
// 网格
grid: { borderWidth: 0 },
// 类目轴
categoryAxis: {
axisLine: {
// 坐标轴线
show: false
},
axisTick: {
// 坐标轴小标记
show: false
},
axisLabel: {
// 坐标轴文本标签,详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#ccc'
}
},
splitLine: {
// 分隔线
show: false
}
},
// 数值型坐标轴默认参数
valueAxis: {
axisLine: {
// 坐标轴线
show: false
},
axisTick: {
// 坐标轴小标记
show: false
},
axisLabel: {
// 坐标轴文本标签,详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#ccc'
}
},
splitLine: {
// 分隔线
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#aaa'],
type: 'dashed'
}
},
splitArea: {
// 分隔区域
show: false
}
},
polar: {
name: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#ccc'
}
},
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#ddd'
}
},
splitArea: {
show: true,
areaStyle: { color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)'] }
},
splitLine: { lineStyle: { color: '#ddd' } }
},
timeline: {
label: { textStyle: { color: '#ccc' } },
lineStyle: { color: '#aaa' },
controlStyle: {
normal: { color: '#fff' },
emphasis: { color: '#FE8463' }
},
symbolSize: 3
},
// 折线图默认参数
line: { smooth: true },
// K线图默认参数
k: {
itemStyle: {
normal: {
color: '#FE8463',
// 阳线填充颜色
color0: '#9BCA63',
// 阴线填充颜色
lineStyle: {
width: 1,
color: '#FE8463',
// 阳线边框颜色
color0: '#9BCA63' // 阴线边框颜色
}
}
}
},
// 雷达图默认参数
radar: {
symbol: 'emptyCircle',
// 图形类型
symbolSize: 3 //symbol: null, // 拐点图形类型
//symbolRotate: null, // 图形旋转控制
},
pie: {
itemStyle: {
normal: {
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.5)'
},
emphasis: {
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 1)'
}
}
},
map: {
itemStyle: {
normal: {
borderColor: 'rgba(255, 255, 255, 0.5)',
areaStyle: { color: '#ddd' },
label: { textStyle: { color: '#ccc' } }
},
emphasis: {
// 也是选中样式
areaStyle: { color: '#FE8463' },
label: { textStyle: { color: 'ccc' } }
}
}
},
force: { itemStyle: { normal: { linkStyle: { strokeColor: '#fff' } } } },
chord: {
padding: 4,
itemStyle: {
normal: {
lineStyle: {
width: 1,
color: 'rgba(228, 228, 228, 0.2)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(228, 228, 228, 0.2)'
}
}
},
emphasis: {
lineStyle: {
width: 1,
color: 'rgba(228, 228, 228, 0.9)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(228, 228, 228, 0.9)'
}
}
}
}
},
gauge: {
startAngle: 225,
endAngle: -45,
axisLine: {
// 坐标轴线
show: true,
// 默认显示,属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.2, '#9BCA63'],[0.8, '#60C0DD'],[1, '#D7504B']],
width: 3,
shadowColor: '#fff',
//默认透明
shadowBlur: 10
}
},
axisTick: {
// 坐标轴小标记
length: 15,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto',
shadowColor: '#fff',
//默认透明
shadowBlur: 10
}
},
axisLabel: {
// 坐标轴小标记
textStyle: {
// 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff',
//默认透明
shadowBlur: 10
}
},
splitLine: {
// 分隔线
length: 25,
// 属性length控制线长
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
width: 3,
color: '#fff',
shadowColor: '#fff',
//默认透明
shadowBlur: 10
}
},
pointer: {
// 分隔线
shadowColor: '#fff',
//默认透明
shadowBlur: 5
},
title: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
color: '#fff',
shadowColor: '#fff',
//默认透明
shadowBlur: 10
}
},
detail: {
shadowColor: '#fff',
//默认透明
shadowBlur: 5,
offsetCenter: [0, '50%'],
// x, y,单位px
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
}
},
funnel: {
itemStyle: {
normal: {
borderColor: 'rgba(255, 255, 255, 0.5)',
borderWidth: 1
},
emphasis: {
borderColor: 'rgba(255, 255, 255, 1)',
borderWidth: 1
}
}
},
textStyle: { fontFamily: '\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif' }
};
});
'use strict';
/**
* green theme
*/
angular.module('angular-echarts.theme').factory('green', function () {
return {
// 默认色板
color: [
'#408829','#68a54a','#a9cba2','#86b379',
'#397b29','#8abb6f','#759c6a','#bfd3b7'
],
// 图表标题
title: {
itemGap: 8,
textStyle: {
fontWeight: 'normal',
color: '#408829'
}
},
// 值域
dataRange: { color: ['#1f610a','#97b58d'] },
// 工具箱
toolbox: { color: ['#408829','#408829','#408829','#408829'] },
// 提示框
tooltip: {
backgroundColor: 'rgba(0,0,0,0.5)',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'line',
// 默认为直线,可选为:'line' | 'shadow'
lineStyle: {
// 直线指示器样式设置
color: '#408829',
type: 'dashed'
},
crossStyle: { color: '#408829' },
shadowStyle: {
// 阴影指示器样式设置
color: 'rgba(200,200,200,0.3)'
}
}
},
// 区域缩放控制器
dataZoom: {
dataBackgroundColor: '#eee',
// 数据背景颜色
fillerColor: 'rgba(64,136,41,0.2)',
// 填充颜色
handleColor: '#408829' // 手柄颜色
},
grid: { borderWidth: 0 },
// 类目轴
categoryAxis: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#408829'
}
},
splitLine: {
// 分隔线
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
},
// 数值型坐标轴默认参数
valueAxis: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#408829'
}
},
splitArea: {
show: true,
areaStyle: { color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)'] }
},
splitLine: {
// 分隔线
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
},
timeline: {
lineStyle: { color: '#408829' },
controlStyle: {
normal: { color: '#408829' },
emphasis: { color: '#408829' }
}
},
// K线图默认参数
k: {
itemStyle: {
normal: {
color: '#68a54a',
// 阳线填充颜色
color0: '#a9cba2',
// 阴线填充颜色
lineStyle: {
width: 1,
color: '#408829',
// 阳线边框颜色
color0: '#86b379' // 阴线边框颜色
}
}
}
},
map: {
itemStyle: {
normal: {
areaStyle: { color: '#ddd' },
label: { textStyle: { color: '#c12e34' } }
},
emphasis: {
// 也是选中样式
areaStyle: { color: '#99d2dd' },
label: { textStyle: { color: '#c12e34' } }
}
}
},
force: { itemStyle: { normal: { linkStyle: { strokeColor: '#408829' } } } },
chord: {
padding: 4,
itemStyle: {
normal: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
},
emphasis: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
}
}
},
gauge: {
startAngle: 225,
endAngle: -45,
axisLine: {
// 坐标轴线
show: true,
// 默认显示,属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.2, '#86b379'],[0.8, '#68a54a'],[1, '#408829']],
width: 8
}
},
axisTick: {
// 坐标轴小标记
splitNumber: 10,
// 每份split细分多少段
length: 12,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
// 坐标轴文本标签,详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
},
splitLine: {
// 分隔线
length: 18,
// 属性length控制线长
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
length: '90%',
color: 'auto'
},
title: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
detail: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
}
},
textStyle: { fontFamily: '\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif' }
};
});
'use strict';
/**
* infographic theme
*/
angular.module('angular-echarts.theme').factory('infographic', function () {
return {
// 默认色板
color: [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
],
// 图表标题
title: {
itemGap: 8,
textStyle: {
fontWeight: 'normal',
color: '#27727B' // 主标题文字颜色
}
},
// 图例
legend: { itemGap: 8 },
// 值域
dataRange: {
x: 'right',
y: 'center',
itemWidth: 5,
itemHeight: 25,
color: ['#C1232B','#FCCE10']
},
toolbox: {
color: [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
],
effectiveColor: '#ff4500',
itemGap: 8
},
// 提示框
tooltip: {
backgroundColor: 'rgba(50,50,50,0.5)',
// 提示背景颜色,默认为透明度为0.7的黑色
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'line',
// 默认为直线,可选为:'line' | 'shadow'
lineStyle: {
// 直线指示器样式设置
color: '#27727B',
type: 'dashed'
},
crossStyle: { color: '#27727B' },
shadowStyle: {
// 阴影指示器样式设置
color: 'rgba(200,200,200,0.3)'
}
}
},
// 区域缩放控制器
dataZoom: {
dataBackgroundColor: 'rgba(181,195,52,0.3)',
// 数据背景颜色
fillerColor: 'rgba(181,195,52,0.2)',
// 填充颜色
handleColor: '#27727B'
},
// 网格
grid: { borderWidth: 0 },
// 类目轴
categoryAxis: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#27727B'
}
},
splitLine: {
// 分隔线
show: false
}
},
// 数值型坐标轴默认参数
valueAxis: {
axisLine: {
// 坐标轴线
show: false
},
splitArea: { show: false },
splitLine: {
// 分隔线
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#ccc'],
type: 'dashed'
}
}
},
polar: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#ddd'
}
},
splitArea: {
show: true,
areaStyle: { color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)'] }
},
splitLine: { lineStyle: { color: '#ddd' } }
},
timeline: {
lineStyle: { color: '#27727B' },
controlStyle: {
normal: { color: '#27727B' },
emphasis: { color: '#27727B' }
},
symbol: 'emptyCircle',
symbolSize: 3
},
// 柱形图默认参数
bar: {
itemStyle: {
normal: { borderRadius: 0 },
emphasis: { borderRadius: 0 }
}
},
// 折线图默认参数
line: {
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
lineStyle: { width: 3 }
},
emphasis: { borderWidth: 0 }
},
symbol: 'circle',
// 拐点图形类型
symbolSize: 3.5 // 拐点图形大小
},
// K线图默认参数
k: {
itemStyle: {
normal: {
color: '#C1232B',
// 阳线填充颜色
color0: '#B5C334',
// 阴线填充颜色
lineStyle: {
width: 1,
color: '#C1232B',
// 阳线边框颜色
color0: '#B5C334' // 阴线边框颜色
}
}
}
},
// 散点图默认参数
scatter: {
itemdStyle: {
normal: {
borderWidth: 1,
borderColor: 'rgba(200,200,200,0.5)'
},
emphasis: { borderWidth: 0 }
},
symbol: 'star4',
// 图形类型
symbolSize: 4 // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
},
// 雷达图默认参数
radar: {
symbol: 'emptyCircle',
// 图形类型
symbolSize: 3 //symbol: null, // 拐点图形类型
//symbolRotate: null, // 图形旋转控制
},
map: {
itemStyle: {
normal: {
areaStyle: { color: '#ddd' },
label: { textStyle: { color: '#C1232B' } }
},
emphasis: {
// 也是选中样式
areaStyle: { color: '#fe994e' },
label: { textStyle: { color: 'rgb(100,0,0)' } }
}
}
},
force: { itemStyle: { normal: { linkStyle: { strokeColor: '#27727B' } } } },
chord: {
padding: 4,
itemStyle: {
normal: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
},
emphasis: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
}
}
},
gauge: {
center: ['50%','80%'],
radius: '100%',
startAngle: 180,
endAngle: 0,
axisLine: {
// 坐标轴线
show: true,
// 默认显示,属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.2, '#B5C334'],[0.8, '#27727B'],[1, '#C1232B']],
width: '40%'
}
},
axisTick: {
// 坐标轴小标记
splitNumber: 2,
// 每份split细分多少段
length: 5,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: '#fff'
}
},
axisLabel: {
// 坐标轴文本标签,详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#fff',
fontWeight: 'bolder'
}
},
splitLine: {
// 分隔线
length: '5%',
// 属性length控制线长
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: '#fff'
}
},
pointer: {
width: '40%',
length: '80%',
color: '#fff'
},
title: {
offsetCenter: [0, -20],
// x, y,单位px
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto',
fontSize: 20
}
},
detail: {
offsetCenter: [0, 0],
// x, y,单位px
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto',
fontSize: 40
}
}
},
textStyle: { fontFamily: '\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif' }
};
});
'use strict';
/**
* macarons theme
*/
angular.module('angular-echarts.theme').factory('macarons', function () {
return {
// 默认色板
color: [
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
],
// 图表标题
title: {
itemGap: 8,
textStyle: {
fontWeight: 'normal',
color: '#008acd' // 主标题文字颜色
}
},
// 图例
legend: { itemGap: 8 },
// 值域
dataRange: {
itemWidth: 15,
//color:['#1e90ff','#afeeee']
color: ['#2ec7c9','#b6a2de']
},
toolbox: {
color: ['#1e90ff', '#1e90ff', '#1e90ff', '#1e90ff'],
effectiveColor: '#ff4500',
itemGap: 8
},
// 提示框
tooltip: {
backgroundColor: 'rgba(50,50,50,0.5)',
// 提示背景颜色,默认为透明度为0.7的黑色
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'line',
// 默认为直线,可选为:'line' | 'shadow'
lineStyle: {
// 直线指示器样式设置
color: '#008acd',
type: 'dashed',
width: 1
},
crossStyle: {
color: '#008acd',
width: 1
},
shadowStyle: {
// 阴影指示器样式设置
color: 'rgba(200,200,200,0.2)'
}
}
},
// 区域缩放控制器
dataZoom: {
dataBackgroundColor: '#efefff',
// 数据背景颜色
fillerColor: 'rgba(182,162,222,0.2)',
// 填充颜色
handleColor: '#008acd' // 手柄颜色
},
// 网格
grid: { borderColor: '#eee' },
// 类目轴
categoryAxis: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#008acd',
width: 1
}
},
axisLabel: {
// label
skipFirst: true,
margin: 3,
textStyle: { color: '#999999' }
},
axisTick: {
// 坐标轴线
show: false,
lineStyle: {
// 属性lineStyle控制线条样式
color: '#008acd',
width: 1
}
},
splitLine: {
// 分隔线
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
},
// 数值型坐标轴默认参数
valueAxis: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#008acd',
width: 1
}
},
axisLabel: {
// label
skipFirst: true,
margin: 3,
textStyle: { color: '#999999' }
},
axisTick: {
// 坐标轴线
show: false,
lineStyle: {
// 属性lineStyle控制线条样式
color: '#008acd',
width: 1
}
},
splitArea: {
show: true,
areaStyle: { color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)'] }
},
splitLine: {
// 分隔线
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
},
polar: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#ddd'
}
},
splitArea: {
show: true,
areaStyle: { color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)'] }
},
splitLine: { lineStyle: { color: '#ddd' } }
},
timeline: {
lineStyle: { color: '#008acd' },
controlStyle: {
normal: { color: '#008acd' },
emphasis: { color: '#008acd' }
},
symbol: 'emptyCircle',
symbolSize: 3
},
// 柱形图默认参数
bar: {
itemStyle: {
normal: { borderRadius: 5 },
emphasis: { borderRadius: 5 }
}
},
// 折线图默认参数
line: {
smooth: false,
symbol: 'circle',
// 拐点图形类型
symbolSize: 3 // 拐点图形大小
},
// K线图默认参数
k: {
itemStyle: {
normal: {
color: '#d87a80',
// 阳线填充颜色
color0: '#2ec7c9',
// 阴线填充颜色
lineStyle: {
width: 1,
color: '#d87a80',
// 阳线边框颜色
color0: '#2ec7c9' // 阴线边框颜色
}
}
}
},
// 散点图默认参数
scatter: {
symbol: 'circle',
// 图形类型
symbolSize: 4 // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
},
// 雷达图默认参数
radar: {
symbol: 'emptyCircle',
// 图形类型
symbolSize: 3 //symbol: null, // 拐点图形类型
//symbolRotate: null, // 图形旋转控制
},
map: {
itemStyle: {
normal: {
areaStyle: { color: '#ddd' },
label: { textStyle: { color: '#d87a80' } }
},
emphasis: {
// 也是选中样式
areaStyle: { color: '#fe994e' },
label: { textStyle: { color: 'rgb(100,0,0)' } }
}
}
},
force: { itemStyle: { normal: { linkStyle: { strokeColor: '#1e90ff' } } } },
chord: {
padding: 4,
itemStyle: {
normal: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
},
emphasis: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
}
}
},
gauge: {
startAngle: 225,
endAngle: -45,
axisLine: {
// 坐标轴线
show: true,
// 默认显示,属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
width: 10
}
},
axisTick: {
// 坐标轴小标记
splitNumber: 10,
// 每份split细分多少段
length: 15,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
// 坐标轴文本标签,详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
},
splitLine: {
// 分隔线
length: 22,
// 属性length控制线长
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
width: 5,
color: 'auto'
},
title: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
detail: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
}
},
textStyle: { fontFamily: '\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif' }
};
});
'use strict';
/**
* red theme
*/
angular.module('angular-echarts.theme').factory('red', function () {
return {
// 默认色板
color: [
'#d8361b','#f16b4c','#f7b4a9','#d26666',
'#99311c','#c42703','#d07e75'
],
// 图表标题
title: {
itemGap: 8,
textStyle: {
fontWeight: 'normal',
color: '#d8361b'
}
},
// 值域
dataRange: { color: ['#bd0707','#ffd2d2'] },
// 工具箱
toolbox: { color: ['#d8361b','#d8361b','#d8361b','#d8361b'] },
// 提示框
tooltip: {
backgroundColor: 'rgba(0,0,0,0.5)',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'line',
// 默认为直线,可选为:'line' | 'shadow'
lineStyle: {
// 直线指示器样式设置
color: '#d8361b',
type: 'dashed'
},
crossStyle: { color: '#d8361b' },
shadowStyle: {
// 阴影指示器样式设置
color: 'rgba(200,200,200,0.3)'
}
}
},
// 区域缩放控制器
dataZoom: {
dataBackgroundColor: '#eee',
// 数据背景颜色
fillerColor: 'rgba(216,54,27,0.2)',
// 填充颜色
handleColor: '#d8361b' // 手柄颜色
},
grid: { borderWidth: 0 },
// 类目轴
categoryAxis: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#d8361b'
}
},
splitLine: {
// 分隔线
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
},
// 数值型坐标轴默认参数
valueAxis: {
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: '#d8361b'
}
},
splitArea: {
show: true,
areaStyle: { color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)'] }
},
splitLine: {
// 分隔线
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
},
timeline: {
lineStyle: { color: '#d8361b' },
controlStyle: {
normal: { color: '#d8361b' },
emphasis: { color: '#d8361b' }
}
},
// K线图默认参数
k: {
itemStyle: {
normal: {
color: '#f16b4c',
// 阳线填充颜色
color0: '#f7b4a9',
// 阴线填充颜色
lineStyle: {
width: 1,
color: '#d8361b',
// 阳线边框颜色
color0: '#d26666' // 阴线边框颜色
}
}
}
},
map: {
itemStyle: {
normal: {
areaStyle: { color: '#ddd' },
label: { textStyle: { color: '#c12e34' } }
},
emphasis: {
// 也是选中样式
areaStyle: { color: '#99d2dd' },
label: { textStyle: { color: '#c12e34' } }
}
}
},
force: { itemStyle: { normal: { linkStyle: { strokeColor: '#d8361b' } } } },
chord: {
padding: 4,
itemStyle: {
normal: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
},
emphasis: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
}
}
},
gauge: {
startAngle: 225,
endAngle: -45,
axisLine: {
// 坐标轴线
show: true,
// 默认显示,属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.2, '#f16b4c'],[0.8, '#d8361b'],[1, '#99311c']],
width: 8
}
},
axisTick: {
// 坐标轴小标记
splitNumber: 10,
// 每份split细分多少段
length: 12,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
// 坐标轴文本标签,详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
},
splitLine: {
// 分隔线
length: 18,
// 属性length控制线长
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
length: '90%',
color: 'auto'
},
title: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
detail: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
}
},
textStyle: { fontFamily: '\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif' }
};
});
'use strict';
/**
* shine theme
*/
angular.module('angular-echarts.theme').factory('shine', function () {
return {
// 默认色板
color: [
'#c12e34','#e6b600','#0098d9','#2b821d',
'#005eaa','#339ca8','#cda819','#32a487'
],
// 图表标题
title: {
itemGap: 8,
textStyle: { fontWeight: 'normal' }
},
// 图例
legend: { itemGap: 8 },
// 值域
dataRange: {
itemWidth: 15,
// 值域图形宽度,线性渐变水平布局宽度为该值 * 10
color: ['#1790cf','#a2d4e6']
},
// 工具箱
toolbox: {
color: ['#06467c','#00613c','#872d2f','#c47630'],
itemGap: 8
},
// 提示框
tooltip: { backgroundColor: 'rgba(0,0,0,0.6)' },
// 区域缩放控制器
dataZoom: {
dataBackgroundColor: '#dedede',
// 数据背景颜色
fillerColor: 'rgba(154,217,247,0.2)',
// 填充颜色
handleColor: '#005eaa' // 手柄颜色
},
grid: { borderWidth: 0 },
// 类目轴
categoryAxis: {
axisLine: {
// 坐标轴线
show: false
},
axisTick: {
// 坐标轴小标记
show: false
}
},
// 数值型坐标轴默认参数
valueAxis: {
axisLine: {
// 坐标轴线
show: false
},
axisTick: {
// 坐标轴小标记
show: false
},
splitArea: {
// 分隔区域
show: true,
// 默认不显示,属性show控制显示与否
areaStyle: {
// 属性areaStyle(详见areaStyle)控制区域样式
color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']
}
}
},
timeline: {
lineStyle: { color: '#005eaa' },
controlStyle: {
normal: { color: '#005eaa' },
emphasis: { color: '#005eaa' }
}
},
// K线图默认参数
k: {
itemStyle: {
normal: {
color: '#c12e34',
// 阳线填充颜色
color0: '#2b821d',
// 阴线填充颜色
lineStyle: {
width: 1,
color: '#c12e34',
// 阳线边框颜色
color0: '#2b821d' // 阴线边框颜色
}
}
}
},
map: {
itemStyle: {
normal: {
areaStyle: { color: '#ddd' },
label: { textStyle: { color: '#c12e34' } }
},
emphasis: {
// 也是选中样式
areaStyle: { color: '#e6b600' },
label: { textStyle: { color: '#c12e34' } }
}
}
},
force: { itemStyle: { normal: { linkStyle: { strokeColor: '#005eaa' } } } },
chord: {
padding: 4,
itemStyle: {
normal: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
},
emphasis: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
}
}
},
gauge: {
startAngle: 225,
endAngle: -45,
axisLine: {
// 坐标轴线
show: true,
// 默认显示,属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.2, '#2b821d'],[0.8, '#005eaa'],[1, '#c12e34']],
width: 5
}
},
axisTick: {
// 坐标轴小标记
splitNumber: 10,
// 每份split细分多少段
length: 8,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
// 坐标轴文本标签,详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
},
splitLine: {
// 分隔线
length: 12,
// 属性length控制线长
lineStyle: {
// 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
length: '90%',
width: 3,
color: 'auto'
},
title: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
detail: {
textStyle: {
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
}
},
textStyle: { fontFamily: '\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif' }
};
});})();