模块导入
moudleA.js
export const pie = {
dataset: [
{
dimensions: ['name', 'value'],// ['条线', '金额'],
source: [
// { 条线: '产品中心合计', 金额: 71139, 营业收入: 7113 },
// { 条线: '科研中心合计', 金额: 628, 营业收入: 62 },
// { 条线: '销售中心', 金额: 128985, 营业收入: 12898 },
// { 条线: '经营子公司合计', 金额: 57237, 营业收入: 5723 },
// { 条线: '经营类子公司抵消', 金额: 20, 营业收入: 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: ['条线', '金额', '人数'],
// source: [
// { 条线: '政务', 金额: 128, 人数: 100 },
// { 条线: '信息', 金额: 28, 人数: 100 },
// ]
// }
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
},
},
legend: {
data: ['流入', '流出', '达成率'],
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), //粗细
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), //粗细
data: [26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
},
{
name: '达成率',
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: [
// { 条线: '政务', 合同金额: 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: '达成金额',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml',
},
}
],
series: [
// {
// name: '流入',
// type: 'bar',
// barGap:'20%', //柱状图双柱的间距
// barWidth:getPx(30), //粗细
// 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), //粗细
// data: [26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
// },
// {
// name: '达成率',
// 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('柱状图转化函数 :>> ', options, data);
}
}
// 正负折柱图
export const barBoth = {
dataset: [
{
dimensions: ['条线', '达成', '缺口'],
source: [
// { 条线: '成人教育', 达成: 128985.451705, 缺口: -10000 },
// { 条线: '图慧', 达成: 108985.451705, 缺口: -20000 },
// { 条线: '俺想', 达成: 88985.451705, 缺口: -30000 },
// { 条线: '政务', 达成: 68985.451705, 缺口: -20000 },
// { 条线: '环保', 达成: 48985.451705, 缺口: -40000 },
// { 条线: '数字化', 达成: 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 }, // 坐标轴线
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: '经营流入',
type: 'bar',
stack: 'Total',
barWidth: getPx(30),
label: {
show: false,
position: 'inside',
},
},
{
name: '经营流出',
type: 'bar',
stack: 'Total',
barWidth: getPx(30),
label: {
show: false,
position: 'inside',
},
},
{
name: '净现金流',
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: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'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: ['负值', '正值'],
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: {
月份: ['排期余额', '经营流入', '经营流出', '投资流入', '投资流出', '融资流入', '融资流出', '期末余额'],
调整: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689],
正值: [900, 345, 393, '-', '-', 135, 178, 286],
负值: ['-', '-', '-', 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: '调整',
},
},
{
name: '正值',
type: 'bar',
stack: '总量',
barWidth: getPx(30), //粗细
label: {
show: true,
position: 'top',
},
barGap: '20%', //柱状图双柱的间距
encode: {
x: '月份',
y: '正值',
},
},
{
name: '负值',
type: 'bar',
stack: '总量',
barGap: '20%', //柱状图双柱的间距
label: {
show: true,
position: 'bottom',
},
encode: {
x: '月份',
y: '负值',
},
},
],
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 = '累计数'
chartOption_1: any = geEchartsOptions('barLinePercent')
chartOption_2: any = geEchartsOptions('barLinePercent')
created() {}
/**
* 查询数据
*/
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 == '累计数'
const res: any = await getKanbanCardList({
...this.queryParams,
cardName: '毛利率整体',
statistical: isLj ? '当期数,累计数' : '当期数',
})
const chartOption_1 = {
...geEchartsOptions('barLinePercent'),
series: [
{ type: 'bar' },
{ type: 'line', yAxisIndex: 1, unit: '%', symbolSize: 5 },
{ type: 'line', yAxisIndex: 1, unit: '%', symbolSize: 5 },
],
dataset: {
dimensions: ['期间', '毛利润', `毛利率`, `毛利率${!isLj ? '月度' : '累计月度'}目标`],
source: transferForNewDataList(
[
{
list: res.data.currentDataList[0].dataSet.newDataList,
prefix: '',
axisName: '年份期间',
},
{
list: res.data.online[0].dataSet.newDataList,
prefix: 'last_',
axisName: '年份期间',
},
],
(item: any) => {
item['毛利润'] = item[`毛利润实际${this.currentVal}实际数值`]
item['毛利率'] = item[`last_法人毛利率实际${this.currentVal}实际数值`]
item[`毛利率${!isLj ? '月度' : '累计月度'}目标`] = item[`法人毛利率实际当期数实际月度目标`]
}
),
},
}
if (isLj) {
let source = chartOption_1.dataset.source
for (let i = 0; i < source.length; i++) {
if (i > 0) {
source[i]['毛利率累计月度目标'] = source[i]['毛利率累计月度目标'] + source[i - 1]['毛利率累计月度目标']
}
}
}
this.chartOption_1 = chartOption_1
}
async fetchChartData_mll_bk() {
let isLj: boolean = this.currentVal == '累计数'
const res: any = await getKanbanCardList({
...this.queryParams,
cardName: '毛利率业务板块',
statistical: isLj ? '当期数,累计数' : '当期数',
})
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: ['内部条线', '毛利润', `毛利率`, `毛利率${!isLj ? '月度' : '年度'}目标`],
source: transferForNewDataList(
[
{
list: res.data.currentDataList[0].dataSet.newDataList,
prefix: '',
axisName: '内部条线',
},
{
list: res.data.import[0].dataSet.newDataList,
prefix: 'last_',
axisName: '内部条线',
},
],
(item: any) => {
item['毛利润'] = item[`last_毛利润实际${this.currentVal}实际数值`]
item['毛利率'] = item[`法人毛利率实际${this.currentVal}实际数值`]
item[`毛利率${!isLj ? '月度' : '年度'}目标`] =
item[`last_法人毛利率实际当期数实际${!isLj ? '月度目标' : '年度目标'}`]
}
),
},
],
}
this.chartOption_2 = chartOption_2
}
}
miuldeC.js
// 正负柱状图(带折线)
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: '单位: 万',
nameTextStyle: {
padding: [0, 0, 18, 0],
},
},
],
tooltip: {
trigger: 'axis',
},
legend: {
show: true,
top: 10,
right: 10,
},
series: [
{
type: 'bar',
stack: 'Total',
unit: '万',
label: {
show: false,
position: 'inside',
},
},
{
type: 'bar',
stack: 'Total',
unit: '万',
label: {
show: false,
position: 'inside',
},
},
{
type: 'line',
smooth: false,
unit: '万',
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))
