|
|
@@ -1,589 +1,894 @@
|
|
|
//从左往右颜色渐变
|
|
|
export const GradualChange = (color1, color2) => {
|
|
|
- return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
|
- { offset: 1, color: color1 + '' },
|
|
|
- { offset: 0, color: color2 + '' || color1 + '' }
|
|
|
- ]);
|
|
|
+ return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
|
+ { offset: 1, color: color1 + '' },
|
|
|
+ { offset: 0, color: color2 + '' || color1 + '' }
|
|
|
+ ]);
|
|
|
};
|
|
|
export const getColor = ([color1, color2]) => {
|
|
|
- // 右 下 左 上
|
|
|
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: color1 + '' },
|
|
|
- { offset: 1, color: color2 + '' || color1 + '' },
|
|
|
- ])
|
|
|
-}
|
|
|
+ // 右 下 左 上
|
|
|
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: color1 + '' },
|
|
|
+ { offset: 1, color: color2 + '' || color1 + '' }
|
|
|
+ ]);
|
|
|
+};
|
|
|
|
|
|
export const dateType = (date) => {
|
|
|
- let val = '';
|
|
|
- if (date) {
|
|
|
- val = `${date.slice(0, 4)}年${date.slice(4)}月`
|
|
|
- } else {
|
|
|
- val = date
|
|
|
- }
|
|
|
- return val
|
|
|
-}
|
|
|
+ let val = '';
|
|
|
+ if (date) {
|
|
|
+ val = `${date.slice(0, 4)}年${date.slice(4)}月`;
|
|
|
+ } else {
|
|
|
+ val = date;
|
|
|
+ }
|
|
|
+ return val;
|
|
|
+};
|
|
|
//折现波浪线颜色渐变
|
|
|
export const getItemStyle = (c1, c2) => {
|
|
|
- return {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: c1 // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: c2 // 100% 处的颜色
|
|
|
- }
|
|
|
- ],
|
|
|
- global: false // 缺省为 false
|
|
|
- }
|
|
|
- };
|
|
|
-}
|
|
|
-export const defaultMonth = ['01', "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
|
|
|
-export const defaultName = ['name1', 'name2', 'name3'];
|
|
|
-
|
|
|
-
|
|
|
-const defaultColor = [GradualChange('#22D8FF', '#00B2FF'),
|
|
|
-GradualChange('#F0646C', '#F4994E'),
|
|
|
-GradualChange('#5EEDCC ', '#24C3F1'),
|
|
|
-GradualChange('#7178FF', '#D2A4FF'),
|
|
|
-GradualChange('#884DD2', '#DF63CC')]
|
|
|
-// 饼图
|
|
|
-export const ringType = (
|
|
|
- color = [],
|
|
|
- data = [],
|
|
|
- title = {},
|
|
|
- legendFcuntion = {}
|
|
|
-) => {
|
|
|
- let legendFcuntionValue = (v) => {
|
|
|
- let val = ''
|
|
|
- data.map(item => {
|
|
|
- if (item.name == v) {
|
|
|
- if (legendFcuntion.type == '%') {
|
|
|
- val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`
|
|
|
- } else {
|
|
|
- val = `{a|${v}} · · · · · · {b|${item.value}}`
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- return val
|
|
|
-
|
|
|
- }
|
|
|
- return {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: 'vertical',
|
|
|
- right: 10,
|
|
|
- top: 80,
|
|
|
- itemGap: 10,
|
|
|
- itemWidth: 12, // 图例图形宽度
|
|
|
- itemHeight: 8,
|
|
|
- type: 'scroll',
|
|
|
- formatter: (v) => { return legendFcuntionValue(v) },
|
|
|
- textStyle: {
|
|
|
- rich: {
|
|
|
- a: {
|
|
|
- fontSize: 12,
|
|
|
- color: '#858892',
|
|
|
- padding: [0, 5, 0, 0]
|
|
|
- },
|
|
|
- b: {
|
|
|
- fontSize: 14,
|
|
|
- color: '#fff',
|
|
|
- padding: [0, 0, 0, 5]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- title,
|
|
|
- color: !!color.length ? color : defaultColor,
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- radius: ['55%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- center: ['25%', '50%'],
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center'
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: data
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// 折现波浪
|
|
|
-export const discountedWave = (
|
|
|
- name = "",
|
|
|
- xAxis = [],
|
|
|
- series = [],
|
|
|
- legendShow = false,
|
|
|
- color = [],
|
|
|
-) => {
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- color: "#FFFFFF"
|
|
|
- },
|
|
|
- // formatter(param) {
|
|
|
- // let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
|
|
|
- // param.forEach(item => {
|
|
|
- // el += `<p>
|
|
|
- // <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left,
|
|
|
- // ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
|
|
|
- // <span>${item.seriesName}：${item.value}</span>
|
|
|
- // </p>`;
|
|
|
- // });
|
|
|
- // el += `</div>`;
|
|
|
- // return el;
|
|
|
- // }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: 50,
|
|
|
- left: 5,
|
|
|
- bottom: 0,
|
|
|
- right: 5,
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
-
|
|
|
- legend: {
|
|
|
- show: legendShow,
|
|
|
- icon: "circle",
|
|
|
- x: "right", // 可设定图例在左、右、居中
|
|
|
- itemWidth: 8, // 图例图形宽度
|
|
|
- itemHeight: 8,
|
|
|
- itemGap: 20,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- axisLine: {
|
|
|
- show: false // 不显示坐标轴
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false // 不显示坐标轴刻度
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: function (params, index) {
|
|
|
- return params.slice(5)
|
|
|
- },
|
|
|
- color: "#9B9DA5",
|
|
|
- margin: 16
|
|
|
- },
|
|
|
- data: xAxis,
|
|
|
- axisPointer: {
|
|
|
- type: "shadow",
|
|
|
- shadowStyle: {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
+ return {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "rgba(31,207,245,0)" // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(31,207,245,0.15)" // 100% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.2,
|
|
|
- color: "rgba(31,207,245,0.15)" // 100% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(31,207,245,0.05)"
|
|
|
- }
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: c1 // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: c2 // 100% 处的颜色
|
|
|
+ }
|
|
|
],
|
|
|
global: false // 缺省为 false
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- splitNumber: 4,
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- name: name,
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: "#9B9DA5",
|
|
|
- margin: 15,
|
|
|
- textStyle: {
|
|
|
- align: "right",
|
|
|
- baseline: "middle"
|
|
|
- }
|
|
|
- },
|
|
|
- nameLocation: "end",
|
|
|
- nameTextStyle: { color: "#9B9DA5", padding: [0, 0, 0, -40] },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- type: "dotted",
|
|
|
- width: 0.2
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- // name: "设备告警",
|
|
|
- type: "line",
|
|
|
- smooth: true,
|
|
|
- symbol: "circle", // 实心
|
|
|
- symbolSize: 1, // 设定实心点的大小
|
|
|
- itemStyle: getItemStyle("#5EEDCC", "#24C3F1"),
|
|
|
- data: series,
|
|
|
- areaStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "rgba(36,121,253,0.1)"
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(19,194,247,0.3)"
|
|
|
- }
|
|
|
- ])
|
|
|
- }
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- width: 1
|
|
|
}
|
|
|
- },
|
|
|
- ]
|
|
|
+ };
|
|
|
+};
|
|
|
+export const defaultMonth = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
|
|
|
+export const defaultName = ['name1', 'name2', 'name3'];
|
|
|
|
|
|
- };
|
|
|
- return option;
|
|
|
+const defaultColor = [
|
|
|
+ GradualChange('#22D8FF', '#00B2FF'),
|
|
|
+ GradualChange('#F0646C', '#F4994E'),
|
|
|
+ GradualChange('#5EEDCC ', '#24C3F1'),
|
|
|
+ GradualChange('#7178FF', '#D2A4FF'),
|
|
|
+ GradualChange('#884DD2', '#DF63CC')
|
|
|
+];
|
|
|
+// 饼图
|
|
|
+export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}) => {
|
|
|
+ let legendFcuntionValue = (v) => {
|
|
|
+ let val = '';
|
|
|
+ data.map((item) => {
|
|
|
+ if (item.name == v) {
|
|
|
+ if (legendFcuntion.type == '%') {
|
|
|
+ val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
|
|
|
+ } else {
|
|
|
+ val = `{a|${v}} · · · · · · {b|${item.value}}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return val;
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ right: 10,
|
|
|
+ top: 80,
|
|
|
+ itemGap: 10,
|
|
|
+ itemWidth: 12, // 图例图形宽度
|
|
|
+ itemHeight: 8,
|
|
|
+ type: 'scroll',
|
|
|
+ formatter: (v) => {
|
|
|
+ return legendFcuntionValue(v);
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#858892',
|
|
|
+ padding: [0, 5, 0, 0]
|
|
|
+ },
|
|
|
+ b: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#fff',
|
|
|
+ padding: [0, 0, 0, 5]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ title,
|
|
|
+ color: !!color.length ? color : defaultColor,
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['55%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ center: ['25%', '50%'],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
};
|
|
|
|
|
|
+// 折现波浪
|
|
|
+export const discountedWave = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#FFFFFF'
|
|
|
+ }
|
|
|
+ // formatter(param) {
|
|
|
+ // let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
|
|
|
+ // param.forEach(item => {
|
|
|
+ // el += `<p>
|
|
|
+ // <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left,
|
|
|
+ // ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
|
|
|
+ // <span>${item.seriesName}：${item.value}</span>
|
|
|
+ // </p>`;
|
|
|
+ // });
|
|
|
+ // el += `</div>`;
|
|
|
+ // return el;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 50,
|
|
|
+ left: 5,
|
|
|
+ bottom: 0,
|
|
|
+ right: 5,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
|
|
|
-//柱状日期
|
|
|
-export const columnOptionsChart = (
|
|
|
- name = "",
|
|
|
- xAxis = [],
|
|
|
- series = [],
|
|
|
- color = [],
|
|
|
- barWidth = 6
|
|
|
-) => {
|
|
|
- let defaultData = [{
|
|
|
- name: '', type: 'bar', data: []
|
|
|
- }]
|
|
|
- let defaultColor = [['#0EAEFF', '#85E9FF'], ['#F0646C', '#F4994E']]
|
|
|
- let seriesConfiguration = () => {
|
|
|
- let seriesData = [];
|
|
|
- series.map((item, index) => {
|
|
|
- seriesData.push({
|
|
|
- name: item.name,
|
|
|
- type: 'bar',
|
|
|
- data: item.data,
|
|
|
- barWidth: barWidth,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- barBorderRadius: [15, 15, 0, 0],
|
|
|
- color: getColor(color[index] || defaultColor[index]),
|
|
|
- }
|
|
|
+ legend: {
|
|
|
+ show: legendShow,
|
|
|
+ icon: 'circle',
|
|
|
+ x: 'right', // 可设定图例在左、右、居中
|
|
|
+ itemWidth: 8, // 图例图形宽度
|
|
|
+ itemHeight: 8,
|
|
|
+ itemGap: 20
|
|
|
},
|
|
|
- barGap: '100%'
|
|
|
- })
|
|
|
- })
|
|
|
- return seriesData
|
|
|
- }
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "shadow",
|
|
|
- shadowStyle: {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "rgba(31,207,245,0)" // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(31,207,245,0.15)" // 100% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.2,
|
|
|
- color: "rgba(31,207,245,0.15)" // 100% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(31,207,245,0.05)"
|
|
|
- }
|
|
|
- ],
|
|
|
- global: false // 缺省为 false
|
|
|
- }
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false // 不显示坐标轴
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false // 不显示坐标轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function (params, index) {
|
|
|
+ return params.slice(5);
|
|
|
+ },
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 16
|
|
|
+ },
|
|
|
+ data: xAxis,
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ shadowStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(31,207,245,0)' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.2,
|
|
|
+ color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(31,207,245,0.05)'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- crossStyle: {
|
|
|
- shadowBlur: 30,
|
|
|
- shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitNumber: 4,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ name: name,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 15,
|
|
|
+ textStyle: {
|
|
|
+ align: 'right',
|
|
|
+ baseline: 'middle'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dotted',
|
|
|
+ width: 0.2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // name: "设备告警",
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle', // 实心
|
|
|
+ symbolSize: 1, // 设定实心点的大小
|
|
|
+ itemStyle: getItemStyle('#5EEDCC', '#24C3F1'),
|
|
|
+ data: series,
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(36,121,253,0.1)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(19,194,247,0.3)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ return option;
|
|
|
+};
|
|
|
+
|
|
|
+//柱状日期
|
|
|
+export const columnOptionsChart = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
|
|
|
+ let defaultData = [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ data: []
|
|
|
}
|
|
|
- },
|
|
|
- extraCssText:
|
|
|
- "background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px",
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- color: "#FFFFFF"
|
|
|
- },
|
|
|
- formatter(param) {
|
|
|
- let el = `<div class="dmp-echart-tooltip" style="text-align: center;"><h4>${dateType(param[0].axisValue)}</h4>`;
|
|
|
- param.forEach(item => {
|
|
|
- el += `<p style="text-align: left;">
|
|
|
+ ];
|
|
|
+ let defaultColor = [
|
|
|
+ ['#0EAEFF', '#85E9FF'],
|
|
|
+ ['#F0646C', '#F4994E']
|
|
|
+ ];
|
|
|
+ let seriesConfiguration = () => {
|
|
|
+ let seriesData = [];
|
|
|
+ series.map((item, index) => {
|
|
|
+ seriesData.push({
|
|
|
+ name: item.name,
|
|
|
+ type: 'bar',
|
|
|
+ data: item.data,
|
|
|
+ barWidth: barWidth,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: [15, 15, 0, 0],
|
|
|
+ color: getColor(color[index] || defaultColor[index])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barGap: '100%'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return seriesData;
|
|
|
+ };
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ shadowStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(31,207,245,0)' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.2,
|
|
|
+ color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(31,207,245,0.05)'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ crossStyle: {
|
|
|
+ shadowBlur: 30,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#FFFFFF'
|
|
|
+ },
|
|
|
+ formatter(param) {
|
|
|
+ let el = `<div class="dmp-echart-tooltip" style="text-align: center;"><h4>${dateType(param[0].axisValue)}</h4>`;
|
|
|
+ param.forEach((item) => {
|
|
|
+ el += `<p style="text-align: left;">
|
|
|
<span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left,
|
|
|
${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
|
|
|
<span>${item.seriesName}：${item.value.toFixed(2)}</span>
|
|
|
</p>`;
|
|
|
- });
|
|
|
- el += `</div>`;
|
|
|
- return el;
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: 50,
|
|
|
- left: 0,
|
|
|
- bottom: 0,
|
|
|
- right: 0,
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- axisLine: {
|
|
|
- show: false // 不显示坐标轴
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false // 不显示坐标轴刻度
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: function (params, index) {
|
|
|
- if (params.length == 2) {
|
|
|
- return params + '月';
|
|
|
- } else {
|
|
|
- return params.slice(5) + '月';
|
|
|
- }
|
|
|
-
|
|
|
+ });
|
|
|
+ el += `</div>`;
|
|
|
+ return el;
|
|
|
+ }
|
|
|
},
|
|
|
- color: "#9B9DA5",
|
|
|
- margin: 15
|
|
|
- },
|
|
|
- data: !!xAxis.length ? xAxis : defaultMonth
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- splitNumber: 4,
|
|
|
- name: name,
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: "#9B9DA5",
|
|
|
- margin: 15,
|
|
|
- textStyle: {
|
|
|
- align: "right",
|
|
|
- baseline: "middle"
|
|
|
- }
|
|
|
- },
|
|
|
- nameLocation: "end",
|
|
|
- nameTextStyle: { color: "#9B9DA5", padding: [0, 0, 0, -40] },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- type: "dotted",
|
|
|
- width: 0.5
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- show: false,
|
|
|
- x: 'right',
|
|
|
- icon: "circle",
|
|
|
- itemWidth: 8, // 图例图形宽度
|
|
|
- itemHeight: 8,
|
|
|
- itemGap: 20
|
|
|
- },
|
|
|
- series: seriesConfiguration() || defaultData
|
|
|
- };
|
|
|
- return option;
|
|
|
-}
|
|
|
-
|
|
|
-//柱状name 单柱状
|
|
|
-export const columnOptionsChartName = (
|
|
|
- name = "",
|
|
|
- xAxis = [],
|
|
|
- series = [],
|
|
|
- color = [],
|
|
|
- barWidth = 6
|
|
|
-) => {
|
|
|
- let defaultData = [{
|
|
|
- name: '', type: 'bar', data: []
|
|
|
- }]
|
|
|
- let defaultColor = [['#0EAEFF', '#85E9FF'], ['#F0646C', '#F4994E']]
|
|
|
- let seriesConfiguration = () => {
|
|
|
- let seriesData = [
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- data: [],
|
|
|
- barWidth: barWidth,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- barBorderRadius: [15, 15, 0, 0],
|
|
|
- color: getColor(color[0] || defaultColor[0]),
|
|
|
- }
|
|
|
+ grid: {
|
|
|
+ top: 50,
|
|
|
+ left: 0,
|
|
|
+ bottom: 0,
|
|
|
+ right: 0,
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
- barGap: '100%'
|
|
|
- }
|
|
|
- ];
|
|
|
- series.map((item, index) => {
|
|
|
- seriesData[0].data.push(item.data)
|
|
|
- })
|
|
|
- return seriesData
|
|
|
- }
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "shadow",
|
|
|
- shadowStyle: {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "rgba(31,207,245,0)" // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(31,207,245,0.15)" // 100% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.2,
|
|
|
- color: "rgba(31,207,245,0.15)" // 100% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(31,207,245,0.05)"
|
|
|
- }
|
|
|
- ],
|
|
|
- global: false // 缺省为 false
|
|
|
- }
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false // 不显示坐标轴
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false // 不显示坐标轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function (params, index) {
|
|
|
+ if (params.length == 2) {
|
|
|
+ return params + '月';
|
|
|
+ } else {
|
|
|
+ return params.slice(5) + '月';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 15
|
|
|
+ },
|
|
|
+ data: !!xAxis.length ? xAxis : defaultMonth
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitNumber: 4,
|
|
|
+ name: name,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 15,
|
|
|
+ textStyle: {
|
|
|
+ align: 'right',
|
|
|
+ baseline: 'middle'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dotted',
|
|
|
+ width: 0.5
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- crossStyle: {
|
|
|
- shadowBlur: 30,
|
|
|
- shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ x: 'right',
|
|
|
+ icon: 'circle',
|
|
|
+ itemWidth: 8, // 图例图形宽度
|
|
|
+ itemHeight: 8,
|
|
|
+ itemGap: 20
|
|
|
+ },
|
|
|
+ series: seriesConfiguration() || defaultData
|
|
|
+ };
|
|
|
+ return option;
|
|
|
+};
|
|
|
+
|
|
|
+//柱状name 单柱状
|
|
|
+export const columnOptionsChartName = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
|
|
|
+ let defaultData = [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ data: []
|
|
|
}
|
|
|
- },
|
|
|
- extraCssText:
|
|
|
- "background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px",
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- color: "#FFFFFF"
|
|
|
- },
|
|
|
- formatter(param) {
|
|
|
- let el = ``;
|
|
|
- param.forEach(item => {
|
|
|
- el += `<p style="text-align: left;">
|
|
|
+ ];
|
|
|
+ let defaultColor = [
|
|
|
+ ['#0EAEFF', '#85E9FF'],
|
|
|
+ ['#F0646C', '#F4994E']
|
|
|
+ ];
|
|
|
+ let seriesConfiguration = () => {
|
|
|
+ let seriesData = [
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ data: [],
|
|
|
+ barWidth: barWidth,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: [15, 15, 0, 0],
|
|
|
+ color: getColor(color[0] || defaultColor[0])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barGap: '100%'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ series.map((item, index) => {
|
|
|
+ seriesData[0].data.push(item.data);
|
|
|
+ });
|
|
|
+ return seriesData;
|
|
|
+ };
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ shadowStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(31,207,245,0)' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.2,
|
|
|
+ color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(31,207,245,0.05)'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ crossStyle: {
|
|
|
+ shadowBlur: 30,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#FFFFFF'
|
|
|
+ },
|
|
|
+ formatter(param) {
|
|
|
+ let el = ``;
|
|
|
+ param.forEach((item) => {
|
|
|
+ el += `<p style="text-align: left;">
|
|
|
<span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left,
|
|
|
${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
|
|
|
<span>${item.name}：${item.value}${name}</span>
|
|
|
</p>`;
|
|
|
- });
|
|
|
- el += ``;
|
|
|
- return el;
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: 50,
|
|
|
- left: 0,
|
|
|
- bottom: 0,
|
|
|
- right: 0,
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- axisLine: {
|
|
|
- show: false // 不显示坐标轴
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false // 不显示坐标轴刻度
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: function (params, index) {
|
|
|
- return params
|
|
|
+ });
|
|
|
+ el += ``;
|
|
|
+ return el;
|
|
|
+ }
|
|
|
},
|
|
|
- color: "#9B9DA5",
|
|
|
- margin: 15
|
|
|
- },
|
|
|
- data: !!xAxis.length ? xAxis : defaultName
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- splitNumber: 4,
|
|
|
- name: name,
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: "#9B9DA5",
|
|
|
- margin: 15,
|
|
|
- textStyle: {
|
|
|
- align: "right",
|
|
|
- baseline: "middle"
|
|
|
- }
|
|
|
- },
|
|
|
- nameLocation: "end",
|
|
|
- nameTextStyle: { color: "#9B9DA5", padding: [0, 0, 0, -40] },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- type: "dotted",
|
|
|
- width: 0.5
|
|
|
+ grid: {
|
|
|
+ top: 50,
|
|
|
+ left: 0,
|
|
|
+ bottom: 0,
|
|
|
+ right: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false // 不显示坐标轴
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false // 不显示坐标轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function (params, index) {
|
|
|
+ return params;
|
|
|
+ },
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 15
|
|
|
+ },
|
|
|
+ data: !!xAxis.length ? xAxis : defaultName
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitNumber: 4,
|
|
|
+ name: name,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 15,
|
|
|
+ textStyle: {
|
|
|
+ align: 'right',
|
|
|
+ baseline: 'middle'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dotted',
|
|
|
+ width: 0.5
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ x: 'right',
|
|
|
+ icon: 'circle',
|
|
|
+ itemWidth: 8, // 图例图形宽度
|
|
|
+ itemHeight: 8,
|
|
|
+ itemGap: 20
|
|
|
+ },
|
|
|
+ series: seriesConfiguration() || defaultData
|
|
|
+ };
|
|
|
+ return option;
|
|
|
+};
|
|
|
+
|
|
|
+// 柱状图堆叠
|
|
|
+export const columnOptionsChartStacking = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
|
|
|
+ let defaultData = [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ data: []
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- show: false,
|
|
|
- x: 'right',
|
|
|
- icon: "circle",
|
|
|
- itemWidth: 8, // 图例图形宽度
|
|
|
- itemHeight: 8,
|
|
|
- itemGap: 20
|
|
|
- },
|
|
|
- series: seriesConfiguration() || defaultData
|
|
|
- };
|
|
|
- return option;
|
|
|
-}
|
|
|
+ ];
|
|
|
+ let defaultColor = [
|
|
|
+ // ['#0EAEFF', '#85E9FF'],
|
|
|
+ ['#0EAEFF', '#0EAEFF'],
|
|
|
+ ['#85E9FF', '#85E9FF']
|
|
|
+ // ['#F0646C', '#F4994E']
|
|
|
+ ];
|
|
|
+
|
|
|
+ let seriesConfiguration = () => {
|
|
|
+ let seriesData = [
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ data: [],
|
|
|
+ name: '',
|
|
|
+ barWidth: barWidth,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: [15, 15, 0, 0],
|
|
|
+ color: getColor(color[0] || defaultColor[0])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barGap: '100%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ data: [],
|
|
|
+ name: '',
|
|
|
+ barWidth: barWidth,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: [15, 15, 0, 0],
|
|
|
+ color: getColor(color[1] || defaultColor[1])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barGap: '-100%',
|
|
|
+ z: '1'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ series.map((item, index) => {
|
|
|
+ seriesData[index].data = item.data;
|
|
|
+ seriesData[index].name = item.name;
|
|
|
+ });
|
|
|
+ return seriesData;
|
|
|
+ };
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ shadowStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(31,207,245,0)' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.2,
|
|
|
+ color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(31,207,245,0.05)'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ crossStyle: {
|
|
|
+ shadowBlur: 30,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#FFFFFF'
|
|
|
+ },
|
|
|
+ formatter(param) {
|
|
|
+ let el = ``;
|
|
|
+ param.forEach((item) => {
|
|
|
+ el += `<p style="text-align: left;">
|
|
|
+ <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left,
|
|
|
+ ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
|
|
|
+ <span>${item.seriesName}：${item.value}${name}</span>
|
|
|
+ </p>`;
|
|
|
+ });
|
|
|
+ el += ``;
|
|
|
+ return el;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 50,
|
|
|
+ left: 0,
|
|
|
+ bottom: 0,
|
|
|
+ right: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false // 不显示坐标轴
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false // 不显示坐标轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function (params, index) {
|
|
|
+ return params;
|
|
|
+ },
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 15
|
|
|
+ },
|
|
|
+ data: !!xAxis.length ? xAxis : defaultName
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitNumber: 4,
|
|
|
+ name: name,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 15,
|
|
|
+ textStyle: {
|
|
|
+ align: 'right',
|
|
|
+ baseline: 'middle'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dotted',
|
|
|
+ width: 0.5
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ x: 'right',
|
|
|
+ icon: 'circle',
|
|
|
+ itemWidth: 8, // 图例图形宽度
|
|
|
+ itemHeight: 8,
|
|
|
+ itemGap: 20
|
|
|
+ },
|
|
|
+ series: seriesConfiguration() || defaultData
|
|
|
+ };
|
|
|
+ return option;
|
|
|
+};
|
|
|
+
|
|
|
+// 折线日期 间隔4个
|
|
|
+export const discountedChart = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#FFFFFF'
|
|
|
+ }
|
|
|
+ // formatter(param) {
|
|
|
+ // let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
|
|
|
+ // param.forEach(item => {
|
|
|
+ // el += `<p>
|
|
|
+ // <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left,
|
|
|
+ // ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
|
|
|
+ // <span>${item.seriesName}：${item.value}</span>
|
|
|
+ // </p>`;
|
|
|
+ // });
|
|
|
+ // el += `</div>`;
|
|
|
+ // return el;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 50,
|
|
|
+ left: 5,
|
|
|
+ bottom: 0,
|
|
|
+ right: 5,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+
|
|
|
+ legend: {
|
|
|
+ show: legendShow,
|
|
|
+ icon: 'circle',
|
|
|
+ x: 'right', // 可设定图例在左、右、居中
|
|
|
+ itemWidth: 8, // 图例图形宽度
|
|
|
+ itemHeight: 8,
|
|
|
+ itemGap: 20
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false // 不显示坐标轴
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false // 不显示坐标轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 4,
|
|
|
+ // formatter: function (params, index) {
|
|
|
+ // return params.slice(5);
|
|
|
+ // },
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 16
|
|
|
+ },
|
|
|
+ data: xAxis,
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ shadowStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(31,207,245,0)' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.2,
|
|
|
+ color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(31,207,245,0.05)'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitNumber: 4,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ name: name,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 15,
|
|
|
+ textStyle: {
|
|
|
+ align: 'right',
|
|
|
+ baseline: 'middle'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dotted',
|
|
|
+ width: 0.2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // name: "设备告警",
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle', // 实心
|
|
|
+ symbolSize: 1, // 设定实心点的大小
|
|
|
+ itemStyle: getItemStyle('#5EEDCC', '#24C3F1'),
|
|
|
+ data: series,
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(36,121,253,0.1)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(19,194,247,0.3)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ return option;
|
|
|
+};
|
