使用:
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#73D0C0'
}, {
offset: 1,
color: '#3BC2E4'
}]),
注意引入:
import echarts from 'echarts/lib/echarts';
import "echarts/lib/component/graphic";
<template>
<v-chart ref="chart" :options="option" />
</template>
<script>
import ECharts from 'vue-echarts'
import echarts from 'echarts/lib/echarts';
import "echarts/lib/component/graphic";
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/markArea'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
export default {
components: {
'v-chart': ECharts
},
props: {
valueList: {
type: Array,
default: () => [],
},
xAxisList: {
type: Array,
default: () => [],
},
legendList: {
type: Array,
default: () => [],
}
},
watch: {
xAxisList: {
handler () {
this.change()
},
deep: true
},
valueList: {
handler () {
this.change()
},
deep: true
},
legendList: {
handler () {
this.change()
},
deep: true
}
},
created () {
this.change()
},
data () {
return {
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#eee'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
grid: {
top: 40,
left: 80,
right: 150,
borderColor: '#EFEDED',
bottom: 40
},
legend: {
data: [],
itemGap: 30,
right: '15',
top: '0',
},
xAxis: [
{
type: 'category',
data: [],
axisPointer: {
type: 'shadow'
},
axisTick: {
show: true
}
}
],
yAxis: [
{
type: 'value',
// name: '水量',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value}'
},
'splitLine': {
lineStyle: {
type: 'dashed'
}
}
},
{
type: 'value',
// name: '温度',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value}'
},
'splitLine': {
lineStyle: {
type: 'dashed'
}
}
}
],
series: [
{
name: '',
type: 'bar',
barWidth: 6,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#73D0C0'
}, {
offset: 1,
color: '#3BC2E4'
}]),
barBorderRadius: [18, 18, 18, 18],//---图形形状
}
},
barWidth: '20', //---柱形宽度
barCategoryGap: '20%', //---柱形间距
data: []
},
{
name: '',
type: 'line',
yAxisIndex: 1, //折线粗细
symbol: 'circle', //折线原点
symbolSize: 10,
itemStyle: {
color: '#FFA72C'
},
data: []
}
]
}
}
},
created () {
this.change()
},
methods: {
reload () {
this.change()
},
change () {
this.$nextTick(() => {
if (this.valueList.length == 0 || this.legendList.length == 0 || this.xAxisList.length == 0) return
this.option.series[0].data = []
this.option.series[1].data = []
let value1 = []
let value2 = []
this.option.legend.data = this.legendList
this.option.xAxis[0].data = this.xAxisList
this.option.series[0].name = this.valueList[0].title + '成绩'
this.option.series[1].name = this.valueList[0].title + '分数'
this.valueList.forEach(e => {
e.descCountVos.forEach(t => {
if (t.desc === "成绩") {
this.option.series[0].data.push(t.value)
value1.push(t.value)
// this.option.series[0].data.push(65)
} else if (t.desc === "分数") {
this.option.series[1].data.push(t.value)
value2.push(t.value)
// this.option.series[1].data.push(85)
}
})
})
console.log(value1, value2, "1212")
let n = 0
let min1 = Math.min(...value1)
let max1 = Math.max(...value1)
if (max1 > 100 && max1 <= 1000) {
n = max1 / 100
} else if (max1 > 1000 && max1 <= 10000) {
n = max1 / 1000
}
let interval1 = 0
if (max1 >= 0 && max1 <= 10) {
interval1 = 1
} else if (max1 > 10 && max1 <= 100) {
interval1 = 10
} else if (max1 > 100 && max1 <= 100 * n) {
interval1 = 10 * n
} else if (max1 > 1000 && max1 <= 1000 * n) {
interval1 = 100 * n
}
this.$nextTick(() => {
// console.log(JSON.stringify(this.option))
})
// 后续进入时,不会根据数组变化而重新渲染,所以要主动刷新图表
if (this.$refs.chart) this.$refs.chart.chart.setOption(this.option, true)
})
}
}
}
</script>
<style lang='scss' scoped>
.echarts {
width: 100%;
height: 350px;
}
</style>