VUE项目中封装Echart折线图
清静为天下 人气:0封装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>
配置项根据自身项目来定制。
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 图表数据的显示单位
timeX为X轴数据,一般为时间数组 [‘1-1’,‘1-2’,‘1-3’ ];
chartData为折线数据,多条数据格式 [ [1,2,3],[4,5,6] ]
seriesName为每条折线对应名称
同理可封装其他图表
加载全部内容