Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 63662dd4 by wdc147
Options

update

parent 5968f57d
Showing with 521 additions and 0 deletions
src/components/echarts/BarPillarChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'BarPillarChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '136px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '100%', height = '90px' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'bar',
barWidth: '7px',
itemStyle: {
borderRadius: [3, 3, 0, 0],
color: {
// 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#24E8FF'
},
{
offset: 1,
color: '#00BEFF'
}
]
}
},
label: {
show: false
},
data: []
}
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
title: {
show: false
},
grid: {
left: 0,
right: 0,
bottom: 10,
top: 10,
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
interval: 0,
show: true,
fontSize: 14,
color: '#469CCC'
},
data: []
},
yAxis: [
{
type: 'value',
max: 'dataMax',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
axisLabel: {
color: '#469CCC',
fontSize: 14,
fontFamily: 'CenturyGothic',
formatter: '{value}%'
}
}
]
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/components/echarts/BarStacked.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'BarStacked',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '31px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '100%', height = '90px' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'bar',
barWidth: '25px',
stack: 'Tik Tok',
itemStyle: {
borderRadius: [4, 4, 4, 4],
color: {
// 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#24E8FF'
},
{
offset: 1,
color: '#00BEFF'
}
]
}
},
label: {
show: true,
position: 'insideRight',
offset: [-40, 2],
formatter: function (params) {
return '{a|' + params.data.name + '}{b|' + params.data.value + params.data.unit + '}'
},
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
}
},
data: []
}
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultOption = {
title: {
show: false
},
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true
},
xAxis: {
type: 'value',
max: 'dataMax',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: '#ffffff',
fontSize: 14,
fontFamily: 'CenturyGothic'
},
data: []
}
]
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/components/echarts/GuagePart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'GuagePart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '95px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '', height = '' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = [{
// ================== series ==================
seriesName: 'main',
type: 'gauge',
radius: '100%',
clockwise: false,
startAngle: 0,
endAngle: -270,
progress: {
show: true,
width: 7,
itemStyle: {
color: '#3EB8F7'
}
},
axisLine: {
show: true,
lineStyle: {
width: 10,
color: [[1, '#13293C']]
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
anchor: {
show: false
},
title: {
show: true,
fontSize: 18,
fontFamily: 'CenturyGothic',
color: '#ffffff',
fontWeight: '400',
offsetCenter: [0, '30%']
},
detail: {
valueAnimation: true,
formatter: function (value) {
return value
},
fontSize: 30,
fontWeight: '400',
color: '#ffffff',
fontFamily: 'MicrosoftYaHei',
offsetCenter: [0, '-20%']
},
data: []
}]
// ================= 以下无需改动 ==================
// 该模板适用于series内部的多个图表配置差异较大的情况，传入的series对象会与组件中seriesName相同的对象进行合并，如无相同seriesName则添加到末尾
const result = defSeriesOpts
const { seriesData = [] } = this.option
if (seriesData.length) {
const filterData = seriesData.filter(v => this.utils.isObject(v)) || []
for (let i = 0, len = filterData.length; i < len; i++) {
const item = filterData[i] || {}
const matchIndex = defSeriesOpts.findIndex(g => g.seriesName === item.seriesName)
if (matchIndex > -1) {
const newTempSeriesObj = this.deepMerge({}, result[matchIndex], item)
result[matchIndex] = newTempSeriesObj
} else {
// 新增的series必须配置`type`属性
item.type && result.push(item)
}
}
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultOption = {
// ================== 除series外的其他所有option ==================
}
// ================== 以下无需改动 ==================
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base || {})
result.series = this.getSeriesData()
return result
}
}
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment