diff --git a/src/views/screen/util/BarOptions.js b/src/views/screen/util/BarOptions.js
index 74512d8..dbafd77 100644
--- a/src/views/screen/util/BarOptions.js
+++ b/src/views/screen/util/BarOptions.js
@@ -2,7 +2,7 @@ import * as echarts from 'echarts'
import { formatMoney } from '../../../utils/formatMoney'
import { deepMerge } from '../../../utils/util'
-
+// 正常的柱状图配置
export const BarOptions = {
// color: ['#4471EF', '#00D8F1', '#6CFBCE'],
color: [
@@ -135,7 +135,6 @@ export const BarOptions = {
}
return newParamsName
}
-
},
type: 'category',
boundaryGap: ['30%', '20%'],
@@ -170,12 +169,164 @@ export const BarOptions = {
}
}
-// 生成柱状图
-export function createBarChart(idName, option) {
+// X轴是value的配置
+export const BarAxisTransformOptions = {
+ color: [
+ {
+ type: 'linear',
+ x: 1,
+ y: 0,
+ x2: 0,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0, color: '#4471EF' // 0% 处的颜色
+ },
+ {
+ offset: 0.9, color: '#2D419A' // 100% 处的颜色
+ },
+ {
+ offset: 1, color: 'transparent' // 100% 处的颜色
+ }
+ ],
+ global: false // 缺省为 false
+ },
+ '#69C4F3'
+ ],
+ tooltip: {
+ trigger: 'axis',
+ formatter: params => {
+ // 获取xAxis data中的数据
+ let dataStr = `
${params[0].name}
`
+ params.forEach(item => {
+ let color = ''
+ if(typeof item.color === 'string') {
+ color = item.color
+ } else {
+ color = item.color.colorStops[0].color
+ }
+ dataStr += `
+
+
+ ${item.seriesName}
+ ${item.value}
+
+
`
+ })
+ return dataStr
+ },
+ borderWidth: 0,
+ //提示框浮层的背景颜色
+ backgroundColor: '#233062',
+ //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
+ extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;'
+ },
+
+ legend: {
+ //图例的公用文本样式。
+ textStyle: {
+ color: '#7599E8'
+ },
+ itemWidth: 14,
+ right: '3%'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ toolbox: {},
+ yAxis: {
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#7599E8'
+ }
+ },
+ axisLabel: {
+ show: true,
+ color: '#7FA6FB',
+ interval: 0,
+ formatter: function(params) {
+ let newParamsName = '' // 最终拼接成的字符串
+ let paramsNameNumber = params.length // 实际标签的个数
+ let provideNumber = 10 // 每行能显示的字的个数
+ let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
+ /**
+ * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+ */
+ // 条件等同于rowNumber>1
+ if (paramsNameNumber > provideNumber) {
+ /** 循环每一行,p表示行 */
+ for (let p = 0; p < rowNumber; p++) {
+ let tempStr = ''// 表示每一次截取的字符串
+ let start = p * provideNumber // 开始截取的位置
+ let end = start + provideNumber // 结束截取的位置
+ // 此处特殊处理最后一行的索引值
+ if (p === rowNumber - 1) {
+ // 最后一次不换行
+ tempStr = params.substring(start, paramsNameNumber)
+ } else {
+ // 每一次拼接字符串并换行
+ tempStr = params.substring(start, end) + '\n'
+ }
+ newParamsName += tempStr // 最终拼成的字符串
+ }
+ } else {
+ // 将旧标签的值赋给新标签
+ newParamsName = params
+ }
+ return newParamsName
+ }
+ },
+ type: 'category',
+ boundaryGap: ['30%', '20%'],
+ // 刻度线设置
+ axisTick: {
+ show: false
+ },
+ // TODO 需要自己扩展的
+ data: []
+ },
+ xAxis: {
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#7599E8'
+ }
+ },
+ axisLabel: {
+ show: true,
+ color: '#7FA6FB'
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#7599E8',
+ type: 'dashed'
+ }
+ },
+ type: 'value',
+ nameTextStyle: {
+ color: '#7FA6FB'
+ }
+ }
+}
+
+/**
+ * 生成柱状图
+ * @param idName --- 当前dom的id
+ * @param option --- 配置项
+ * @param xValue --- 横坐标是否是value，默认不传
+ */
+export function createBarChart(idName, option, xValue) {
const chartDom = document.getElementById(idName)
echarts.dispose(chartDom)
// debugger
let chartOption = deepMerge({}, BarOptions, option)
+ if(xValue) {
+ chartOption = deepMerge({},BarAxisTransformOptions, option)
+ }
let myChart = echarts.init(chartDom)
chartOption && myChart.setOption(chartOption)
window.addEventListener('resize', () => {