230 lines
4.2 KiB
Vue
230 lines
4.2 KiB
Vue
<!--
|
|
* @Author: lb
|
|
* @Date: 2022-01-21 14:43:06
|
|
* @LastEditors: zhp
|
|
* @LastEditTime: 2023-02-07 13:46:05
|
|
* @Description: 简单折线图
|
|
-->
|
|
<template>
|
|
<div ref="SimpleLineChart" :style="{ height: height ? height + 'px' : '100%', width: '100%' }" />
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import 'echarts/theme/macarons' // echarts theme
|
|
import resize from './mixins/resize'
|
|
|
|
const AxisLine = {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#123341',
|
|
width: '1'
|
|
}
|
|
}
|
|
|
|
const AxisLabel = {
|
|
textStyle: {
|
|
color: '#666a74'
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 2022.8.23 TODO:
|
|
* 1.一份数据三张表
|
|
* 2.切换选项卡时只更新一张表的数据
|
|
* 3.注释掉成品率条形图，改为将“投入、产出”拆分图，与“成品率”合计三张
|
|
*/
|
|
|
|
class ChartOption {
|
|
constructor() {
|
|
this.color = [
|
|
'#3574a8',
|
|
'#9f3476',
|
|
'#30959d',
|
|
'#5255be',
|
|
'#8b4449',
|
|
'#a29848',
|
|
'#FF6600',
|
|
'#FFFF00',
|
|
'#91cc75',
|
|
'#fac858',
|
|
'#ee6666',
|
|
'#73c0de',
|
|
'#3ba272',
|
|
'#fc8452',
|
|
'#9a60b4',
|
|
'#ea7ccc'
|
|
]
|
|
this.tooltip = { trigger: 'axis' }
|
|
this.grid = {
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '5%',
|
|
height: '80%',
|
|
containLabel: true
|
|
}
|
|
this.legend = {
|
|
itemHeight: 10,
|
|
itemWidth: 10,
|
|
y: 'top',
|
|
x: 'center',
|
|
top: 0,
|
|
// right: '1%',
|
|
data: [
|
|
/** dynamic */
|
|
],
|
|
// right: '1%',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#ced1d5'
|
|
}
|
|
}
|
|
this.xAxis = {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
splitLine: { show: false },
|
|
axisLine: AxisLine,
|
|
axisLabel: { ...AxisLabel, rotate: 20 },
|
|
data: [
|
|
/** dynamic */
|
|
]
|
|
}
|
|
this.yAxis = {
|
|
type: 'value',
|
|
splitLine: { show: false },
|
|
axisLine: AxisLine,
|
|
axisLabel: AxisLabel
|
|
}
|
|
this.series = [
|
|
/** dynmaic */
|
|
]
|
|
}
|
|
|
|
/**
|
|
* @param {object} rawdata
|
|
*/
|
|
setLegend(rawdata) {
|
|
if (rawdata) {
|
|
const data = Object.keys(rawdata)
|
|
this.legend.data = data.map(item => ({ icon: 'roundRect', name: item }))
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {object} rawdata
|
|
*/
|
|
setCategory(rawdata) {
|
|
if (rawdata) {
|
|
if (Object.keys(rawdata).length > 0) {
|
|
const first = rawdata[Object.keys(rawdata)[0]]
|
|
this.xAxis.data = Object.keys(first)
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {object} rawdata
|
|
*/
|
|
setData(rawdata) {
|
|
if (rawdata) {
|
|
this.series = []
|
|
for (const key in rawdata) {
|
|
this.series.push({
|
|
name: key,
|
|
type: 'line',
|
|
data: Object.entries(rawdata[key]).map(([subkey, value]) => value)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
clearOptions() {
|
|
this.legend.data.splice(0)
|
|
this.xAxis.data.splice(0)
|
|
this.series.splice(0)
|
|
}
|
|
// add more...
|
|
}
|
|
|
|
export default {
|
|
name: 'SimpleLineChart',
|
|
mixins: [resize],
|
|
props: {
|
|
beilv: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
legend: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
caty: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
dataList: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
defaultOpts: new ChartOption()
|
|
}
|
|
},
|
|
computed: {
|
|
showLegend() {
|
|
return this.legend.length > 0
|
|
}
|
|
},
|
|
watch: {
|
|
dataList: {
|
|
handler: function(val) {
|
|
this.updateChartOptions()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
if (this.chart) {
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
}
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
if (!this.chart) {
|
|
this.chart = echarts.init(this.$refs.SimpleLineChart)
|
|
this.updateChartOptions()
|
|
}
|
|
},
|
|
|
|
updateChartOptions() {
|
|
if (!this.chart) return
|
|
this.defaultOpts.clearOptions()
|
|
/** set */
|
|
this.defaultOpts.setLegend(this.dataList)
|
|
this.defaultOpts.setCategory(this.dataList)
|
|
this.defaultOpts.setData(this.dataList)
|
|
/** log */
|
|
this.chart.setOption({ ...this.defaultOpts })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
margin-top: -3em;
|
|
}
|
|
</style>
|