|
|
@@ -1,294 +0,0 @@
|
|
|
-<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>
|
Administrator