|
@@ -46,12 +46,15 @@ export const getItemStyle = (c1, c2) => {
|
|
|
};
|
|
|
}
|
|
|
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 = [],
|
|
@@ -275,7 +278,7 @@ export const discountedWave = (
|
|
|
};
|
|
|
|
|
|
|
|
|
-//柱状
|
|
|
+//柱状日期
|
|
|
export const columnOptionsChart = (
|
|
|
name = "",
|
|
|
xAxis = [],
|
|
@@ -304,7 +307,6 @@ export const columnOptionsChart = (
|
|
|
barGap: '100%'
|
|
|
})
|
|
|
})
|
|
|
-
|
|
|
return seriesData
|
|
|
}
|
|
|
let option = {
|
|
@@ -431,4 +433,157 @@ export const columnOptionsChart = (
|
|
|
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: 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;
|
|
|
}
|