<template>
<div>
<div>
<!--为echarts准备一个具备大小的容器dom-->
<div id="org_ech_line"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
is_condolences: 0, // 控制收入折线图
isAll: 0,
is_active: 0,
//
// charts: '',
/* opinion: ["1", "3", "3", "4", "5"], */
opinionData: ['3', '2', '4', '4', '5'],
//
incomeLineData: ['3', '2', '4', '4', '5'] // 主要收入情况-折线数据
}
},
methods: {
// 组织建设-折线图
orgLine(id) {
const charts = echarts.init(document.getElementById(id))
charts.setOption({
tooltip: {
trigger: 'axis',
showContent: true, // 鼠标悬停-提示信息 false-不提示 true-提示
formatter: '组织数量: {c0}'
},
// legend: {
// data: ['近七日收益']
// },
// legend: {
// data: ['近七日收益'] //标题
// 设置图例前面样式
// itemStyle: {
// color: 'blue'
// },
// 设置图例文字颜色
// textStyle: {
// // color: '#4996f5'
// color: 'red'
// }
// },
grid: {
left: '3%',
top: '10%',
right: '4%',
bottom: '10%',
// 设置文字溢出正常显示
containLabel: true,
// 显示网格-显示边框
show: false
// 设置边框颜色
// borderColor: '#01233e'
},
// 释放开会显示 -右上角下载按钮
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
type: 'category',
// boundaryGap: false, //控制 X轴 第一个值 是紧挨Y轴还是 不紧挨Y轴 false-紧挨Y轴 ture-不紧挨
data: ['2017', '2018', '2019', '2020', '2021'],
// 设置文字颜色
axisLabel: {
// show: true, //是否显示X轴下面文字
color: '#6e7379', // 更改坐标轴文字颜色
fontSize: 12 // 更改坐标轴文字大小
},
// 隐藏刻度线
axisTick: {
show: false // false-隐藏 true-不隐藏
},
axisLine: {
lineStyle: {
// color: 'transparent' // 更改坐标轴颜色 -隐藏刻度线
// color: 'red' // 更改坐标轴颜色
}
}
},
yAxis: {
type: 'value',
// 隐藏刻度线
axisTick: {
show: false
},
axisLine: {
lineStyle: {
// color: 'transparent' // 更改坐标轴颜色 -隐藏刻度线
// color: 'transparent' // 更改坐标轴颜色
}
},
// 改变y轴字体颜色和大小
// 设置文字颜色
axisLabel: {
show: true, // 是否显示Y轴左面的文字
color: '#6e7379', // 更改坐标轴文字颜色
fontSize: 12 // 更改坐标轴文字大小
}
},
series: [{
name: '组织数量',
type: 'line',
// stack: '总量',
data: this.opinionData,
itemStyle: {
normal: {
color: '#51BAE4' // 给折线添加颜色
}
}
}]
})
}
},
// 调用
mounted() {
this.$nextTick(function() {
this.orgLine('org_ech_line')
// this.incomeLine('income_ech_line')
})
// this.$nextTick(function() {
// this.incomeLine('income_ech_line')
// })
}
}
</script>
<style>
#org_ech_line{
width: 500px;
height: 500px;
}
</style>
