<template>
<div>
<div class="charts" ref="charts" :style="{'height': height}"></div>
</div>
</template>
<script type="text/ecmascript-6">
import echarts from 'echarts'
import {event} from 'common/js/event'
//波浪折线图
export default {
props:{
title: {
type: String,
default: '默认标题'
},
xAxisDataArr: { //X轴数据
type: Array,
default: () => { return ['周一','周二','周三','周四','周五','周六','周日']}
},
seriesDataArr: { //数据
type: Array,
default: () => { return [120, 132, 101, 134, 90, 230, 210] }
},
color: { //颜色
type: String,
default: '#0076fe'
},
bgColor: {
type: String,
default: '#d1e3f8'
},
smooth: { //true 平滑 false折线
type: Boolean,
default: true
},
fontSize: {
type: Number,
default: 12,
},
fontColor: {
type: String,
default: '#444'
},
fontWeight: {
type: String,
default: 'bold'
},
height: {
type: String,
default: '200px'
},
dataZoom: { //滑动
type: Boolean,
default: false
},
showLine: { //是否显示横向网格线
type: Boolean,
default: true
},
tooltip: {
type: Boolean,
default: true
}
},
data () {
return {}
},
mounted () {
this.initEcharts()
},
methods: {
initEcharts () {
let charts = echarts.init(this.$refs.charts); //影响力趋势
let that = this
charts.clear()
charts.setOption({
title: [{
text: this.title,
left: 'left',
top: 10,
textStyle: {
color: this.fontColor,
fontWeight: this.fontWeight,
fontSize: this.fontSize,
fontFamily: 'PingFangHK-Regular'
}
}],
tooltip : {
//trigger: 'axis',
trigger: 'none',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
crossStyle: {
color: '#4f77aa'
},
},
formatter: function(params) {return ''},
show: this.tooltip,
},
grid: {
left: '3%',
right: '4%',
top: '5%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
axisLine: {show: false},
axisTick:{
show:false
},
axisLabel: {
show: true,
textStyle: {
color: '#888',
fontSize: 11
}
},
data : this.xAxisDataArr
}
],
yAxis : [
{
type : 'value',
axisTick:{
show:false // 是否显示坐标轴刻度
},
axisLine: {show: false}, // 是否显示坐标轴轴线
splitLine: {
show: true, // 是否显示分隔线(网格线)
lineStyle:{
color: '#eee', // 分隔线(网格线)颜色
width: 0.5 // 分隔线(网格线)宽度
}
},
axisLabel: {
show: true, // 是否显示刻度值,X,Y轴值
textStyle: {
color: '#888',
fontSize: 11
}
},
}
],
series : [
{
type:'line', // line bar pie等等
smooth: this.smooth, // 是否平滑
itemStyle: { // 折线样式。
normal: {
color: this.color,
},
},
lineStyle: { // 线条样式
normal: {
width: 1
},
},
areaStyle: { // 区域填充样式
normal: {
color: this.bgColor
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: this.color
// }, {
// offset: 1,
// color: '#ffe'
// }])
}
},
data:this.seriesDataArr //数据
},
{
type:'bar',
smooth: this.smooth,
itemStyle: {
normal: {
color: 'transparent'
}
},
data:this.mokeArr || []
},
]
})
charts.on('mouseover', function (params) {
that.$emit('changeTime',params)
});
event(window,'resize',()=>{charts.resize()})
}
},
computed: {
mokeArr () {
let res = []
this.seriesDataArr.forEach(v => {
res.push(v-0+1)
})
return res
}
},
watch: {
seriesDataArr () {
this.initEcharts()
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.charts {
width: 100%
}
</style>
这个折线图组件,实例效果如如下:
心得体会如下:
1、 title 用一个数组接收,可以接收多个数组,图形扩展性更强
2、 yAxis、xAxis可以交换位置
3、 为了美观,一般yAxis、xAxis中部分或者全部,有一定默认样式更好
yAxis : [
{
type : 'value',
axisTick:{
show:false // 是否显示坐标轴刻度
},
axisLine: {show: false}, // 是否显示坐标轴轴线
splitLine: {
show: true, // 是否显示分隔线(网格线)
lineStyle:{
color: '#eee', // 分隔线(网格线)颜色
width: 0.5 // 分隔线(网格线)宽度
}
},
axisLabel: {
show: true, // 是否显示刻度值,X,Y轴值
textStyle: {
color: '#888',
fontSize: 11
}
},
}
],
4、 echarts中的点击事件,如果在饼状图,或者柱状图中做点击事件的话,很简单,直接添加即可。但是折线图中,做点击事件,只能点击那个小圆圈,才可以触发,这样,用户体验及其不好。
解决措施: 新增加一个 柱状图,柱状图颜色为 transparent, 数据为 折线图的最大值组成的一个数组, 通过触发柱状图来达到触发折线图的效果, 还有就是用onmouseover,代替onclick事件, 然而onmouseover的话,避免不了多次触发,因此也需要一定的优化,优化如下:
charts.on('mouseover', function (params) {
let time = null
clearSetTimeout(time)
time = setTimeout(() => {
that.$emit('changeTime',params)
},200)
});