Effect of rotation
Seven days effect picture
Round seeding effect is achieved
The element
<el-button class="button" icon="el-icon-arrow-left" @click="backChart"></el-button>
<v-chart :options="echartsOption" ref="rainChart" autoresize style="width:90%;" />
<el-button class="button" icon="el-icon-arrow-right" @click="goChart"></el-button>
Copy the codeWith the Echarts configuration TAB, set the data zoom and hide the zoom bar
echartsOption: {
dataZoom: {
show: false.startValue: 0.endValue: 6}},Copy the code data() {
return {
chartData: [].startValue: 0.endValue: 6,}Copy the codeWhen clicking the wheel cast button, the wheel cast index in data can be modified to adjust the area of zooming data so as to achieve the effect of data scrolling
goChart() {
this.startValue++
this.endValue++
if (this.endValue > this.chartData.length - 1) {
this.startValue = this.chartData.length - 7
this.endValue = this.chartData.length - 1
} else if (this.startValue < 1) {
this.startValue = 0
this.endValue = 6
}
this.$nextTick(() = > {
this.init()
})
},
backChart() {
this.startValue--
this.endValue--
if (this.startValue < 1) {
this.startValue = 0
this.endValue = 6
}
this.$nextTick(() = > {
this.init()
})
},
Copy the codeInsert an SVG icon or img image
In this case, I used the time and wind weather icon. I downloaded it to a local SVG and wanted to insert multiple local ICONS. This can only be done by Rich, but since my ICONS are dynamic, I can’t declare them in advance
series: [
{
data: [].type: 'line'.label: {
normal: {
show: true.// Reserve rich objects
rich: {},
formatter: function(param) {
var res = ' '
res += `{img${param.data.icon}|} ` + '\n ' + (param.data.text.length > 1 ? param.data.text : ' ' + param.data.text) + '\n' + param.value + '° C'
return res
},
}
}
}
]
Copy the codeWe set the different IMG names using the icon value returned by the interface
this.echartsOption.series[0].label.normal.rich[`imgThe ${this.chartData[i].icon}`] = {
color: '#1890ff'.backgroundColor: {
image: require(`.. /.. /assets/icons/The ${this.chartData[i].icon}.svg`)},width: 40.align: 'center'.height: 40
}
Copy the codeFocus!!!!! Since data is normally an array, the icon content cannot be recognized in formater. Here we pass it in the form of an object, and the default value is the value rendered by Data
series.push({ value: this.chartData[i].temp, text: this.chartData[i].text, icon: this.chartData[i].icon })
Copy the codeThis way, we can use Param’s data object to get the desired data values we pass in, making echarts data more flexible to use
formatter: function(param) {
var res = ' '
res += `{img${param.data.icon}|} ` + '\n ' + (param.data.text.length > 1 ? param.data.text : ' ' + param.data.text) + '\n' + param.value + '° C'
return res
},
Copy the codeEffect in the next 7 days
The next seven days will focus on the ICONS and content information at the top. How can I achieve this by declaring an empty bar chart and shifting its prompt content upward by -450 pixels so that the text reaches the top of the chart
{
type: 'bar'.name: 'Bar chart'.label: {
normal: {
align: 'center'.color: '#fff'.// Offset bar graph
offset: [0, -450].show: true.rich: {},textStyle: {
fontSize: '18'}}},Copy the codeBut the bar chart will always be there, so I stole the bar chart and set it to the background color to hide the bar chart display
itemStyle: {
normal: {
color: '#246EAD'}}Copy the codeFinally, the top information is formatted by modifying rich and passing in the data object
for (let i = 0; i < this.chartData.length; i++) {
series0.push(this.chartData[i].tempMax)
series1.push(this.chartData[i].tempMin)
// xAxis.push(moment( this.chartData[i].tm).format('HH:mm'))
xAxis.push(this.chartData[i].fxDate)
bar.push({ value: 9.textDay: this.chartData[i].textDay, iconDay: this.chartData[i].iconDay, fxDate: this.chartData[i].fxDate })
this.echartsOption.series[2].label.normal.rich[`imgThe ${this.chartData[i].iconDay}`] = {
color: '#1890ff'.align: 'center'.backgroundColor: {
image: require(`.. /.. /assets/icons/The ${this.chartData[i].iconDay}.svg`)},width: 40.height: 40
}
max.push(this.chartData[i]['tempMax'])
min.push(this.chartData[i]['tempMin'])}Copy the codeEnsure that the length of the Y-axis is always fixed to prevent distortion or deviation
this.echartsOption.yAxis.max = Math.max(... max)this.echartsOption.yAxis.min = Math.min(... min)if (this.echartsOption.yAxis.max - this.echartsOption.yAxis.min ! =50) {
this.echartsOption.yAxis.max = (50 - (this.echartsOption.yAxis.max - this.echartsOption.yAxis.min)) + this.echartsOption.yAxis.max
}
Copy the codeFinally, add today’s and tomorrow’s judgments to achieve the final effect
formatter: function(param) {
var res = ' '
var weekDay = ['Monday'.'on Tuesday'.'on Wednesday'.'on Thursday.'on Friday'.'on Saturday.'Sunday']
var myDate = new Date(Date.parse(param.data.fxDate))
if (param.dataIndex === 0) {
res += 'today' + '\n' + param.data.fxDate + '\n' + '\n' + `{img${param.data.iconDay}|} ` + '\n' + param.data.textDay
} else if (param.dataIndex === 1) {
res += 'tomorrow' + '\n' + param.data.fxDate + '\n' + '\n' + `{img${param.data.iconDay}|} ` + '\n' + param.data.textDay
} else {
res += weekDay[myDate.getDay()] + '\n' + param.data.fxDate + '\n' + '\n' + `{img${param.data.iconDay}|} ` + '\n' + param.data.textDay
}
return res
},
Copy the code