在Vue中使用Echarts+封装
投稿：wdc
这篇文章主要介绍了在Vue中使用Echarts++封装,需要的朋友可以参考下
一 . 准备阶段
1.下载 echarts
npm install echarts -S 有时候版本过高会报错 换成 "echarts": "4.2.1"
2.全局引入
// 在main.js中引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts = echarts
3.创建文件Charts.vue以及盒子
<div ref="chart"></div>
二.封装
创建Chart.vue 封装echarts 使用时只用传option
<template>
<div ref="chart" class="chart"></div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Chart',
props: {
// 传配置项option
option: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
chart: null
}
},
// 这里是获取我项目侧边栏的状态
computed: {
...mapGetters(['sidebar'])
},
watch: {
option: {
handler(val) {
// 判断传入的option是否有内容
if (Object.keys(val).length) {
this.$nextTick(() => {
this.drawChart()
})
}
},
immediate: true,
deep: true
},
// 当侧边栏打开或者收缩 都影响了图表的宽度 所以需要重绘 如果项目里没左侧侧边栏可以不用监听重绘
'sidebar.opened': {
handler(val) {
this.$nextTick(() => {
this.drawChart()
})
}
}
},
methods: {
drawChart() {
this.chart = this.$echarts.init(this.$refs.chart) // 初始化echarts
this.chart.setOption(this.option) // 设置对应配置项
// 当窗口大小改变 echarts重置大小
window.addEventListener('resize', () => {
this.chart.resize()
})
}
}
}
</script>
<style lang="scss" scoped>
.chart {
width: 100%;
height: 100%;
}
</style>
三.使用
// 使用组件
<chart class="chart" :option="pieOption" />
// 引入组件
import Chart from "../components/Chart.vue";
components: { Chart }
// 定义option配置
this.pieOption={....}
示例 :
<template>
<div class="home">
<chart class="chart" :option="pieOption" />
</div>
</template>
<script>
import Chart from "../components/Chart.vue";
export default {
name: "Home",
components: { Chart },
data() {
return {
pieOption: {},
};
},
created() {
this.initPie();
},
methods: {
initPie() {
const color = [
"#6080EB",
"rgba(96, 128, 235, 0.42)",
"rgba(96, 128, 235, 0.03)",
];
const xData = [
"2021-11-21",
"2021-11-22",
"2021-11-23",
"2021-11-24",
"2021-11-25",
"2021-11-26",
"2021-11-27",
];
const yData = [1220, 182, 491, 234, 790, 330, 310];
this.pieOption = {
color: color[0],
dataZoom: {
type: "inside",
xAxisIndex: [0],
},
tooltip: {
show: true,
trigger: "axis",
},
grid: {
top: 10,
bottom: 40,
},
xAxis: {
boundaryGap: false,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#d8d8d8",
},
},
axisLabel: {
color: "rgba(0, 0, 0, 0.65)",
},
data: xData,
},
yAxis: {
splitNumber: 4,
splitLine: {
show: true,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#d8d8d8",
},
},
axisLabel: {
color: "rgba(0, 0, 0, 0.65)",
},
},
series: [
{
type: "line",
showSymbol: false,
smooth: true,
lineStyle: {
color: color[0],
width: 3,
},
areaStyle: {
//区域填充样式
normal: {
color: this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[1],
},
{
offset: 1,
color: color[2],
},
],
false
),
},
},
data: yData,
},
],
};
},
},
};
</script>
<style lang="scss" scoped>
.home {
width: 100%;
height: 100%;
.chart {
width: 80%;
height: 300px;
margin: 20px auto;
}
}
</style>
四.配置笔记
1.常用主配置
backgroundColor 图表默认背景
title 图表标题-----可设置图表主标题和副标题
legend 图例配置
tooltip 提示框
grid 网格-----可设置图表位置以及大小
xAxis x轴
yAxis y轴
series 系列列表。每个系列通过 type 决定自己的图表类型。----可以改变图表类型以及数据
2.简单笔记
1.折线图平滑
smooth: true, //平滑的折线
3.折线图点的颜色不同处理
ps:需求是折线图的数据是0的点 对应颜色是黑色
series: [
{
name: '每日30天销量分析',
type: 'line',
data: [0, 12, 0, 86, 12, 0, 6],
lineStyle: {
color: '#D70023'
},
symbol: 'circle', // 实心圆点
itemStyle: {
normal: {
color: (e) => {
return this.getColor(e.data) // 主要是这里 用color的回调去根据值返回颜色值
},
lineStyle: {
width: 1, // 设置虚线宽度
type: 'solid' // 虚线'dotted' 实线'solid'
}
}
}
}
]
getColor(data) {
if (data) {
return '#D70023'
} else {
return '#333'
}
},
4.图例过多导致超出盒子
tooltip 组件中的 confine 属性用于控制提示框的边界约束。当设置为 true 时，提示框将被限制在图表的区域内，不会超出图表的边界。
tooltip: {
confine: true,// 设置为true，开启边界约束
}
在上述代码中，我们将 tooltip 的 confine 属性设置为 true，开启边界约束。这样，当鼠标悬停在图表上时，提示框的位置会被限制在图表的区域内，避免超出图表的边界。
:有些配置需要用的时候直接百度就可以了 感觉有目的的查会比看文档快一些
到此这篇关于在Vue中使用Echarts 使用+封装的文章就介绍到这了,更多相关在Vue中使用Echarts 使用+封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！