echarts组件——折线统计图
组件代码
<template>
<div :class="classname" :style="{height:height,width:width}" />
</template>
<script>
// 折线图&折线渐变图
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 2000
export default {
mixins: [resize],
props: {
classname: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
color: { // 折线图颜色
type: Array,
default: () => ['rgba(88, 201, 113, 1)', 'rgba(22, 93, 255, 1)']
},
areacolor: { // 渐变颜色
type: Array,
default: () => [
['rgba(88, 201, 113, 0.3)', 'rgba(22, 93, 255, 0.3)'],
['rgba(88, 201, 113, 0)', 'rgba(22, 93, 255, 0)']
]
},
xaxisdata: { // x轴数据
type: Array,
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
legenddata: { // 图例
type: Array,
default: () => [
'Direct',
'Mail Ad',
'Affiliate Ad',
'Video Ad',
'Search Engine'
]
},
legendshow: { // 图例显示
type: Boolean,
default: () => true
},
linedata: { // 数据
type: Array,
default: () => [
[100, 302, 301, 334, 390, 330, 320],
[320, 132, 101, 134, 90, 230, 210],
[220, 182, 191, 234, 290, 330, 310],
[150, 212, 201, 154, 190, 330, 410],
[820, 832, 901, 934, 1290, 1330, 1320]
]
},
labelshow: { // 数字是否展示
type: Boolean,
default: false
},
areashow: { // 是否有渐变阴影效果
type: Boolean,
default: false
},
smooth: { // 曲线是否平滑
type: Boolean,
default: false
},
ratiodata: { // 环比数据
type: Array,
default: () => []
},
rationame: {
type: String,
default: '环比'
},
ratiounit: {
type: String,
default: ''
},
xlinecolor: {
type: String,
default: '#000000'
},
ylinecolor: {
type: String,
default: '#000000'
},
gridbottom: {
type: String,
default: '0'
},
valueunit: {
type: String,
default: ''
},
toolnamecust: {
type: Boolean,
default: false
},
// x轴标签是否全部显示
axislabelshow: {
type: Boolean,
default: false
}
},
data() {
return {
series: [],
chart: null
}
},
watch: {
linedata: {
deep: true,
handler(val) {
this.$nextTick(() => {
this.series = this.legenddata.map((name, sid) => {
const data = {
name,
type: 'line',
smooth: this.smooth,
showSymbol: false,
data: this.linedata[sid],
animationDuration
}
if (this.areashow) {
data.areaStyle = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: this.areacolor[0][sid] // 0% 处的颜色
},
{
offset: 1,
color: this.areacolor[1][sid] // 100% 处的颜色
}
])
}
}
return data
})
this.initChart()
})
}
}
},
mounted() {
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
const _this = this
this.chart.setOption({
color: this.color,
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: (params) => {
let result = `<div>${params[0].axisValue}</div>`
if (_this.toolnamecust) {
result = `<div>${params[0].axisValue}:00</div>`
}
params.map((item, index) => {
result += `<div style="display: flex; justify-content: space-between"><span>${_this.legenddata[index]}: </span><span>${_this.linedata[index][params[0].dataIndex]}${this.valueunit}</span></div>`
})
if (this.ratiodata.length) {
result += `<div>${this.rationame}: ${this.ratiodata[params[0].dataIndex]}${this.ratiounit}</div>`
}
return result
}
},
legend: {
icon: 'circle',
top: '0',
right: '0',
show: this.legendshow,
data: this.legenddata,
bottom: '0'
},
grid: {
top: '15%',
left: '0%',
right: '0%',
bottom: this.gridbottom,
containLabel: true
},
xAxis: [{
type: 'category',
data: this.xaxisdata,
axisTick: {
show: false,
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: this.xlinecolor
}
},
axisLabel: this.axislabelshow ? {
interval: 0 // x轴标签全部显示
} : {}
}],
yAxis: [{
type: 'value',
// name: '单位',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: this.ylinecolor
}
},
splitLine: {
show: true,
lineStyle: {
color: '#E5E6EB',
type: 'dashed'
}
},
splitArea: {
show: false
}
}],
series: this.series,
dataZoom: this.axislabelshow ? [
{
show: true,
type: 'slider',
backgroundColor: 'rgba(127, 127, 127, 0.3)',
fillerColor: 'rgba(127, 127, 127, 1)',
borderColor: 'rgba(127, 127, 127, 0.3)',
showDetail: false,
filterMode: 'empty',
showDataShadow: false,
brushSelect: false, // 是否开启刷选功能
height: 10,
handleSize: 0,
xAxisIndex: [0],
zoomLock: true, // 是否锁定选择区域(或叫做数据窗口)的大小
throttle: 100, // 设置触发视图刷新的频率。
realtime: true,
bottom: '-2%',
startValue: 0,
endValue: 6
}
] : []
})
}
}
}
</script>
使用组件,传值格式可以看组件的默认数据的格式