1、父组件
<LineMarker :dataLine="dataLine" ref="LineMarker"></LineMarker>
2、 引入组件
import LineMarker from '@/components/LineMarker.vue'
3、父组件传数据源
dataLine: [
{
dataTitle: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
dataList: [
{
data: ['100', '100', '100', '100', '100', '100', '100', '100'],
name: '活跃人数'
},
{
data: ['100', '2', '3', '4', '5', '6', '32', '54'],
name: '部门登陆率'
}
]
}
]
4、Echarts 组件 (基础配置可直接在mounted中配置, 如果是需要根据数据源变化的可在setSeriesData方法中配置)
<template>
<div class="echarts-contain">
<div :id="id" class="o-echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'lineCharts',
props: {
dataLine: {
type: Array,
default: () => []
},
dataStartZoom: {
type: Number,
default: () => 0
}
},
data () {
return {
id: 'echarts_' + new Date().getTime() + Math.floor(Math.random() * 1000),
echartObj: null,
option:{},
color: 'green'
};
},
created () {
},
watch: {
dataLine: {
handler (newValue, oldValue) {
for (let i = 0; i < newValue.length; i++) {
if (newValue[i]) {
this.echartObj.setOption(this.setSeriesData(), true);
}
}
},
deep: true
}
},
mounted () {
let titleArr = [this.dataLine && this.dataLine[0] && this.dataLine[0].dataList && this.dataLine[0].dataList[0].name, this.dataLine && this.dataLine[0] && this.dataLine[0] && this.dataLine[0].dataList[1].name]
this.option = {
color: ['#664EEC','#1689FF'],
legend: {
data: titleArr,
x: '0', //可设定图例在左、右、居中
// top: 20, //可设定图例在上、下、居中
color: ['#664EEC','#1689FF']
},
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.5)',
borderColor: '#eee',
padding: 10,
textStyle: {
color: '#000',
fontStyle: 'normal',
fontSize: 14
},
formatter: function (params) {
let tip = params[0].name + '<br />';
for (let i =0; i < params.length; i++) {
tip += params[i].marker + params[i].seriesName + ': ' + params[i].value + '<br />'
}
return tip
}
},
grid: {
top: 40,
right: 40,
left: 55,
bottom: 30
},
dataZoom: [],
xAxis: [
{
type: 'category',
boundaryGap: true,
// splitNumber: 100
}
],
yAxis: {
nameGap: '16',
// splitNumber: 3,
nameTextStyle: {
color: '#999'
},
type: 'value',
axisLine: { // y轴
'show': false
},
// 网格样式
splitLine: {
show: true,
lineStyle: {
color: '#999', // 横线设置
width: 0.5,
type: 'dashed'
}
},
// interval: 5,
axisTick: { // y轴刻度线
'show': false
},
axisLabel: {
show: true,
textStyle: {
}
}
},
lineStyle: {},
series: []
}
this.echartObj = echarts.init(document.getElementById(this.id));
this.echartObj.setOption(this.setSeriesData(), true);
},
methods: {
resizeHandle(){
if(this.echartObj){
this.echartObj.resize();
}
},
// 尝试返回数据后刷新试图
freshCharts () {
this.echartObj.setOption(this.setSeriesData(), true);
},
setSeriesData () {
this.setOptions('xAxis', (() => {
return {
type: 'category',
boundaryGap: false,
splitNumber: 1000,
minInterval: 100,
data: this.dataLine[0] && this.dataLine[0].dataTitle,
axisLine: {
show: true,
lineStyle: {
color: '#E9E9E9'
}
},
axisTick: { // x轴刻度线
show: true,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
// interval: 0,
show: true,
textStyle: {
color: '#999'
}
}
}
})());
this.setOptions('dataZoom', (() => {
// return {
// type: 'inside',
// start: 0,
// end: 100,
// // end: this.dataStartZoom <= 10 ? 100 : this.dataStartZoom > 10 && this.dataStartZoom < 20 ? 65 : 45,
// zoomLock: true
// }
})());
this.setOptions('series', (() => {
return [
{
name: this.dataLine[0] && this.dataLine[0].dataList[0] && this.dataLine[0].dataList[0].name,
type: 'line',
smooth: true, // 折线流畅
// symbol: 'circle',
symbolSize: 2, // 拐点大小
areaStyle: { // 线条下区域颜色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#F9F8FF'
},
// {
// offset: 0.8,
// color: 'rgba(137, 189, 27, 0)'
// }
], true),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: { // 线条设置
normal: {
color: '#664EEC',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 1
},
emphasis: { // 鼠标经过时 原点设置
// color:'rgb(137,189,27)',
borderColor: '#664EEC'
}
},
lineStyle: {
normal: {
width: 2
}
},
data: this.dataLine[0] && this.dataLine[0].dataList[0] && this.dataLine[0].dataList[0].data,
},
{
name: this.dataLine[0] && this.dataLine[0].dataList[0] && this.dataLine[0].dataList[1].name,
type: 'line',
smooth: true,
symbolSize: 2, // 拐点大小
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#F5FAFE'
},
// {
// offset: 0.8,
// color: 'rgba(0, 136, 212, 0)'
// }
], true),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#1689FF', // 拐点颜色
borderColor: '#1689FF', // 拐点边框颜色
borderWidth: 1, // 拐点边框大小
},
emphasis: {
borderColor:'rgb(0,136,212)'
}
},
lineStyle: {
normal: {
width: 2
},
},
data: this.dataLine[0] && this.dataLine[0].dataList[0] && this.dataLine[0].dataList[1].data
}
]
})());
return this.option;
},
setOptions (objKey, objVal) {
if (this.option[objKey] && typeof this.option[objKey] === 'object' && !Array.isArray(this.option[objKey])) {
this.option[objKey] = Object.assign(this.option[objKey], objVal);
} else {
this.option[objKey] = objVal;
}
this.$set(this.option, objKey, this.option[objKey]);
}
}
}
</script>
<style lang="less" scoped>
.echarts-contain{
// width:100%;
// height:100%;
margin: 24px 0px 0px 0px;
width: 100%;
height: 350px;
position: relative;
.o-echarts {
width: 100%;
height: 98%;
padding-bottom: 10px;
}
}
</style>
