|
|
@@ -0,0 +1,294 @@
|
|
|
+<template>
|
|
|
+ <div class="echarts-line" :id="ids"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts'
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ legendChecked: {
|
|
|
+ // 图例
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ ids: {
|
|
|
+ // id
|
|
|
+ type: String,
|
|
|
+ default: 'echartsline'
|
|
|
+ },
|
|
|
+ fontColor: {
|
|
|
+ // 字体颜色
|
|
|
+ type: String,
|
|
|
+ default: '#89949F'
|
|
|
+ },
|
|
|
+ yLine: {
|
|
|
+ // x轴分割线
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ chartData: {
|
|
|
+ // echarts·数据
|
|
|
+ default: function () {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // Y轴单位
|
|
|
+ Yunit: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ theme: {
|
|
|
+ default: function () {
|
|
|
+ return ['#3da4fe', '#23cef2', '#65b664', '#00FDCB']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ chartData: {
|
|
|
+ // 深度监听，可监听到对象、数组的变化
|
|
|
+ handler() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.chartData && this.chartData.length > 0) {
|
|
|
+ this.dataValue(this.chartData)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deep: true, // 深度监听，可监听到对象、数组的变化
|
|
|
+ immediate: true // 立刻执行
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ dataValue(newVal) {
|
|
|
+ if (newVal && newVal.length > 0) {
|
|
|
+ const seriesConfig = []
|
|
|
+ const Yconfig = []
|
|
|
+ const unit = []
|
|
|
+ for (let i = 0; i < newVal.length; i++) {
|
|
|
+ if (newVal[i].areaStyle) {
|
|
|
+ const obj = {
|
|
|
+ type: 'line',
|
|
|
+ name: newVal[i].name,
|
|
|
+ data: newVal[i].yData,
|
|
|
+ smooth: newVal[i].smooth ? newVal[i].smooth : false,
|
|
|
+ showSymbol: newVal[i].showSymbol ? newVal[i].showSymbol : false,
|
|
|
+ lineStyle: {
|
|
|
+ color: newVal[i].lineColor
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: newVal[i].areaColor
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(0,0,0,0)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (i === 1) {
|
|
|
+ obj.yAxisIndex = 1
|
|
|
+ }
|
|
|
+ seriesConfig.push(obj)
|
|
|
+ if (this.Yunit) {
|
|
|
+ Yconfig.push({
|
|
|
+ type: 'value',
|
|
|
+ name:
|
|
|
+ (newVal.length > 1 ? newVal[i].name : '单位') +
|
|
|
+ '：' +
|
|
|
+ newVal[i].unit,
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: this.fontColor
|
|
|
+ },
|
|
|
+ splitNumber: 5,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: this.yLine,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(153, 153, 153, 0.3)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: this.fontColor,
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ Yconfig.push({
|
|
|
+ type: 'value',
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: this.fontColor
|
|
|
+ },
|
|
|
+ splitNumber: 5,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: this.yLine,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(153, 153, 153, 0.3)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: this.fontColor,
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ })
|
|
|
+ Yconfig[0].name = '（m³/s）'
|
|
|
+ }
|
|
|
+
|
|
|
+ unit.push(newVal[i].unit)
|
|
|
+ } else {
|
|
|
+ seriesConfig.push({
|
|
|
+ type: 'line',
|
|
|
+ name: newVal[i].name,
|
|
|
+ data: newVal[i].yData,
|
|
|
+ smooth: newVal[i].smooth ? newVal[i].smooth : false,
|
|
|
+ symbolSize: newVal[i].showSymbol ? newVal[i].showSymbol : false,
|
|
|
+ lineStyle: {
|
|
|
+ color: newVal[i].lineColor
|
|
|
+ }
|
|
|
+ })
|
|
|
+ Yconfig.push({
|
|
|
+ type: 'value',
|
|
|
+ name: newVal[i].name + '：' + newVal[i].unit,
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: this.fontColor
|
|
|
+ },
|
|
|
+ splitNumber: 5,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: this.yLine,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e5e5e5'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: this.fontColor,
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ })
|
|
|
+ unit.push(newVal[i].unit)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setEcharts(seriesConfig, Yconfig, newVal[0].xData, unit)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setEcharts(series, Yconfig, dataAxis, unit) {
|
|
|
+ let legend = []
|
|
|
+ if (this.legendChecked) {
|
|
|
+ legend = this.chartData.map((data, i) => {
|
|
|
+ return {
|
|
|
+ name: data.name,
|
|
|
+ icon: 'roundRect',
|
|
|
+ itemStyle: series[i].lineStyle
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ legend = []
|
|
|
+ }
|
|
|
+ const myChart = echarts.init(document.getElementById(this.ids))
|
|
|
+ const option = {
|
|
|
+ color: this.theme,
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function (data) {
|
|
|
+ if (!data.length) return
|
|
|
+ if (data.length > 1) {
|
|
|
+ let html = ''
|
|
|
+ html = `<div class="toolTips"><div style="font-size: 12px;color: #fff">${data[0].axisValue}</div>`
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ html += `<div style="font-size: 12px;color: #fff">${series[i].name}: ${data[i].value} ${unit[i]}</div>`
|
|
|
+ }
|
|
|
+ html += '</div>'
|
|
|
+ return html
|
|
|
+ } else {
|
|
|
+ return `<div class="toolTips"><div style="font-size: 12px;color: #fff">${data[0].axisValue}: ${data[0].value} ${unit[0]}</div></div>`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ backgroundColor: '#487892',
|
|
|
+ borderWidth: 0,
|
|
|
+ padding: [3, 5],
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#299acb'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: 0,
|
|
|
+ right: 'center',
|
|
|
+ width: 240,
|
|
|
+ data: legend,
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 5,
|
|
|
+ show: true,
|
|
|
+ selectedMode: false,
|
|
|
+ textStyle: {
|
|
|
+ color: this.fontColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: dataAxis,
|
|
|
+ boundaryGap: false,
|
|
|
+ axisTick: {
|
|
|
+ show: true,
|
|
|
+ inside: true
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(135,142,148,0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: this.fontColor,
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: Yconfig,
|
|
|
+ grid: {
|
|
|
+ left: 20,
|
|
|
+ right: 35,
|
|
|
+ top: this.legendChecked ? 30 : 30,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: series
|
|
|
+ }
|
|
|
+ myChart.clear()
|
|
|
+ myChart.setOption(option, true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.echarts-line {
|
|
|
+ width: 80%;
|
|
|
+ height: 80%;
|
|
|
+}
|
|
|
+</style>
|
DESKTOP-GBVU60Q\dell