|
|
@@ -0,0 +1,1236 @@
|
|
|
+import echarts from 'echarts';
|
|
|
+//从左往右颜色渐变
|
|
|
+export const GradualChange = (color1, color2) => {
|
|
|
+ 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 + '' }
|
|
|
+ ]);
|
|
|
+};
|
|
|
+
|
|
|
+export const dateType = (date) => {
|
|
|
+ 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%'],
|
|
|
+ radius: ['55%', '70%'],
|
|
|
+ center: ['25%', '50%'],
|
|
|
+ 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: 10,
|
|
|
+ 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',
|
|
|
+ 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;
|
|
|
+};
|
|
|
+
|
|
|
+//柱状日期
|
|
|
+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])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: 10,
|
|
|
+ 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) + '月';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: 10,
|
|
|
+ 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: []
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ 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: 10,
|
|
|
+ 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;
|
|
|
+};
|
|
|
+
|
|
|
+// 漏斗图
|
|
|
+export const funnelChart = (dataseries = [], series = []) => {
|
|
|
+ // var colors=[['#22D8FF','#00B2FF']]
|
|
|
+ var colorList = [
|
|
|
+ {
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#22D8FF' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#00B2FF' // 100% 处的颜色
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#5EEDCC' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#24C3F1' // 100% 处的颜色
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#F0646C' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#F4994E' // 100% 处的颜色
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#7178FF' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#D2A4FF ' // 100% 处的颜色
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#884DD2' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#DF63CC' // 100% 处的颜色
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+
|
|
|
+ // backgroundColor:'#ffffff',
|
|
|
+ color: colorList,
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ top: 0,
|
|
|
+ type: 'funnel',
|
|
|
+ left: '10%',
|
|
|
+ top: '15%',
|
|
|
+ width: '50%',
|
|
|
+ height: '85%',
|
|
|
+ gap: 0,
|
|
|
+ minSize: 50,
|
|
|
+ maxSize: 260,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'inside',
|
|
|
+ // formatter: '{d}'
|
|
|
+ formatter: function (data) {
|
|
|
+ return data.percent.toFixed(0) + '%';
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ fontSize: '14',
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0)',
|
|
|
+ color: '#FFFFFF'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: dataseries
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ top: 0,
|
|
|
+ type: 'funnel',
|
|
|
+ left: '0',
|
|
|
+ width: '30%',
|
|
|
+ height: '85%',
|
|
|
+ top: '15%',
|
|
|
+ gap: 16,
|
|
|
+ z: 1,
|
|
|
+ // minSize: 50,
|
|
|
+ // maxSize: 50,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ // padding :[11,25],
|
|
|
+ formatter: function (params) {
|
|
|
+ let el = `{a|${params.name}} {b|${params.value}}`;
|
|
|
+ return el;
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#858892',
|
|
|
+ padding: [0, 5, 0, 0]
|
|
|
+ },
|
|
|
+ b: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#fff',
|
|
|
+ padding: [0, 0, 0, 5]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //右侧的百分比显示的地方
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ length: 200,
|
|
|
+ position: 'center',
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: 'red',
|
|
|
+ type: 'solid'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 主体是透明的
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'transparent',
|
|
|
+ borderWidth: 0,
|
|
|
+ opacity: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: series
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ return option;
|
|
|
+};
|
|
|
+
|
|
|
+// 柱状图 双个柱图
|
|
|
+export const columnOptionsChartss = (name = '', xAxis = [], series = [], dataseries = [], dataName = [], color = [], barWidth = 6) => {
|
|
|
+ let defaultData = [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ let defaultColor = [
|
|
|
+ ['#0EAEFF', '#85E9FF'],
|
|
|
+ ['#F0646C', '#F4994E']
|
|
|
+ ];
|
|
|
+ let seriesConfiguration = () => {
|
|
|
+ let seriesData = [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ data: [],
|
|
|
+ barWidth: barWidth,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: [15, 15, 0, 0],
|
|
|
+ color: getColor(color[0] || defaultColor[0])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barGap: '100%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ data: [],
|
|
|
+ barWidth: barWidth,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: [15, 15, 0, 0],
|
|
|
+ color: getColor(color[1] || defaultColor[1])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barGap: '100%'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ series.map((item, index) => {
|
|
|
+ seriesData[0].data.push(item.data);
|
|
|
+ seriesData[0].name = dataName[0];
|
|
|
+ });
|
|
|
+ dataseries.map((items, indexs) => {
|
|
|
+ seriesData[1].data.push(items.data);
|
|
|
+ seriesData[1].name = dataName[1];
|
|
|
+ });
|
|
|
+
|
|
|
+ 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: 10,
|
|
|
+ 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: true,
|
|
|
+ x: 'right',
|
|
|
+ icon: 'circle',
|
|
|
+ itemWidth: 8, // 图例图形宽度
|
|
|
+ itemHeight: 8,
|
|
|
+ itemGap: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#FFF'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: seriesConfiguration() || defaultData
|
|
|
+ };
|
|
|
+ return option;
|
|
|
+};
|
