<template>
<!-- 折线图 -->
<div ref="line" class="line"></div>
</template>
<script>
// colorList 横条颜色数组
// data 数据 格式为： []
// areaStyle 渐变色
import * as echarts from 'echarts'
import { onMounted, reactive, toRefs, ref, watch } from 'vue'
export default {
props: {
areaStyle: {
type: Array,
default: null
},
data: {
type: Array,
default: () => {
return []
}
},
yAxisTitle: {
type: String,
default: '能耗:（MV）'
},
gridData: {
type: Object,
default: () => {
return {
left: '10%',
top: '15%',
right: '3%',
bottom: '12%'
}
}
}
},
setup(props) {
let line = ref('')
const state = reactive({})
// let series = []
// props.data.forEach(item => {
// series.push({
// name: item.name,
// data: item.data,
// type: 'line',
// areaStyle: {
// opacity: 0.5,
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, item.areaStyle ? item.areaStyle : null)
// }
// })
// })
const methods = {
drawLine() {
// 初始化
var myChart = echarts.init(line.value)
// 配置项
var normalColor = '#fff'
var fontSize = 16
var datas = props.data
let option = {
tooltip: {
trigger: 'item',
show: true
},
grid: {
left: '10%',
top: '15%',
right: '3%',
bottom: props.data.bottom ? props.data.bottom : '12%'
},
animation: false, //去除加载时缓动动画
legend: {
show: true,
selectedMode: false, //取消图例上的点击事件
data: datas.legendData,
textStyle: {
color: '#fff',
fontSize: 20
}
},
xAxis: {
axisLine: {
lineStyle: {
color: normalColor
}
},
axisTick: {
show: true
},
axisLabel: {
textStyle: {
color: normalColor,
fontSize: fontSize,
fontWeight: '700'
},
margin: 20
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: normalColor
}
},
data: datas.xdata
},
yAxis: [
{
type: 'value',
name: props.data.ytitle ? props.data.ytitle : '能耗:（MV）',
nameTextStyle: {
color: '#fff',
fontSize: '15px'
},
color: normalColor,
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: '#384267',
type: 'dashed'
}
},
axisLabel: {
show: props.data.yline != false ? true : false,
formatter: '{value}',
textStyle: {
color: normalColor,
fontSize: fontSize
}
},
axisLine: {
lineStyle: {
color: '#384267',
width: 1,
type: 'dashed'
},
show: props.data.yline != false ? true : false
}
},
{
type: 'value',
name: '单位：',
show: false,
nameTextStyle: {
fontSize: fontSize
},
color: normalColor,
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: normalColor,
fontSize: fontSize
}
},
axisLine: {
lineStyle: {
color: normalColor
}
}
}
],
series: [
{
name: props.data.legendData[0] ? props.data.legendData[0] : null,
data: props.data.Data1 ? props.data.Data1 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[0] ? props.data.color[0] : '#3A1BFD'
},
{
offset: 1,
color: props.data.color[1] ? props.data.color[1] : '#3BEFFD'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
{
name: props.data.legendData[1] ? props.data.legendData[1] : null,
data: props.data.Data2 ? props.data.Data2 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[2] ? props.data.color[2] : 'rgba( 255, 69, 0,1)'
},
{
offset: 1,
color: props.data.color[3] ? props.data.color[3] : 'rgba( 255, 69, 0,0.31)'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
{
name: props.data.legendData[2] ? props.data.legendData[2] : null,
data: props.data.Data3 ? props.data.Data3 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[4] ? props.data.color[4] : 'rgba( 50, 205, 50, 1)'
},
{
offset: 1,
color: props.data.color[5] ? props.data.color[5] : 'rgba( 50, 205, 50, 0.3)'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
{
name: props.data.legendData[3] ? props.data.legendData[3] : null,
data: props.data.Data4 ? props.data.Data4 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[6] ? props.data.color[6] : 'rgba(138,43,226,1)'
},
{
offset: 1,
color: props.data.color[7] ? props.data.color[7] : 'rgba(138,43,226,0.3)'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
{
name: props.data.legendData[4] ? props.data.legendData[4] : null,
data: props.data.Data5 ? props.data.Data5 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[8] ? props.data.color[8] : 'rgba(255,140,0,1)'
},
{
offset: 1,
color: props.data.color[9] ? props.data.color[9] : 'rgba(255,140,0,0.3)'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
{
name: props.data.legendData[5] ? props.data.legendData[5] : null,
data: props.data.Data6 ? props.data.Data6 : null,
type: 'bar',
barWidth: 20,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: props.data.color[10] ? props.data.color[10] : 'rgba(255, 20, 147,1)'
},
{
offset: 1,
color: props.data.color[11] ? props.data.color[11] : 'rgba(255, 20, 147,0.3)'
}
]
}
},
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff'
}
},
// 以上是数据
{
// 第六个柱子底部正方形
name: '',
data: props.data.Data6 ? props.data.Data6 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['200%', '50%'],
symbolSize: [30, 15],
color: props.data.color[11] ? props.data.color[11] : 'rgba(255, 20, 147, 0.3)'
},
{
// 第六个柱子顶部正方形
name: '',
data: props.data.Data6 ? props.data.Data6 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['60', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[10] ? props.data.color[10] : 'rgba(255, 20, 147,1)'
},
{
// 第五个柱子底部正方形
name: '',
data: props.data.Data5 ? props.data.Data5 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['120%', '50%'],
symbolSize: [30, 15],
color: props.data.color[9] ? props.data.color[9] : 'rgba(255,140,0, 0.3)'
},
{
// 第五个柱子顶部正方形
name: '',
data: props.data.Data5 ? props.data.Data5 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['36', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[8] ? props.data.color[8] : 'rgba(255,140,0,1)'
},
{
// 第四个柱子底部正方形
name: '',
data: props.data.Data4 ? props.data.Data4 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['40%', '50%'],
symbolSize: [30, 15],
color: props.data.color[7] ? props.data.color[7] : 'rgba(138,43,226, 0.3)'
},
{
// 第四个柱子顶部正方形
name: '',
data: props.data.Data4 ? props.data.Data4 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['12', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[6] ? props.data.color[6] : 'rgba(138,43,226, 1)'
},
{
// 第三个柱子底部正方形
name: '',
data: props.data.Data3 ? props.data.Data3 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['-40%', '50%'],
symbolSize: [30, 15],
color: props.data.color[5] ? props.data.color[5] : 'rgba(50,205,50, 0.3)'
},
{
// 第三个柱子顶部正方形
name: '',
data: props.data.Data3 ? props.data.Data3 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['-12', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[4] ? props.data.color[4] : 'rgba(50,205,50, 1)'
},
{
// 第二个柱子底部正方形
name: '',
data: props.data.Data2 ? props.data.Data2 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['-120%', '50%'],
symbolSize: [30, 15],
color: props.data.color[3] ? props.data.color[3] : 'rgba(255,69,0,0.3)'
},
{
// 第二个柱子顶部正方形
name: '',
data: props.data.Data2 ? props.data.Data2 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['-35', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[2] ? props.data.color[2] : 'rgba(255,69,0,1)'
},
{
// 第一个底部正方形
name: '',
data: props.data.Data1 ? props.data.Data1 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: ['-300%', '50%'],
symbolSize: [20, 15],
color: props.data.color[1] ? props.data.color[1] : 'rgba(27,252,229,1)'
},
{
// 第一个顶部正方形
name: '',
data: props.data.Data1 ? props.data.Data1 : null,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: ['-60', '-50%'],
symbolSize: [20, 12],
zlevel: 2,
color: props.data.color[0] ? props.data.color[0] : 'rgba(54,8,254,1)'
}
]
}
// ===
myChart.clear()
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
window.onresize = function () {
myChart.resize()
}
}
}
onMounted(() => {
methods.drawLine()
})
watch(
props,
newVal => {
if (newVal) {
methods.drawLine() //调用ECharts的方法重新绘制
}
},
{
// 被侦听的内容需要是函数的写法 () => stuInfo.friend
deep: true
}
)
return {
...toRefs(state),
...methods,
line
}
}
}
</script>
<style lang="scss" scoped>
.line {
width: 100%;
height: 100%;
}
</style>
注意需要传参
processBar: {
xdata: ['炼钢厂', 'H型钢厂', 'ESP', '石灰厂'],
// Data1: [200, 35, 112, 275],
// Data2: [80, 35, 112, 275],
Data3: [200, 35, 112, 275],
Data4: [80, 35, 112, 275],
// Data5: [200, 35, 112, 275],
// Data6: [80, 35, 112, 275],
legendData: ['', '', '11月', '国标', '', ''],
color: ['', '', '', '', '', '', 'rgba(255,0,255,1)', 'rgba(255,0,255,0.3)']
},
颜色和length没有也需要传 传空
