1.main.js
// 引入echarts
import * as echarts from 'echarts'
2.line.js
// 我是折线图
const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
// import 'zrender/lib/svg/svg'
export function drawChartHistogram(param, element) {
const myChart = echarts.init(element)
// 配置项
const pzx = {
// 图例
legend: {
data: param.legend.data ? param.legend.data : [], // 图例的值 示例: ['星期一', '星期二']
show: param.legend.show ? param.legend.show : false, // 控制图例显示
bottom: param.legend.bottom || param.legend.bottom === 0 || param.legend.bottom === '0' ? param.legend.bottom : '', // 控制图例底部如果图例在底部这个参数为0
right: param.legend.right || param.legend.right === 0 || param.legend.right === '0' ? param.legend.right : '', // 控制图例右部如果图例在右部这个参数为0
top: param.legend.top || param.legend.top === 0 || param.legend.top === '0' ? param.legend.top : '', // 控制图例顶部部如果图例在顶部这个参数为0
left: param.legend.left || param.legend.left === 0 || param.legend.left === '0' ? param.legend.left : '', // 控制图例右部如果图例在右部这个参数为0
type: 'scroll'
},
grid: {
containLabel: true,
bottom: param.grid.bottom || param.grid.bottom === 0 || param.grid.bottom === '0' ? param.grid.bottom : '', // 控制图例底部如果图例在底部这个参数为0
right: param.grid.right || param.grid.right === 0 || param.grid.right === '0' ? param.grid.right : '', // 控制图例右部如果图例在右部这个参数为0
top: param.grid.top || param.grid.top === 0 || param.grid.top === '0' ? param.grid.top : '', // 控制图例顶部部如果图例在顶部这个参数为0
left: param.grid.left || param.grid.left === 0 || param.grid.left === '0' ? param.grid.left : '' // 控制图例右部如果图例在右部这个参数为0
},
// y轴 这边暂时按照1个y轴配置
yAxis: {
type: 'value',
show: param.yAxis.show ? param.yAxis.show : false,
name: param.yAxis.name ? param.yAxis.name : '',
nameLocation: param.yAxis.nameLocation ? param.yAxis.nameLocation : 'end', // y轴的name位置start,middle,end
axisLine: {
show: param.yAxis.axisLine ? (param.yAxis.axisLine.show ? param.yAxis.axisLine.show : true) : true,
lineStyle: {
color: param.yAxis.axisLine ? (param.yAxis.axisLine.color ? param.yAxis.axisLine.color : '#CCCCCC') : '#CCCCCC', // y轴线条颜色支持渐变色
type: param.yAxis.axisLine ? (param.yAxis.axisLine.type ? param.yAxis.axisLine.type : 'solid') : 'solid' // 线条类型,默认solid,'dashed','dotted'
}
},
axisLabel: {
inside: false,
color: '#333333'
},
splitLine: {
show: param.yAxis.splitLine ? (param.yAxis.splitLine.show ? param.yAxis.splitLine.show : false) : false,
lineStyle: {
type: param.yAxis.splitLine ? (param.yAxis.splitLine.type ? param.yAxis.splitLine.type : 'dashed') : 'dashed'
}
}
},
// x轴
xAxis: {
type: 'category',
data: param.xAxis.data,
show: param.xAxis.show ? param.xAxis.show : true,
position: param.xAxis.position ? param.xAxis.position : 'bottom', // x轴位置 top,bottom
name: param.xAxis.name ? param.xAxis.name : '', // x轴名称
nameTextStyle: {
color: param.xAxis.nameTextStyle ? (param.xAxis.nameTextStyle.color ? param.xAxis.nameTextStyle.color : '#333333') : '#333333', // x轴的字体颜色
fontSize: param.xAxis.nameTextStyle ? (param.xAxis.nameTextStyle.fontSize ? param.xAxis.nameTextStyle.fontSize : '12') : '12' // x轴的字体大小
},
axisLine: {
show: param.xAxis.axisLine ? (param.xAxis.axisLine.show ? param.xAxis.axisLine.show : true) : true,
lineStyle: {
color: param.xAxis.axisLine ? (param.xAxis.axisLine.color ? param.xAxis.axisLine.color : '#CCCCCC') : '#CCCCCC', // y轴线条颜色支持渐变色
type: param.xAxis.axisLine ? (param.xAxis.axisLine.type ? param.xAxis.axisLine.type : 'solid') : 'solid' // 线条类型,默认solid,'dashed','dotted'
}
},
axisTick: {
// 刻度相关
show: param.xAxis.axisTick ? (param.xAxis.axisTick.show ? param.xAxis.axisTick.show : true) : true,
alignWithLabel: param.xAxis.axisTick ? (param.xAxis.axisTick.alignWithLabel ? param.xAxis.axisTick.alignWithLabel : false) : false
},
axisLabel: {
inside: false,
color: '#333333'
},
splitLine: {
show: param.xAxis.splitLine ? (param.xAxis.splitLine.show ? param.xAxis.splitLine.show : false) : false,
lineStyle: {
type: param.xAxis.splitLine ? (param.xAxis.splitLine.type ? param.xAxis.splitLine.type : 'dashed') : 'dashed'
}
}
},
// series
series: param.series ? param.series : [],
// color
color: param.color ? param.color : [],
dataZoom: [
{
id: 'dataZoomX',
type: 'inside',
xAxisIndex: [0],
end: param.dataZoom.end ? param.dataZoom.end : 100,
filterMode: 'filter'
}
],
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}
}
if (pzx.color.length === 0) {
delete pzx.color
}
if (!pzx.legend.right && pzx.legend.right !== 0 && pzx.legend.right !== '0') {
delete pzx.legend.right
}
if (!pzx.legend.left && pzx.legend.left !== 0 && pzx.legend.left !== '0') {
delete pzx.legend.left
}
if (!pzx.legend.top && pzx.legend.top !== 0 && pzx.legend.top !== '0') {
delete pzx.legend.top
}
if (!pzx.legend.bottom && pzx.legend.bottom !== 0 && pzx.legend.bottom !== '0') {
delete pzx.legend.bottom
}
if (!pzx.grid.right && pzx.grid.right !== 0 && pzx.grid.right !== '0') {
delete pzx.grid.right
}
if (!pzx.grid.left && pzx.grid.left !== 0 && pzx.grid.left !== '0') {
delete pzx.grid.left
}
if (!pzx.grid.top && pzx.grid.top !== 0 && pzx.grid.top !== '0') {
delete pzx.grid.top
}
if (!pzx.grid.bottom && pzx.grid.bottom !== 0 && pzx.grid.bottom !== '0') {
delete pzx.grid.bottom
}
myChart.setOption(pzx)
return myChart
}
3.封装组件
<template>
<div class="daily-record-echarts">
<div ref="dateCharts" class="chart" />
</div>
</template>
<script>
import { drawChartHistogram } from '@/utils/echartsAll/line'
import 'zrender/lib/svg/svg'
export default {
name: 'DailyRecordEcharts',
props: {
tableArray: {
type: Object,
default: () => {
return {
legend: {
data: [], // 图例的值 示例: ['星期一', '星期二'] // -----这个是必须的
show: true, // 控制图例显示
bottom: '', // 控制图例底部如果图例在底部这个参数为0
right: '', // 控制图例右部如果图例在右部这个参数为0
top: '', // 控制图例顶部部如果图例在顶部这个参数为0
left: '' // 控制图例右部如果图例在右部这个参数为0
},
// y轴 这边暂时按照1个y轴配置
yAxis: {
type: 'value',
show: false,
name: '',
nameLocation: 'end', // y轴的name位置start,middle,end
axisLine: {
show: false,
color: '#CCCCCC', // y轴线条颜色支持渐变色
type: 'solid' // 线条类型,默认solid,'dashed','dotted'
}
},
// x轴
xAxis: {
type: 'category',
data: [], // -----这个是必须的
show: true,
position: 'bottom', // x轴位置 top,bottom
name: '', // x轴名称
nameTextStyle: {
color: '#333333', // x轴的字体颜色
fontSize: '12' // x轴的字体大小
},
axisLine: {
show: true,
color: '#CCCCCC', // y轴线条颜色支持渐变色
type: 'solid' // 线条类型,默认solid,'dashed','dotted'
},
axisTick: {
// 刻度相关
show: true,
alignWithLabel: true
}
},
grid: {
top: '',
left: '',
bottom: '',
right: ''
},
color: [],
dataZoom: {},
series: []
}
}
}
},
data() {
return {
mycharts: null
}
},
watch: {
tableArray: {
handler(newName, oldName) {
this.getChart(newName)
},
deep: true
}
},
beforeDestroy() {
// ----------这个是用来释放图表
const dcharts = this.$echarts.getInstanceByDom(this.$refs.dateCharts)
if (dcharts) {
this.$echarts.dispose(dcharts)
// 这是调用ie内存回收
if (window.CollectGarbage) {
window.CollectGarbage()
}
}
/** ****自动适应缩放模块******/
window.removeEventListener('resize', this.resizefun)
this.resizefun = null
},
mounted() {
this.getChart(this.tableArray)
/** ****自动适应缩放模块******/
this.resizefun = () => {
if (this.mycharts) {
// 防止重复性渲染
this.mycharts.resize()
} else {
this.$echarts.init(this.$refs.dateCharts).resize()
}
}
window.addEventListener('resize', this.resizefun)
},
methods: {
getChart(val) {
const dcharts = this.$echarts.getInstanceByDom(this.$refs.dateCharts)
if (dcharts) {
this.$echarts.dispose(dcharts)
// 这是调用ie内存回收
if (window.CollectGarbage) {
window.CollectGarbage()
}
}
this.mycharts = drawChartHistogram(val, this.$refs.dateCharts)
}
}
}
</script>
<style scoped lang="scss" type="text/scss">
.daily-record-echarts{
width:100%;
height:100%;
.chart{
width:100%;
height:100%;
}
}
</style>
4.使用
const echartsOptions = {
legend: {
data: [], // 图例的值 示例: ['星期一', '星期二'] // -----这个是必须的
show: true, // 控制图例显示
bottom: '', // 控制图例底部如果图例在底部这个参数为0
right: '0', // 控制图例右部如果图例在右部这个参数为0
top: '0', // 控制图例顶部部如果图例在顶部这个参数为0
left: '' // 控制图例右部如果图例在右部这个参数为0
},
// y轴 这边暂时按照1个y轴配置
yAxis: {
type: 'value',
show: true,
name: '',
nameLocation: 'end', // y轴的name位置start,middle,end
axisLine: {
show: false,
color: '#ffffff', // y轴线条颜色支持渐变色
type: 'solid' // 线条类型,默认solid,'dashed','dotted'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
// x轴
xAxis: {
type: 'category',
data: [], // -----这个是必须的
show: true,
position: 'bottom', // x轴位置 top,bottom
name: '', // x轴名称
nameTextStyle: {
color: '#333333', // x轴的字体颜色
fontSize: '12' // x轴的字体大小
},
axisLine: {
show: true,
color: '#CCCCCC', // y轴线条颜色支持渐变色
type: 'solid' // 线条类型,默认solid,'dashed','dotted'
},
axisTick: {
// 刻度相关
show: true,
alignWithLabel: true
}
},
color: [],
dataZoom: {
end: 100
},
grid: {
left: 'left',
bottom: 10,
right: 0,
top: 30
},
series: []
}
<s-echart v-loading="loadingEcharts" :table-array="tableArray" style="height:362px;margin-top:50px" />
this.tableArray = JSON.parse(JSON.stringify(echartsOptions))
vue echarts封装折线图
最新推荐文章于 2024-07-05 11:10:29 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)