基于Danvici二开，扩展水滴图与进度条图
想要完成上面的功能需要修改的文件比较多，图标自己到iconfont网站上面自己下载。为了不影响别的图标，自己在app/assets/目录下面新建一个目录，下载好的字体放进去
在/app/app.tsx文件中全局引入
import 'assets/BIfonts/iconfont.css'
然后要改动的主要就是containers/Widget目录下面的文件
conponents/Chart/Chrats.tsx文件中头部引入echarts-liquidfill
import 'echarts-liquidfill'
conponents/Chart/Widget/index.tsx文件中
export interface IChartStyles {
...
//TODO 该文件暂时可以不改不影响图表展示
//progress?: IGaugeConfig
}
conponents/Chart/Workbench/OperatingPanel.tsx文件中
const {
...
doubleYAxis,
progress,
liquidfill
} = styleParams
{gauge && (
<GaugeSection
title="仪表盘"
config={gauge}
onChange={this.styleChange('gauge')}
/>
)}代码后面添加下面代码
{progress && (
<GaugeSection
title="进度条"
config={progress}
onChange={this.styleChange('progress')}
/>
)}
{liquidfill && (
<GaugeSection
title="水滴图"
config={liquidfill}
onChange={this.styleChange('liquidfill')}
/>
)}
//GaugeSection组件后期需要替换掉，暂时不影响 在conponents/Chart/Workbench/ConfigSections文件夹下面创建需要的水滴图与进度条Setion页面可以参照GaugeSetion.tsx
修改 conponents/Chart/config/chart目录下面的ChartTypes.ts 在enum中添加下面代码
/** * 进度条 jeiiy */ Progress = 18, /** * 进度条 jeiiy */ Liquidfill = 19
修改 conponents/Chart/config/chart目录下面的index.tsx
import progress from './progress' import liquidfill from './liquidfill' const widgetlibs: IChartInfo[] = [ ... progress, liquidfill ]
在 conponents/Chart/config/chart 目录下添加liquidfill.ts
//jeiiy
import ChartTypes from './ChartTypes'
import echarts from 'echarts'
import {
PIVOT_CHART_FONT_FAMILIES,
PIVOT_DEFAULT_FONT_COLOR,
PIVOT_DEFAULT_AXIS_LINE_COLOR,
CHART_FUNNEL_LABEL_POSITIONS,
CHART_SORT_MODES,
CHART_ALIGNMENT_MODES,
DEFAULT_FONT_STYLE,
DEFAULT_ECHARTS_THEME
} from 'app/globalConstants'
import { IChartInfo } from 'containers/Widget/components/Widget'
const liquidfill: IChartInfo = {
id: ChartTypes.Liquidfill,
name: 'liquidfill',
title: '水波图',
icon: 'icon-chart-liquidfill',
coordinate: 'cartesian',
rules: [{ dimension: 1, metric: [1, 9999] }],
dimetionAxis: 'col',
data: {
cols: {
title: '列',
type: 'category'
},
rows: {
title: '行',
type: 'category'
},
metrics: {
title: '指标',
type: 'value'
},
filters: {
title: '筛选',
type: 'all'
},
color: {
title: '颜色',
type: 'category'
},
tip: {
title: '提示信息',
type: 'value'
}
},
style: {
liquidfill: {
radius: 75,
splitNumber: 10,
startAngle: 225,
endAngle: -45,
clockwise: true,
max: 100,
prefix: '',
suffix: '%',
showTitle: true,
titleFontFamily: PIVOT_CHART_FONT_FAMILIES[0].value,
titleFontSize: '16',
titleColor: PIVOT_DEFAULT_FONT_COLOR,
titleOffsetLeft: 0,
titleOffsetTop: -40,
showDetail: true,
detailFontFamily: PIVOT_CHART_FONT_FAMILIES[0].value,
detailFontSize: '28',
detailColor: PIVOT_DEFAULT_FONT_COLOR,
detailOffsetLeft: 0,
detailOffsetTop: 40,
showPointer: true,
pointerLength: 80,
pointerWidth: 8,
customPointerColor: false,
pointerColor: DEFAULT_ECHARTS_THEME.color[0],
pointerBorderStyle: 'solid',
pointerBorderWidth: 0,
pointerBorderColor: PIVOT_DEFAULT_AXIS_LINE_COLOR,
axisLineSize: 30,
axisLineColor: DEFAULT_ECHARTS_THEME.color[0],
showAxisTick: true,
showAxisLabel: true,
axisLabelDistance: 5,
axisLabelFontFamily: PIVOT_CHART_FONT_FAMILIES[0].value,
axisLabelFontSize: '12',
axisLabelColor: PIVOT_DEFAULT_FONT_COLOR,
showSplitLine: true,
splitLineLength: 30,
splitLineSize: '1',
splitLineStyle: 'solid',
splitLineColor: PIVOT_DEFAULT_AXIS_LINE_COLOR
}
}
}
export default liquidfill
conponents/Chart/config/chart 目录下添加progress.ts
//jeiiy
import ChartTypes from './ChartTypes'
import echarts from 'echarts'
import {
PIVOT_CHART_FONT_FAMILIES,
PIVOT_DEFAULT_FONT_COLOR,
PIVOT_DEFAULT_AXIS_LINE_COLOR,
CHART_FUNNEL_LABEL_POSITIONS,
CHART_SORT_MODES,
CHART_ALIGNMENT_MODES,
DEFAULT_FONT_STYLE,
DEFAULT_ECHARTS_THEME
} from 'app/globalConstants'
import { IChartInfo } from 'containers/Widget/components/Widget'
const progress: IChartInfo = {
id: ChartTypes.Progress,
name: 'progress',
title: '进度图',
icon: 'icon-chart-progress',
coordinate: 'cartesian',
rules: [{ dimension: 1, metric: [1, 9999] }],
dimetionAxis: 'col',
data: {
cols: {
title: '列',
type: 'category'
},
rows: {
title: '行',
type: 'category'
},
metrics: {
title: '指标',
type: 'value'
},
filters: {
title: '筛选',
type: 'all'
},
color: {
title: '颜色',
type: 'category'
},
tip: {
title: '提示信息',
type: 'value'
}
},
style: {
progress: {
radius: 75,
splitNumber: 10,
startAngle: 225,
endAngle: -45,
clockwise: true,
max: 100,
prefix: '',
suffix: '%',
showTitle: true,
titleFontFamily: PIVOT_CHART_FONT_FAMILIES[0].value,
titleFontSize: '16',
titleColor: PIVOT_DEFAULT_FONT_COLOR,
titleOffsetLeft: 0,
titleOffsetTop: -40,
showDetail: true,
detailFontFamily: PIVOT_CHART_FONT_FAMILIES[0].value,
detailFontSize: '28',
detailColor: PIVOT_DEFAULT_FONT_COLOR,
detailOffsetLeft: 0,
detailOffsetTop: 40,
showPointer: true,
pointerLength: 80,
pointerWidth: 8,
customPointerColor: false,
pointerColor: DEFAULT_ECHARTS_THEME.color[0],
pointerBorderStyle: 'solid',
pointerBorderWidth: 0,
pointerBorderColor: PIVOT_DEFAULT_AXIS_LINE_COLOR,
axisLineSize: 30,
axisLineColor: DEFAULT_ECHARTS_THEME.color[0],
showAxisTick: true,
showAxisLabel: true,
axisLabelDistance: 5,
axisLabelFontFamily: PIVOT_CHART_FONT_FAMILIES[0].value,
axisLabelFontSize: '12',
axisLabelColor: PIVOT_DEFAULT_FONT_COLOR,
showSplitLine: true,
splitLineLength: 30,
splitLineSize: '1',
splitLineStyle: 'solid',
splitLineColor: PIVOT_DEFAULT_AXIS_LINE_COLOR
}
}
}
export default progress
在conponents/Chart/render/chart目录下创建liquidfill.ts
/*
* <<
* Davinci
* ==
* Copyright (C) 2016 - 2017 EDP
* ==
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* >>
*/
import Echarts from 'echarts'
/*
* jeiiy
*/
import { IChartProps } from '../../components/Chart'
import { decodeMetricName } from '../../components/util'
// import { EChartOption } from 'echarts'
import { getFormattedValue } from '../../components/Config/Format'
export default function (chartProps: IChartProps, drillOptions?: any) {
const { width, height, data, cols, metrics, chartStyles } = chartProps
const { axis, splitLine, liquidfill } = chartStyles
const {
radius,
splitNumber,
startAngle,
endAngle,
clockwise,
prefix,
suffix,
showTitle,
titleFontFamily,
titleFontSize,
titleColor,
titleOffsetLeft,
titleOffsetTop,
showDetail,
detailFontFamily,
detailFontSize,
detailColor,
detailOffsetLeft,
detailOffsetTop,
showPointer,
pointerLength,
pointerWidth,
customPointerColor,
pointerColor,
pointerBorderStyle,
pointerBorderWidth,
pointerBorderColor,
axisLineSize,
axisLineColor,
showAxisTick,
showAxisLabel,
axisLabelDistance,
axisLabelFontFamily,
axisLabelFontSize,
axisLabelColor,
showSplitLine,
splitLineLength,
splitLineSize,
splitLineStyle,
splitLineColor
} = liquidfill
const max = liquidfill.max || 100
const seriesObj = {}
const seriesArr = []
const value = 0.2
const datas = [value, value, value]
const options = {
backgroundColor: new Echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
{
offset: 0,
color: '#431ab8'
},
{
offset: 1,
color: '#471bba'
}
]),
title: {
text: `${(value * 100).toFixed(0)}{a|%}`,
textStyle: {
fontSize: 50,
fontFamily: 'Microsoft Yahei',
fontWeight: 'normal',
color: '#bcb8fb',
rich: {
a: {
fontSize: 28
}
}
},
x: 'center',
y: '35%'
},
graphic: [
{
type: 'group',
left: 'center',
top: '60%',
children: [
{
type: 'text',
z: 100,
left: '10',
top: 'middle',
style: {
fill: '#aab2fa',
text: '流量统计',
font: '20px Microsoft YaHei'
}
}
]
}
],
series: [
{
type: 'liquidFill',
radius: '80%',
center: ['50%', '50%'],
// shape: 'roundRect',
data: datas,
backgroundStyle: {
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0.5,
y2: 1,
colorStops: [
{
offset: 1,
color: 'rgba(68, 145, 253, 0)'
},
{
offset: 0.5,
color: 'rgba(68, 145, 253, .25)'
},
{
offset: 0,
color: 'rgba(68, 145, 253, 1)'
}
],
globalCoord: false
}
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 20,
borderColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(69, 73, 240, 0)'
},
{
offset: 0.5,
color: 'rgba(69, 73, 240, .25)'
},
{
offset: 1,
color: 'rgba(69, 73, 240, 1)'
}
],
globalCoord: false
},
shadowBlur: 10,
shadowColor: '#000'
}
},
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: 'rgba(58, 71, 212, 0)'
},
{
offset: 0.5,
color: 'rgba(31, 222, 225, .2)'
},
{
offset: 0,
color: 'rgba(31, 222, 225, 1)'
}
],
globalCoord: false
}
},
label: {
normal: {
formatter: ''
}
}
}
]
}
metrics.forEach((m) => {
const decodedMetricName = decodeMetricName(m.name)
seriesArr.push(seriesObj)
})
// const tooltip: EChartOption.Tooltip = {
// trigger: 'item',
// formatter: '{b}: {c}'
// }
return options
}
conponents/Chart/render/chart 目录下创建progress.ts
/*
* <<
* Davinci
* ==
* Copyright (C) 2016 - 2017 EDP
* ==
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* >>
*/
import Echarts from 'echarts'
/*
* jeiiy
*/
import { IChartProps } from '../../components/Chart'
import { decodeMetricName } from '../../components/util'
// import { EChartOption } from 'echarts'
import { getFormattedValue } from '../../components/Config/Format'
export default function (chartProps: IChartProps, drillOptions?: any) {
console.log('又进来了')
const { width, height, data, cols, metrics, chartStyles } = chartProps
const { axis, splitLine, progress } = chartStyles
const {
radius,
splitNumber,
startAngle,
endAngle,
clockwise,
prefix,
suffix,
showTitle,
titleFontFamily,
titleFontSize,
titleColor,
titleOffsetLeft,
titleOffsetTop,
showDetail,
detailFontFamily,
detailFontSize,
detailColor,
detailOffsetLeft,
detailOffsetTop,
showPointer,
pointerLength,
pointerWidth,
customPointerColor,
pointerColor,
pointerBorderStyle,
pointerBorderWidth,
pointerBorderColor,
axisLineSize,
axisLineColor,
showAxisTick,
showAxisLabel,
axisLabelDistance,
axisLabelFontFamily,
axisLabelFontSize,
axisLabelColor,
showSplitLine,
splitLineLength,
splitLineSize,
splitLineStyle,
splitLineColor
} = progress
const max = progress.max || 100
const seriesObj = {}
const seriesArr = []
const category = [
{
name: '累计完成',
value: 612.5
}
] // 类别
const total = 1000 // 数据总数
// const datas = []
// category.forEach((value) => {
// datas.push(value.value)
// })
const options = {
grid: {
// 直角坐标系内绘图网格
left: '80', // grid 组件离容器左侧的距离,
// left的值可以是80这样具体像素值，
// 也可以是'80%'这样相对于容器高度的百分比
top: '80',
right: '0',
bottom: '0',
containLabel: true // gid区域是否包含坐标轴的刻度标签。为true的时候，
// left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
// 所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
},
xAxis: {
// 直角坐标系grid中的x轴,
// 一般情况下单个grid组件最多只能放上下两个x轴,
// 多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
type: 'value', // 坐标轴类型,分别有：
// 'value'-数值轴；'category'-类目轴;
// 'time'-时间轴;'log'-对数轴
splitLine: { show: false }, // 坐标轴在 grid 区域中的分隔线
axisLabel: { show: false }, // 坐标轴刻度标签
axisTick: { show: false }, // 坐标轴刻度
axisLine: { show: false } // 坐标轴轴线
},
yAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: 'black',
fontSize: 36
},
data: ['a'] // 类目数据，在类目轴（type: 'category'）中有效。
// 如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
},
series: [
// 系列列表。每个系列通过 type 决定自己的图表类型
{
name: '%', // 系列名称
type: 'bar', // 柱状、条形图
barWidth: 19, // 柱条的宽度,默认自适应
data: [20], // 系列中数据内容数组
label: {
// 图形上的文本标签
show: true,
position: 'right', // 标签的位置
offset: [0, -40], // 标签文字的偏移，此处表示向上偏移40
formatter: '{c}{a}', // 标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
color: 'black', // 标签字体颜色
fontSize: 36 // 标签字号
},
itemStyle: {
// 图形样式
normal: {
// normal 图形在默认状态下的样式;
// emphasis图形在高亮状态下的样式
barBorderRadius: 10, // 柱条圆角半径,单位px.
// 此处统一设置4个角的圆角大小;
// 也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
color: new Echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#22B6ED'
},
{
offset: 1,
color: '#3FE279'
}
])
}
},
zlevel: 1 // 柱状图所有图形的 zlevel 值,
// zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
},
{
name: '进度条背景',
type: 'bar',
barGap: '-100%', // 不同系列的柱间距离，为百分比。
// 在同一坐标系上，此属性会被多个 'bar' 系列共享。
// 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
// 并且是对此坐标系中所有 'bar' 系列生效。
barWidth: 19,
data: [100],
color: '#151B87', // 柱条颜色
itemStyle: {
normal: {
barBorderRadius: radius
}
}
}
]
}
metrics.forEach((m) => {
const decodedMetricName = decodeMetricName(m.name)
// seriesObj = {
// type: 'gauge',
// splitNumber,
// startAngle,
// endAngle,
// clockwise,
// max,
// radius: radius ? `${radius}%` : '75%',
// title: {
// show: showTitle,
// fontFamily: titleFontFamily,
// fontSize: titleFontSize,
// color: titleColor,
// offsetCenter: [
// titleOffsetLeft ? `${titleOffsetLeft}%` : 0,
// titleOffsetTop ? `${titleOffsetTop}%` : 0
// ]
// },
// detail: {
// show: showDetail,
// fontFamily: detailFontFamily,
// fontSize: detailFontSize,
// color: detailColor,
// offsetCenter: [
// detailOffsetLeft ? `${detailOffsetLeft}%` : 0,
// detailOffsetTop ? `${detailOffsetTop}%` : 0
// ],
// formatter: (value) => `${prefix}${getFormattedValue(Number(value) * 100 / max, m.format)}${suffix}`,
// // rich: {},
// // width: 240,
// // height: 240,
// // borderRadius: 120,
// // lineHeight: 240,
// // backgroundColor: '#05354a'
// },
// // animationDuration: 1000,
// // animationDurationUpdate: 1000,
// data: [{
// value: data.length ? data[0][`${m.agg}(${decodedMetricName})`] : 0,
// name: m.field.alias || decodedMetricName
// }],
// axisLine: {
// lineStyle: {
// width: axisLineSize,
// color: [
// [data.length ? data[0][`${m.agg}(${decodedMetricName})`] / max : 0, axisLineColor],
// [1, '#ddd']
// ]
// }
// },
// axisTick: {
// show: showAxisTick
// },
// axisLabel: {
// show: showAxisLabel,
// distance: axisLabelDistance,
// fontSize: axisLabelFontSize,
// fontFamily: axisLabelFontFamily,
// color: axisLabelColor
// },
// splitLine: {
// show: showSplitLine,
// length: splitLineLength,
// lineStyle: {
// color: splitLineColor,
// width: splitLineSize,
// type: splitLineStyle
// }
// },
// pointer: {
// show: showPointer,
// length: pointerLength ? `${pointerLength}%` : 0,
// width: pointerWidth
// },
// itemStyle: {
// color: customPointerColor ? pointerColor : 'auto',
// borderType: pointerBorderStyle,
// borderWidth: pointerBorderWidth,
// borderColor: pointerBorderColor
// }
// }
seriesArr.push(seriesObj)
})
// const tooltip: EChartOption.Tooltip = {
// trigger: 'item',
// formatter: '{b}: {c}'
// }
return options
}
修改 conponents/Chart/render/chart/index.ts
import progress from './progress' import liquidfill from './liquidfill' switch 方法中添加下面逻辑 case 'progress': return progress(chartProps, drillOptions) case 'liquidfill': return liquidfill(chartProps, drillOptions)
代码搬运工
浙公网安备 33010602011771号