<template>
<div id="energyEcharts" style="width: 100%; height: 100%;"></div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
this.myecharts();
this.WidthAdaptive();
},
watch: {
},
methods: {
WidthAdaptive(res) {
var windth = window.innerWidth;
let fontSize = windth / 5280;
return fontSize * res;
},
myecharts() {
let myChart = this.$echarts.init(document.getElementById('energyEcharts'));
// x轴数据
let xData = ['03/11', '01/12', '03/13', '03/14', '03/15', '03/16', '03/17'];
// y轴数据
let yData = [7, 6, 6, 8, 5, 5, 7];
//绘制图表
var option = {
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
type: 'solid',
color: 'rgba(255, 255, 255, 0.4)',
},
},
formatter: '{b}<br/> {c} 件',
backgroundColor: 'rgba(6,19,40,0.8)',
borderColor: 'transparent',
padding: [10],
textStyle: {
fontSize: this.WidthAdaptive(30),
fontFamily: 'PingFang SC',
fontWeight: 400,
lineHeight: this.WidthAdaptive(33),
color: '#ffffff',
},
},
grid: {
left: '8%',
top: '14%',
width: '90%',
height: '75%',
},
xAxis: {
type: 'category',
data: xData,
boundaryGap: true,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(77, 101, 129, 0.8)'
},
symbol: ['none', 'arrow'],
symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],
symbolOffset: this.WidthAdaptive(10)
},
axisTick: {
show: false
},
axisLabel: {
fontSize: this.WidthAdaptive(34),
fontFamily: 'Source Han Sans CN',
fontWeight: 400,
lineHeight: this.WidthAdaptive(54),
color: '#cccccc'
},
},
yAxis: {
name: '单位: 件',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(105, 119, 135, 0.6)',
}
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'rgba(77, 101, 129, 0.8)'
},
symbol: ['none', 'arrow'],
symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],
symbolOffset: this.WidthAdaptive(10)
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: this.WidthAdaptive(32),
fontFamily: 'Source Han Sans CN',
fontWeight: 400,
lineHeight: this.WidthAdaptive(54),
color: '#cccccc',
margin: this.WidthAdaptive(18)
},
nameGap: this.WidthAdaptive(30),
nameTextStyle: {
fontSize: this.WidthAdaptive(32),
fontFamily: 'Source Han Sans CN',
fontWeight: 400,
lineHeight: this.WidthAdaptive(54),
color: '#cccccc',
},
},
series: [{
type: 'bar',
data: yData,
barWidth: this.WidthAdaptive(22),
color: '#1677FF',
z: 1,
markPoint: {
symbolSize: this.WidthAdaptive(1),
symbol: "circle",
itemStyle: {
color: "#ffffff",
borderColor: "#ffffff",
borderWidth: this.WidthAdaptive(33)
},
data: [{
// 与xAxis和yAxis等价
coord: [0, yData[0]]
},
{
coord: [1, yData[1]]
},
{
coord: [2, yData[2]]
},
{
coord: [3, yData[3]]
},
{
coord: [4, yData[4]]
},
{
coord: [5, yData[5]]
},
{
coord: [6, yData[6]]
}
]
}
},
{
type: 'scatter',
data: yData,
symbolSize: this.WidthAdaptive(16),
itemStyle: {
color: '#ffffff',
opacity: 1,
},
hoverAnimation: false,
z: 2
}
]
}
myChart.setOption(option);
window.onresize = myChart.resize;
}
},
}
</script>
<style scoped>
</style>
