github
/
jeecg-boot
mirror of https://github.com/jeecgboot/jeecg-boot
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

修改柱体颜色

pull/7333/head
JEECG 2024-09-24 22:47:04 +08:00
parent a3997dfd16
commit 7fecdf94e5
3 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
jeecgboot-vue3/src/components/chart/BarAndLine.vue
View File

@ -24,6 +24,10 @@
type: String as PropType<string>, type: String as PropType<string>,
default: 'calc(100vh - 78px)', default: 'calc(100vh - 78px)',
}, },
customColor: {
type: Array,
default: () => [],
}
}, },
setup(props) { setup(props) {
const chartRef = ref<HTMLDivElement | null>(null); const chartRef = ref<HTMLDivElement | null>(null);
@ -68,12 +72,15 @@
//轴数据 //轴数据
let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name))); let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
let seriesData = []; let seriesData = [];
typeArr.forEach((type) => { typeArr.forEach((type,index) => {
let obj = { name: type }; let obj = { name: type };
let chartArr = props.chartData.filter((item) => type === item.type); let chartArr = props.chartData.filter((item) => type === item.type);
//data数据 //data数据
obj['data'] = chartArr.map((item) => item.value); obj['data'] = chartArr.map((item) => item.value);
obj['type'] = chartArr[0].seriesType; obj['type'] = chartArr[0].seriesType;
if(props?.customColor && props?.customColor[index]){
obj['color'] = props.customColor[index];
}
seriesData.push(obj); seriesData.push(obj);
}); });
option.series = seriesData; option.series = seriesData;

5
jeecgboot-vue3/src/views/report/chartdemo/chartdemo.data.ts
View File

@ -1,8 +1,10 @@
const colors = ['#4db6ac', '#ffb74d', '#64b5f6', '#e57373', '#9575cd', '#a1887f', '#90a4ae', '#4dd0e1', '#81c784', '#ff8a65'];
export const getData = (() => { export const getData = (() => {
let dottedBase = +new Date(); let dottedBase = +new Date();
const barDataSource: any[] = []; const barDataSource: any[] = [];
const barMultiData: any[] = []; const barMultiData: any[] = [];
const barLineData: any[] = []; const barLineData: any[] = [];
const barLineColors: any[] = [];
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
let obj = { name: '', value: 0 }; let obj = { name: '', value: 0 };
@ -44,6 +46,7 @@ export const getData = (() => {
obj.value = Math.random() * 200; obj.value = Math.random() * 200;
barLineData.push(obj); barLineData.push(obj);
} }
barLineColors.push(colors[j]);
} }
return { barDataSource, barMultiData, pieData, barLineData, radarData }; return { barDataSource, barMultiData, pieData, barLineData, barLineColors,radarData };
})(); })();

4
jeecgboot-vue3/src/views/report/chartdemo/index.vue
View File

@ -38,7 +38,7 @@
<Gauge :chartData="{ name: '出勤率', value: 70 }" height="50vh"></Gauge> <Gauge :chartData="{ name: '出勤率', value: 70 }" height="50vh"></Gauge>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="10" tab="折柱图"> <a-tab-pane key="10" tab="折柱图">
<BarAndLine :chartData="barLineData" height="50vh"></BarAndLine> <BarAndLine :chartData="barLineData" :customColor="barLineColors" height="50vh"></BarAndLine>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="11" tab="排名列表"> <a-tab-pane key="11" tab="排名列表">
<RankList title="门店销售排行榜" :list="rankList" style="width: 600px; margin: 0 auto"></RankList> <RankList title="门店销售排行榜" :list="rankList" style="width: 600px; margin: 0 auto"></RankList>
@ -71,7 +71,7 @@
import BarAndLine from '/@/components/chart/BarAndLine.vue'; import BarAndLine from '/@/components/chart/BarAndLine.vue';
const activeKey = ref('1'); const activeKey = ref('1');
const { barDataSource, barMultiData, pieData, barLineData, radarData } = getData; const { barDataSource, barMultiData, pieData, barLineData, radarData,barLineColors } = getData;
const multiBarOption = { const multiBarOption = {
title: { text: '多列柱状图', left: 'center' }, title: { text: '多列柱状图', left: 'center' },
}; };