VUE項(xiàng)目中封裝Echart折線圖的方法
本文實(shí)例為大家分享了VUE項(xiàng)目中封裝Echart折線圖的具體代碼,供大家參考,具體內(nèi)容如下
封裝Echart折線圖,可顯示多條折線
1. 首先在項(xiàng)目中全局引入Echarts,main.js中:
import * as echarts from 'echarts' Vue.prototype.$echarts = echarts
2.components中新建組件baseLineChart.vue,以下代碼直接復(fù)制:
<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>
配置項(xiàng)根據(jù)自身項(xiàng)目來(lái)定制。
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í)間數(shù)組 [‘1-1’,‘1-2’,‘1-3’ ];
chartData為折線數(shù)據(jù),多條數(shù)據(jù)格式 [ [1,2,3],[4,5,6] ]
seriesName為每條折線對(duì)應(yīng)名稱(chēng)
同理可封裝其他圖表
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue+echart實(shí)現(xiàn)圓滑折線圖
- Vue+Echarts實(shí)現(xiàn)柱狀折線圖
- Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖
- vue+echarts實(shí)現(xiàn)多條折線圖
- vue使用echarts實(shí)現(xiàn)折線圖
- vue使用ECharts實(shí)現(xiàn)折線圖和餅圖
- vue+echarts實(shí)現(xiàn)動(dòng)態(tài)折線圖的方法與注意
- vue實(shí)現(xiàn)折線圖 可按時(shí)間查詢
- 在vue中使用echarts(折線圖的demo,markline用法)
- vue+echarts實(shí)帶漸變效果的折線圖
相關(guān)文章
vue遞歸組件實(shí)現(xiàn)elementUI多級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了vue遞歸組件實(shí)現(xiàn)elementUI多級(jí)菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07解決Vue2.0 watch對(duì)象屬性變化監(jiān)聽(tīng)不到的問(wèn)題
今天小編就為大家分享一篇解決Vue2.0 watch對(duì)象屬性變化監(jiān)聽(tīng)不到的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue鼠標(biāo)滾輪滾動(dòng)切換路由效果的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue鼠標(biāo)滾輪滾動(dòng)切換路由效果的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08詳解VUE 定義全局變量的幾種實(shí)現(xiàn)方式
本篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06Vue3+ts+setup?getCurrentInstance使用時(shí)遇到的問(wèn)題以及解決辦法
getCurrentInstance方法用于獲取當(dāng)前組件實(shí)例,僅在setup和生命周期中起作用,下面這篇文章主要給大家介紹了關(guān)于Vue3+ts+setup?getCurrentInstance使用時(shí)遇到的問(wèn)題以及解決辦法,需要的朋友可以參考下2022-08-08