一 . 准备阶段
1.下载
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>
4.一些网站
1.Echarts官网
配置项都在官网,附上官网链接:Echarts官网
2.Make A Pie
这个网站有特别多echarts图表 很实用 可以筛选出自己需要的直接拿来用
链接:Make A Pie
今年发现它的官网停止服务啦,整理了一些替代网站:Echarts Demo合集
二.封装
创建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.legend颜色配置 让图例的颜色跟着图表的颜色来
代码:
2.折线图平滑
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,开启边界约束。这样,当鼠标悬停在图表上时,提示框的位置会被限制在图表的区域内,避免超出图表的边界。
End
ps:有些配置需要用的时候直接百度就可以了 感觉有目的的查会比看文档快一些