VUE項目中封裝Echart折線圖的方法
本文實例為大家分享了VUE項目中封裝Echart折線圖的具體代碼,供大家參考,具體內(nèi)容如下
封裝Echart折線圖,可顯示多條折線
1. 首先在項目中全局引入Echarts,main.js中:
import * as echarts from 'echarts' Vue.prototype.$echarts = echarts
2.components中新建組件baseLineChart.vue,以下代碼直接復制:
<template> ? ? <div ? ? ? id="baseLineChart" ? ? ? ref="baseLineChart" ? ? ? :style="{ width: chartWidth, height: chartHeight }" ? ? /> </template> <script> export default { ? props: { ? ? chartData: { ? ? ? type: Array, ? ? ? default: () => [] ? ? }, ? ? timeX: { ? ? ? type: Array, ? ? ? default: () => [] ? ? }, ? ? chartName: { ? ? ? type: String, ? ? ? default: '' ? ? }, ? ? chartWidth: { ? ? ? type: String, ? ? ? default: '' ? ? }, ? ? chartHeight: { ? ? ? type: String, ? ? ? default: '' ? ? }, ? ? seriesName: { ? ? ? type: Array, ? ? ? default: () => [] ? ? }, ? ? chartUnit: { ? ? ? type: String, ? ? ? default: '' ? ? } ? }, ? data() { ? ? return { ? ? ? baseLineChart: null, ? ? ? newChartData: {} ? ? } ? }, ? computed: { ? ? chartOptions() { ? ? ? const options = { ? ? ? ? grid: { ? ? ? ? ? left: '4%', ? ? ? ? ? bottom: '8%', ? ? ? ? ? top: '15%', ? ? ? ? ? right: '0' ? ? ? ? }, ? ? ? ? tooltip: { ? ? ? ? ? trigger: 'axis' ? ? ? ? }, ? ? ? ? color: ['#1879BD', '#03B8DF', '#7B879A'], ? ? ? ? legend: { ? ? ? ? ? show: true, ? ? ? ? ? right: '0', ? ? ? ? ? top: '-1%', ? ? ? ? ? icon: 'circle' ? ? ? ? }, ? ? ? ? xAxis: [ ? ? ? ? ? { ? ? ? ? ? ? type: 'category', ? ? ? ? ? ? axisTick: { show: false }, ? ? ? ? ? ? data: [] ? ? ? ? ? } ? ? ? ? ], ? ? ? ? yAxis: [ ? ? ? ? ? { ? ? ? ? ? ? type: 'value', ? ? ? ? ? ? name: '', ? ? ? ? ? ? nameTextStyle: { ? ? ? ? ? ? ? padding: [0, 15, 0, 0] ? ? ? ? ? ? } ? ? ? ? ? } ? ? ? ? ], ? ? ? ? series: [] ? ? ? } ? ? ? return options ? ? } ? }, ? watch: { ? ? chartData: { ? ? ? handler(newValue, oldValue) { ? ? ? ? this.newChartData = newValue ? ? ? ? this.initData() ? ? ? }, ? ? ? deep: true ? ? } ? }, ? mounted() { ? ? this.$nextTick(() => { ? ? ? this.initChart() ? ? ? if (this.chartData) { ? ? ? ? this.initData() ? ? ? } ? ? }) ? }, ? methods: { ? ? initChart() { ? ? ? const _this = this ? ? ? _this.baseLineChart = _this.$echarts.init(this.$refs.baseLineChart) ? ? ? window.addEventListener('resize', function () { ? ? ? ? _this.baseLineChart.resize() ? ? ? }) ? ? }, ? ? initData() { ? ? ? let sData = [] ? ? ? if (this.chartData) { ? ? ? ? sData = this.chartData.map((val, index) => { ? ? ? ? ? return { ? ? ? ? ? ? data: val, ? ? ? ? ? ? name: this.seriesName[index], ? ? ? ? ? ? type: 'line' ? ? ? ? ? } ? ? ? ? }) ? ? ? ? this.chartOptions.series = sData ? ? ? } ? ? ? this.chartOptions.xAxis[0].data = this.timeX ? ? ? this.chartOptions.yAxis[0].name = `單位(${this.chartUnit})` ? ? ? this.baseLineChart.setOption(this.chartOptions, true) ? ? } ? } } </script>
配置項根據(jù)自身項目來定制。
3、在組件中引入:
<template> ? <div> ? ? ? <baseLine ? ? ? ? :chart-data="chartData" ? ? ? ? ?:time-x="timeX" ? ? ? ? ?chart-name="OEE" ? ? ? ? ?chart-width="1700px" ? ? ? ? ?chart-height="350px" ? ? ? ? ?:series-name="seriesName" ? ? ? ? ?chart-unit="%" ? ? ? ? ? /> ? ? </div> </template> import baseLine from '@/components/charts/baseLineChart.vue' <script> export default { ?components: { ? ? baseLine ? }, ?data() { ? ?return { ? ? ?timeX: [], ? ? ?chartData:[] ? ? ?seriesName: ['白班', '晚班'] ? ?} ?}, } </script>
chart-width 圖表寬度
chart-height 圖表高度
chart-unit 圖表數(shù)據(jù)的顯示單位
timeX為X軸數(shù)據(jù),一般為時間數(shù)組 [‘1-1’,‘1-2’,‘1-3’ ];
chartData為折線數(shù)據(jù),多條數(shù)據(jù)格式 [ [1,2,3],[4,5,6] ]
seriesName為每條折線對應(yīng)名稱
同理可封裝其他圖表
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題
今天小編就為大家分享一篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法
getCurrentInstance方法用于獲取當前組件實例,僅在setup和生命周期中起作用,下面這篇文章主要給大家介紹了關(guān)于Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法,需要的朋友可以參考下2022-08-08