模塊導(dǎo)入
moudleA.js
export const pie = {
? dataset: [
? ? {
? ? ? dimensions: ['name', 'value'],// ['條線', '金額'],
? ? ? source: [
? ? ? ? // { 條線: '產(chǎn)品中心合計(jì)', 金額: 71139, 營(yíng)業(yè)收入: 7113 },
? ? ? ? // { 條線: '科研中心合計(jì)', 金額: 628, 營(yíng)業(yè)收入: 62 },
? ? ? ? // { 條線: '銷(xiāo)售中心', 金額: 128985, 營(yíng)業(yè)收入: 12898 },
? ? ? ? // { 條線: '經(jīng)營(yíng)子公司合計(jì)', 金額: 57237, 營(yíng)業(yè)收入: 5723 },
? ? ? ? // { 條線: '經(jīng)營(yíng)類(lèi)子公司抵消', 金額: 20, 營(yíng)業(yè)收入: 2 }
? ? ? ]
? ? }
? ],
? tooltip: {
? ? trigger: 'item'
? },
? legend: {
? ? right: 10,
? },
? series: [
? ? {
? ? ? label: { show: false },
? ? ? type: 'pie',
? ? ? center: ["30%", "50%"],
? ? ? encode: {
? ? ? ? itemName: 'name',
? ? ? ? value: 'value'
? ? ? }
? ? }
? ]
}
// 折柱圖
export const barLine: any = {
? dataset: [
? ? // {
? ? // ? ? dimensions: ['條線', '金額', '人數(shù)'],
? ? // ? ? source: [
? ? // ? ? ? ? { 條線: '政務(wù)', 金額: 128, 人數(shù): 100 },
? ? // ? ? ? ? { 條線: '信息', 金額: 28, 人數(shù): 100 },
? ? // ? ? ]
? ? // }
? ],
? tooltip: {
? ? trigger: 'axis',
? ? axisPointer: {
? ? ? type: 'cross',
? ? ? crossStyle: {
? ? ? ? color: '#999',
? ? ? },
? ? },
? },
? legend: {
? ? data: ['流入', '流出', '達(dá)成率'],
? ? top: 10,
? ? right: 10
? },
? xAxis: [
? ? {
? ? ? type: 'category',
? ? ? data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
? ? ? axisPointer: {
? ? ? ? type: 'line',
? ? ? },
? ? },
? ],
? yAxis: [
? ? {
? ? ? type: 'value',
? ? ? name: '雨量',
? ? ? // min: 0,
? ? ? // max: 250,
? ? ? // interval: 50,
? ? ? axisLabel: {
? ? ? ? formatter: '{value} ml',
? ? ? },
? ? ? splitNumber: 4
? ? },
? ? {
? ? ? type: 'value',
? ? ? splitNumber: 4
? ? ? // name: '氣溫',
? ? ? // min: 0,
? ? ? // max: 25,
? ? ? // interval: 5,
? ? ? // axisLabel: {
? ? ? // ? formatter: '{value}',
? ? ? // },
? ? },
? ],
? series: [
? ? {
? ? ? name: '流入',
? ? ? type: 'bar',
? ? ? barGap: '20%', ? ?//柱狀圖雙柱的間距
? ? ? barWidth: getPx(30), ? ?//粗細(xì)
? ? ? label: { position: 'top' },
? ? ? data: [23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0],
? ? },
? ? {
? ? ? name: '流出',
? ? ? type: 'bar',
? ? ? label: { show: true, position: 'inside' },
? ? ? barWidth: getPx(30), ? ?//粗細(xì)
? ? ? data: [26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
? ? },
? ? {
? ? ? name: '達(dá)成率',
? ? ? type: 'line',
? ? ? yAxisIndex: 1,
? ? ? label: { position: 'top' },
? ? ? data: [4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5],
? ? },
? ],
}
// 折柱圖
export const monthHt: any = {
? dataset: [
? ? // {
? ? // ? ? dimensions: ['條線', '合同金額', '凈合同額'],
? ? // ? ? source: [
? ? // ? ? ? ? { 條線: '政務(wù)', 合同金額: 128, 凈合同額: 100 },
? ? // ? ? ? ? { 條線: '信息', 合同金額: 28, 凈合同額: 100 },
? ? // ? ? ? ? { 條線: '教育', 合同金額: 98, 凈合同額: 10 },
? ? // ? ? ]
? ? // }
? ],
? tooltip: {
? ? trigger: 'axis',
? ? axisPointer: {
? ? ? type: 'cross',
? ? ? crossStyle: {
? ? ? ? color: '#999',
? ? ? },
? ? },
? },
? legend: {
? ? show: true,
? ? right: 10
? },
? xAxis: [
? ? {
? ? ? type: 'category',
? ? ? data: [],
? ? ? axisPointer: {
? ? ? ? type: 'line',
? ? ? },
? ? },
? ],
? // yAxis: {
? // ? ? type: 'value'
? // ? },
? yAxis: [
? ? {
? ? ? type: 'value',
? ? ? name: '達(dá)成金額',
? ? ? min: 0,
? ? ? max: 250,
? ? ? interval: 50,
? ? ? axisLabel: {
? ? ? ? formatter: '{value} ml',
? ? ? },
? ? }
? ],
? series: [
? ? // {
? ? // ? name: '流入',
? ? // ? type: 'bar',
? ? // ? barGap:'20%', ? ?//柱狀圖雙柱的間距
? ? // ? barWidth:getPx(30), ? ?//粗細(xì)
? ? // ? label: { position: 'top' },
? ? // ? data: [23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0],
? ? // },
? ? // {
? ? // ? name: '流出',
? ? // ? type: 'bar',
? ? // ? label: { show: true, position: 'inside' },
? ? // ? barWidth:getPx(30), ? ?//粗細(xì)
? ? // ? data: [26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
? ? // },
? ? // {
? ? // ? name: '達(dá)成率',
? ? // ? type: 'line',
? ? // ? yAxisIndex: 1,
? ? // ? label: { position: 'top' },
? ? // ? data: [4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5],
? ? // },
? ],
? dataTransfer: (options: any, data: any) => {
? ? // console.log('柱狀圖轉(zhuǎn)化函數(shù) :>> ', options, data);
? }
}
// ? 正負(fù)折柱圖
export const barBoth = {
? dataset: [
? ? {
? ? ? dimensions: ['條線', '達(dá)成', '缺口'],
? ? ? source: [
? ? ? ? // { 條線: '成人教育', 達(dá)成: 128985.451705, 缺口: -10000 },
? ? ? ? // { 條線: '圖慧', 達(dá)成: 108985.451705, 缺口: -20000 },
? ? ? ? // { 條線: '俺想', 達(dá)成: 88985.451705, 缺口: -30000 },
? ? ? ? // { 條線: '政務(wù)', 達(dá)成: 68985.451705, 缺口: -20000 },
? ? ? ? // { 條線: '環(huán)保', 達(dá)成: 48985.451705, 缺口: -40000 },
? ? ? ? // { 條線: '數(shù)字化', 達(dá)成: 28985.451705, 缺口: -10000 },
? ? ? ],
? ? },
? ],
? xAxis: { type: 'category', axisTick: { show: true }, splitLine: { show: false }, axisLabel: { rotate: 0 }, },
? yAxis: [{
? ? type: 'value',
? ? axisTick: { show: false },
? ? axisLine: { show: false },
? ? splitLine: { show: false },
? ? name: '單位: 元',
? ? nameTextStyle: {
? ? ? padding: [0, 0, 18, 0],
? ? },
? }, {
? ? // name: 'prenct',
? ? type: 'value',
? ? axisTick: { show: false }, // 刻度線
? ? axisLine: { show: false }, // 坐標(biāo)軸線
? ? splitLine: { show: false }, // 圖表中的分割線
? ? // max: 100,
? ? // min: 0,
? ? // max: value => (value.max * 1.2).toFixed(0),
? ? // min: value => (((value.max * min) / max) * 1.2).toFixed(0),
? ? axisLabel: {
? ? ? formatter: '{value} %',
? ? },
? }],
? tooltip: {
? ? trigger: 'axis',
? ? // ? formatter: '{value123}'
? },
? legend: {
? ? show: true,
? ? top: 10,
? ? right: 10,
? },
? series: [
? ? {
? ? ? name: '經(jīng)營(yíng)流入',
? ? ? type: 'bar',
? ? ? stack: 'Total',
? ? ? barWidth: getPx(30),
? ? ? label: {
? ? ? ? show: false,
? ? ? ? position: 'inside',
? ? ? },
? ? },
? ? {
? ? ? name: '經(jīng)營(yíng)流出',
? ? ? type: 'bar',
? ? ? stack: 'Total',
? ? ? barWidth: getPx(30),
? ? ? label: {
? ? ? ? show: false,
? ? ? ? position: 'inside',
? ? ? },
? ? },
? ? {
? ? ? name: '凈現(xiàn)金流',
? ? ? type: 'line',
? ? ? stack: 'Total',
? ? ? yAxisIndex: 1,
? ? ? label: { position: 'top' },
? ? ? data: [4.5, 6.3, 10.2, 20.3, 23.4, 23.0],
? ? },
? ],
}
// 瀑布圖
export const waterFall = {
? tooltip: {
? ? trigger: 'axis',
? ? axisPointer: {
? ? ? // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
? ? ? type: 'shadow', // 默認(rèn)為直線,可選為:'line' | 'shadow'
? ? },
? ? formatter: function (params: any) {
? ? ? let tar
? ? ? if (params[1].value !== '-') {
? ? ? ? tar = params[1]
? ? ? } else {
? ? ? ? tar = params[0]
? ? ? }
? ? ? return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value
? ? },
? },
? legend: {
? ? data: ['負(fù)值', '正值'],
? ? top: 10,
? ? right: 10,
? ? show: false,
? },
? grid: {
? ? left: '3%',
? ? right: '4%',
? ? bottom: '3%',
? ? containLabel: true,
? },
? xAxis: {
? ? type: 'category',
? },
? yAxis: {
? ? type: 'value',
? ? show: false
? },
? dataset: {
? ? source: {
? ? ? 月份: ['排期余額', '經(jīng)營(yíng)流入', '經(jīng)營(yíng)流出', '投資流入', '投資流出', '融資流入', '融資流出', '期末余額'],
? ? ? 調(diào)整: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689],
? ? ? 正值: [900, 345, 393, '-', '-', 135, 178, 286],
? ? ? 負(fù)值: ['-', '-', '-', 108, 154, '-', '-', '-'],
? ? },
? },
? series: [
? ? {
? ? ? name: '輔助',
? ? ? type: 'bar',
? ? ? stack: '總量',
? ? ? barGap: '20%', //柱狀圖雙柱的間距
? ? ? itemStyle: {
? ? ? ? barBorderColor: 'rgba(0,0,0,0)',
? ? ? ? color: 'rgba(0,0,0,0)',
? ? ? },
? ? ? emphasis: {
? ? ? ? itemStyle: {
? ? ? ? ? barBorderColor: 'rgba(0,0,0,0)',
? ? ? ? ? color: 'rgba(0,0,0,0)',
? ? ? ? },
? ? ? },
? ? ? encode: {
? ? ? ? x: '月份',
? ? ? ? y: '調(diào)整',
? ? ? },
? ? },
? ? {
? ? ? name: '正值',
? ? ? type: 'bar',
? ? ? stack: '總量',
? ? ? barWidth: getPx(30), //粗細(xì)
? ? ? label: {
? ? ? ? show: true,
? ? ? ? position: 'top',
? ? ? },
? ? ? barGap: '20%', //柱狀圖雙柱的間距
? ? ? encode: {
? ? ? ? x: '月份',
? ? ? ? y: '正值',
? ? ? },
? ? },
? ? {
? ? ? name: '負(fù)值',
? ? ? type: 'bar',
? ? ? stack: '總量',
? ? ? barGap: '20%', ? ?//柱狀圖雙柱的間距
? ? ? label: {
? ? ? ? show: true,
? ? ? ? position: 'bottom',
? ? ? },
? ? ? encode: {
? ? ? ? x: '月份',
? ? ? ? y: '負(fù)值',
? ? ? },
? ? },
? ],
? dataTransfer: (options: any, data: any) => {
? },
}
const chartsOptionMap = {
? bar,
? barLine,
? barLinePercent,
? pie
}
export const geEchartsOptions = (type) => {
? return deepClone(chartsOptionMap[type])
}
moudleB.vue? 引入
export default class moudleB?extends Mixins(commomComponentMixin) {
? @Prop({ default: '' })
? lienId!: string
? loading: boolean = false
? barLine: any = geEchartsOptions('barLinePercent')
? currentVal: string = '累計(jì)數(shù)'
? chartOption_1: any = geEchartsOptions('barLinePercent')
? chartOption_2: any = geEchartsOptions('barLinePercent')
? created() {}
? /**
? ?* 查詢數(shù)據(jù)
? ?*/
? fetchData() {
? ? if (this.queryParams.lineId) {
? ? ? this.fetchChartData_mll_zt()
? ? ? return
? ? }
? ? this.fetchChartData_mll_bk()
? ? this.fetchChartData_mll_zt()
? }
? async fetchChartData_mll_zt() {
? ? let isLj: boolean = this.currentVal == '累計(jì)數(shù)'
? ? const res: any = await getKanbanCardList({
? ? ? ...this.queryParams,
? ? ? cardName: '毛利率整體',
? ? ? statistical: isLj ? '當(dāng)期數(shù),累計(jì)數(shù)' : '當(dāng)期數(shù)',
? ? })
? ? const chartOption_1 = {
? ? ? ...geEchartsOptions('barLinePercent'),
? ? ? series: [
? ? ? ? { type: 'bar' },
? ? ? ? { type: 'line', yAxisIndex: 1, unit: '%', symbolSize: 5 },
? ? ? ? { type: 'line', yAxisIndex: 1, unit: '%', symbolSize: 5 },
? ? ? ],
? ? ? dataset: {
? ? ? ? dimensions: ['期間', '毛利潤(rùn)', `毛利率`, `毛利率${!isLj ? '月度' : '累計(jì)月度'}目標(biāo)`],
? ? ? ? source: transferForNewDataList(
? ? ? ? ? [
? ? ? ? ? ? {
? ? ? ? ? ? ? list: res.data.currentDataList[0].dataSet.newDataList,
? ? ? ? ? ? ? prefix: '',
? ? ? ? ? ? ? axisName: '年份期間',
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? list: res.data.online[0].dataSet.newDataList,
? ? ? ? ? ? ? prefix: 'last_',
? ? ? ? ? ? ? axisName: '年份期間',
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? ? (item: any) => {
? ? ? ? ? ? item['毛利潤(rùn)'] = item[`毛利潤(rùn)實(shí)際${this.currentVal}實(shí)際數(shù)值`]
? ? ? ? ? ? item['毛利率'] = item[`last_法人毛利率實(shí)際${this.currentVal}實(shí)際數(shù)值`]
? ? ? ? ? ? item[`毛利率${!isLj ? '月度' : '累計(jì)月度'}目標(biāo)`] = item[`法人毛利率實(shí)際當(dāng)期數(shù)實(shí)際月度目標(biāo)`]
? ? ? ? ? }
? ? ? ? ),
? ? ? },
? ? }
? ? if (isLj) {
? ? ? let source = chartOption_1.dataset.source
? ? ? for (let i = 0; i < source.length; i++) {
? ? ? ? if (i > 0) {
? ? ? ? ? source[i]['毛利率累計(jì)月度目標(biāo)'] = source[i]['毛利率累計(jì)月度目標(biāo)'] + source[i - 1]['毛利率累計(jì)月度目標(biāo)']
? ? ? ? }
? ? ? }
? ? }
? ? this.chartOption_1 = chartOption_1
? }
? async fetchChartData_mll_bk() {
? ? let isLj: boolean = this.currentVal == '累計(jì)數(shù)'
? ? const res: any = await getKanbanCardList({
? ? ? ...this.queryParams,
? ? ? cardName: '毛利率業(yè)務(wù)板塊',
? ? ? statistical: isLj ? '當(dāng)期數(shù),累計(jì)數(shù)' : '當(dāng)期數(shù)',
? ? })
? ? if (!res.data.currentDataList) res.data.currentDataList = [{ dataSet: { newDataList: [] } }]
? ? if (!res.data.import) res.data.import = [{ dataSet: { newDataList: [] } }]
? ? const chartOption_2 = {
? ? ? ...geEchartsOptions('barLinePercent'),
? ? ? series: [
? ? ? ? { type: 'bar' },
? ? ? ? { type: 'line', yAxisIndex: 1, unit: '%', symbolSize: 5 },
? ? ? ? { type: 'line', yAxisIndex: 1, unit: '%', symbolSize: 5 },
? ? ? ],
? ? ? dataset: [
? ? ? ? {
? ? ? ? ? dimensions: ['內(nèi)部條線', '毛利潤(rùn)', `毛利率`, `毛利率${!isLj ? '月度' : '年度'}目標(biāo)`],
? ? ? ? ? source: transferForNewDataList(
? ? ? ? ? ? [
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? list: res.data.currentDataList[0].dataSet.newDataList,
? ? ? ? ? ? ? ? prefix: '',
? ? ? ? ? ? ? ? axisName: '內(nèi)部條線',
? ? ? ? ? ? ? },
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? list: res.data.import[0].dataSet.newDataList,
? ? ? ? ? ? ? ? prefix: 'last_',
? ? ? ? ? ? ? ? axisName: '內(nèi)部條線',
? ? ? ? ? ? ? },
? ? ? ? ? ? ],
? ? ? ? ? ? (item: any) => {
? ? ? ? ? ? ? item['毛利潤(rùn)'] = item[`last_毛利潤(rùn)實(shí)際${this.currentVal}實(shí)際數(shù)值`]
? ? ? ? ? ? ? item['毛利率'] = item[`法人毛利率實(shí)際${this.currentVal}實(shí)際數(shù)值`]
? ? ? ? ? ? ? item[`毛利率${!isLj ? '月度' : '年度'}目標(biāo)`] =
? ? ? ? ? ? ? ? item[`last_法人毛利率實(shí)際當(dāng)期數(shù)實(shí)際${!isLj ? '月度目標(biāo)' : '年度目標(biāo)'}`]
? ? ? ? ? ? }
? ? ? ? ? ),
? ? ? ? },
? ? ? ],
? ? }
? ? this.chartOption_2 = chartOption_2
? }
}
miuldeC.js
// 正負(fù)柱狀圖(帶折線)
const barBoth_bar = {
? dataset: [
? ? {
? ? ? dimensions: [],
? ? ? source: [],
? ? },
? ],
? xAxis: { type: 'category', axisTick: { show: false }, splitLine: { show: false }, axisLabel: { rotate: 0 } },
? yAxis: [
? ? {
? ? ? type: 'value',
? ? ? axisTick: { show: false },
? ? ? axisLine: { show: false },
? ? ? splitLine: { show: false },
? ? ? name: '單位: 萬(wàn)',
? ? ? nameTextStyle: {
? ? ? ? padding: [0, 0, 18, 0],
? ? ? },
? ? },
? ],
? tooltip: {
? ? trigger: 'axis',
? },
? legend: {
? ? show: true,
? ? top: 10,
? ? right: 10,
? },
? series: [
? ? {
? ? ? type: 'bar',
? ? ? stack: 'Total',
? ? ? unit: '萬(wàn)',
? ? ? label: {
? ? ? ? show: false,
? ? ? ? position: 'inside',
? ? ? },
? ? },
? ? {
? ? ? type: 'bar',
? ? ? stack: 'Total',
? ? ? unit: '萬(wàn)',
? ? ? label: {
? ? ? ? show: false,
? ? ? ? position: 'inside',
? ? ? },
? ? },
? ? {
? ? ? type: 'line',
? ? ? smooth: false,
? ? ? unit: '萬(wàn)',
? ? ? label: {
? ? ? ? show: false,
? ? ? ? position: 'inside',
? ? ? },
? ? },
? ],
}
// 折線圖
const line = {
? dataset: [
? ? {
? ? ? dimensions: [],
? ? ? source: [],
? ? },
? ],
? xAxis: { type: 'category', axisTick: { show: false }, splitLine: { show: false }, axisLabel: { rotate: 0 } },
? yAxis: {
? ? type: 'value',
? ? name: '單位: %',
? ? nameTextStyle: {
? ? ? padding: [0, 0, 18, 0],
? ? },
? ? axisTick: { show: false },
? ? axisLine: { show: false },
? ? splitLine: { show: false },
? ? axisLabel: {
? ? ? formatter: '{value} %',
? ? },
? },
? tooltip: {
? ? trigger: 'axis',
? },
? legend: {
? ? show: true,
? ? top: 10,
? ? right: 10,
? },
? series: [
? ? {
? ? ? type: 'line',
? ? ? unit: '%',
? ? ? smooth: false,
? ? ? label: {
? ? ? ? show: false,
? ? ? ? position: 'inside',
? ? ? },
? ? },
? ? {
? ? ? type: 'line',
? ? ? unit: '%',
? ? ? smooth: false,
? ? ? label: {
? ? ? ? show: false,
? ? ? ? position: 'inside',
? ? ? },
? ? ? lineStyle: {
? ? ? ? width: 4,
? ? ? },
? ? },
? ],
}
export const cardConfigMap: any = { ?
barBoth_bar,
? line,
}
moudleD.vue
import { cardConfigMap } from '../profit/index'
?let options = JSON.parse(JSON.stringify(cardConfigMap.? line))