搬运的话 点赞哦
文章目录
带区域颜色，格式化触发板，格式化label，格式化pointer 效果如下图所示
```
this.option = {
// 不显示图例
legend: {
show: false,
},
// 调整grid 位置 emmm 里面那个图距离画布的位置
grid: {
top: 20,
bottom: 23,
left: 30,
right: -25,
},
// x轴配置
xAxis: {
type: ‘category’,
// x轴的数据 根据自己的放哦
data: newObj.map((x) => x.name),
axisLine: {
show: true,
// x轴样式
lineStyle: {
color: ‘rgba(72, 199, 255, 0.1)’,
width: 3,
type: ‘solid’,
},
},
// 两边留白（通过两边留白 调整grid 达到如图所示 左边留白右边木有的效果）
boundaryGap: true,
// x轴刻度线
axisTick: {
show: true,
// 在里面
inside: true,
// 和label在一起
alignWithLabel: true,
length: 1,
// 刻度线样式
lineStyle: {
width: 1,
type: ‘solid’,
color: ‘#48C7FF’,
},
},
// x轴label样式
axisLabel: {
show: true,
fontSize: 12,
// 0的话就是每个都有label 1的话就隔一个多一个
interval: 0,
color: ‘#C4DCFF’,
// formatter 没有写的话就默认父级就是这个align
align: ‘center’,
formatter(value, index) {
// 判断第一个隔最后一个 配置富文本样式 改变align 完成label两边向内挤得效果
if (Number(index) === 0) {
return `{firstStyle|${value}}`;
}
if (Number(index) === (newObj.length - 1)) {
return `{lastStyle|${value}}`;
}
return value;
},
rich: {
firstStyle: {
align: 'right',
padding: [0, 0, 0, 20],
},
lastStyle: {
align: 'left',
padding: [0, 30, 0, 0],
},
},
},
},
// y轴样式
yAxis: {
type: 'value',
position: 'left',
// 不展示y轴轴线
axisLine: {
show: false,
},
// y轴刻度线
axisTick: {
show: false,
},
axisLabel: {
show: true,
rotate: 0,
fontSize: 12,
color: '#C4DCFF',
},
// y轴分割线样式
splitLine: {
show: true,
lineStyle: {
color: 'rgba(72, 199, 255, 0.1)',
width: 2,
type: 'solid',
},
},
},
// 触发面板
tooltip: {
// 有axis item cross
trigger: 'axis',
// formater 触发板 c是值 a 是label
formatter: '{c0}',
// 内部内容距离板子得距离
padding: [0, 5],
backgroundColor: '#FFFFFF',
// 新增css
extraCssText: 'border-radius: 0;height: 19px;line-height: 17px;',
textStyle: {
fontSize: 16,
// 字体样式 自己弄哦
fontFamily: 'DINPro, SourceHanSansCN, sans-serif',
color: '#0D1124',
},
},
// 那个线得样式 再trigger 为item无效
axisPointer: {
lineStyle: {
type: 'solid',
width: 2,
color: 'rgba(99, 164, 255, 0.4)',
},
},
series: [
{
// 数据拐点
symbol: 'circle',
itemStyle: {
normal: {
color: {
// 渐变 ⚪ 有line...
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.25,
// 完成那个中间是白色边上是黑色得pointer
colorStops: [{
offset: 0, color: 'rgba(255, 255, 255, 0.8)', // 0% 处的颜色
}, {
offset: 1, color: 'rgba(5, 18, 36, 0.8)', // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
},
// pointer得边界线
borderColor: '#63A4FF', // 拐点边框颜色
},
},
// 区域颜色渐变
areaStyle: {
normal: {
// 右下左上？？
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(255, 255, 255, 0)',
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0.3)',
}], false),
},
},
lineStyle: {
color: 'rgba(255, 255, 255, 1)',
width: 1.5,
},
showSymbol: false,
type: 'line',
data: newObj,
},
],
};
```
奇怪设计de柱状图，带盖 其他配置见第一个
```
// 取和x轴得data 相同长度得数组 每个为0 放series 设置相同得stack
const borderData = newObj.map((x) => x.name).fill(0);
this.option = {
legend: {
show: false,
},
grid: {
top: 20,
bottom: 23,
left: 30,
right: 0,
},
xAxis: {
type: 'category',
// x轴数据
data: newObj.map((x) => x.name),
axisLine: {
show: true,
lineStyle: {
color: 'rgba(72, 199, 255, 0.1)',
width: 3,
type: 'solid',
},
},
boundaryGap: true,
axisTick: {
show: true,
alignWithLabel: true,
inside: true,
length: 1,
lineStyle: {
width: 1,
type: 'solid',
color: '#48C7FF',
},
},
axisLabel: {
show: true,
rotate: 0,
fontSize: 12,
interval: 1,
color: '#C4DCFF',
align: 'center',
},
},
yAxis: {
type: 'value',
position: 'left',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
rotate: 0,
fontSize: 12,
color: '#C4DCFF',
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(72, 199, 255, 0.1)',
width: 2,
type: 'solid',
},
},
},
series: [
{
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(72, 199, 255, 0.1)',
}, {
offset: 1,
color: 'rgba(72, 199, 255, 0.6)',
}], false),
},
},
type: 'bar',
// 起名字哦 同一组得会luo起来
stack: 'total',
// 数据 []
data: newObj,
barMaxWidth: '20%',
},
{
type: 'bar',
itemStyle: {
borderWidth: 4,
borderColor: 'rgba(72, 199, 255, 1)',
},
stack: 'total',
// 就是刚开始声明得那个 全部是0 数组长度相同
data: borderData,
barMaxWidth: '20%',
},
],
};
```
闪现 两个盖
// 取和x轴得data 相同长度得数组 每个为0 放series 设置相同得stack
const borderData = newObj.first.map((x) => x.name).fill(0);
this.option = {
legend: {
show: false,
},
grid: {
top: 20,
bottom: 18,
left: 30,
right: 0,
},
xAxis: {
type: 'category',
// x轴数据
data: newObj.first.map((x) => x.name),
axisLine: {
show: true,
lineStyle: {
color: 'rgba(72, 199, 255, 0.2)',
width: 1,
type: 'solid',
},
},
boundaryGap: true,
axisTick: {
show: false,
},
axisLabel: {
show: true,
interval: 0,
rotate: 0,
fontSize: 12,
color: '#C4DCFF',
},
},
yAxis: [{
type: 'value',
name: 'y1',
position: 'left',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
rotate: 0,
fontSize: 12,
color: '#C4DCFF',
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(72, 199, 255, 0.2)',
width: 1,
type: 'solid',
},
},
}, {
type: 'value',
name: 'y2',
}],
series: [
{
name: 'y1',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(72, 199, 255, 0.1)',
}, {
offset: 1,
color: 'rgba(72, 199, 255, 0.6)',
}], false),
},
},
type: 'bar',
// 第一组
stack: 'one',
barGap: '100%',
data: newObj.first,
barMaxWidth: '20%',
},
{
name: 'y1',
type: 'bar',
itemStyle: {
borderWidth: 4,
borderColor: 'rgba(72, 199, 255, 1)',
},
// 第一组
stack: 'one',
data: borderData,
barMaxWidth: '20%',
}, {
name: 'y2',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(255, 203, 67, 0.1)',
}, {
offset: 1,
color: 'rgba(255, 203, 67, 0.6)',
}], false),
},
},
type: 'bar',
// 第二组
stack: 'two',
data: newObj.second,
barMaxWidth: '20%',
},
{
name: 'y2',
type: 'bar',
itemStyle: {
borderWidth: 4,
borderColor: 'rgba(255, 203, 67, 0.6)',
},
// 第二组
stack: 'two',
data: borderData,
barMaxWidth: '20%',
},
],
};
带缝隙得圆环图
大概是如下图所示 但是不是下面代码实现的 圆环的颜色和边框需要自己设置
this.option = {
tooltip: {
trigger: 'item',
},
legend: {
show: false,
},
series: [
{
type: 'pie',
radius: ['68%', '80%'],
hoverAnimation: true,
silent: true,
itemStyle: {
borderWidth: 2,
//设置边框的颜色 和背景色一样自己改哦 你也可以试试transpant
borderColor: 'rgba(11, 96, 136, 0.5)',
},
label: {
show: false,
},
labelLine: {
show: false,
},
// 圆环的颜色
color: ['#FFCB43', '#ffffff', '#48C7FF'],
// 数据 [{name: 'name1',value: 20},{name: 'name1',value: 20},{name: 'name1',value: 20}]
data: newObj,
},
],
};
水球图 要引入一个包 echarts-liquidfill 文件内部 import ‘echarts-liquidfill’;
const option = {
// echars增加图片
graphic: {
elements: [{
type: 'image',
zlevel: 1,
style: {
// img是import的
image: img,
x: 48,
y: 62,
width: 46,
height: 42,
},
}],
},
backgroundColor: '#fff',
series: [{
type: 'liquidFill',
// 球体大小
radius: '100%',
// 位置
center: ['50%', '50%'],
// 数据 num 两个一样的num 是波浪大小
data: [num, num],
backgroundStyle: {
borderWidth: 2,
color: '#fff',
borderColor: 'rgba(238, 238, 238, 1)',
},
// 波浪颜色
color: ['rgba(118, 143, 235, 0.2)', 'rgba(118, 143, 235, 0.2)'],
label: {
show: false,
},
outline: {
show: false,
},
},
],
};
用柱状图api实现的圆环 半圆结尾，带点击事件
<template>
<!-- 简单的插槽卡片 不再展示这块代码-->
<TempCard title="问题发现情况分析">
<div ref="questionSolutionPie" class="solution-pie"></div>
</TempCard>
</template>
<script>
import TempCard from '@/components/event-monitor/month-statistics/TempCard.vue';
export default {
name: 'QuestionSolutionPie',
components: { TempCard },
watch: {
echartsData: {
handler() {
this.$nextTick(() => {
this.init();
});
},
},
},
data() {
return {
chart: null,
colors: ['rgba(46, 139, 232, 1)', 'rgba(255, 141, 22, 1)',
'rgba(121, 74, 232, 1)'],
echartsData: [
{ name: '监控告警', value: 151, percent: 69 },
{ name: '外部告知', value: 45, percent: 21 },
{ name: '系统负责人发现', value: 23, percent: 10 },
],
};
},
mounted() {
this.chart = this.$echarts.init(this.$refs.questionSolutionPie, null, true);
this.chart.on('click', this.chartClick);
this.$once('hook:beforeDestroy', () => {
this.chart && this.chart.dispose();
});
this.initEchart();
},
methods: {
// 点击事件
chartClick() {
const popAssociatePanel = {
id: '1',
};
this.$store.commit('setPopAssociatePanel', { popAssociatePanel });
},
initEchart() {
// 处理数据 拿到每项的数据 依次做累加，然后把环状柱状图叠加在一起
const temp = this.echartsData;
const tempArr = temp.map((item) => item.value);
// 所有数据的和作为一个环的最大值
const sum = tempArr.reduce((a, b) => a + b);
let num = 0;
const tempSeries = temp.map((item, index) => {
const obj = {
name: item.name,
silent: false,
data: [
{
value: num + item.value,
},
],
type: 'bar',
coordinateSystem: 'polar',
roundCap: true,
barWidth: 12,
barGap: '-100%',
z: tempArr.length - index,
};
num += item.value;
return obj;
});
// echarts配置
const option = {
color: this.colors,
grid: {
top: 50,
right: 0,
},
// 图例格式化
formatter(name) {
const { value = 0, percent = 0 } = temp.find((item) => item.name === name);
return `{a| ${name}}{b| ${value}起}{c|${percent}%}`;
},
// 图例样式
legend: {
show: true,
bottom: 50,
selectedMode: false,
left: 100,
icon: 'circle',
itemHeight: 12,
itemWidth: 12,
textStyle: {
padding: [0, 0, 0, 2],
rich: {
a: {
fontSize: 24,
width: 205,
height: 40,
fontFamily: 'AlibabaPuHuiTi, sans-serif',
color: 'rgba(255,255,255,0.5)',
},
b: {
fontSize: 24,
width: 110,
height: 40,
fontFamily: 'DIN, sans-serif',
color: 'rgba(255,255,255,0.5)',
},
c: {
fontSize: 24,
width: 100,
height: 40,
fontFamily: 'DIN, sans-serif',
color: 'rgba(255,255,255,1)',
},
},
},
},
// bar类型转成角度环x轴
angleAxis: {
// 一圈的数据
max: sum,
clockwise: true,
// 隐藏刻度线
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
type: 'category',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
// 位置以及大小
polar: {
center: ['50%', '30%'],
radius: '80%',
},
tooltip: {
show: false,
},
series: [
// 在圆环的上面叠加一个饼图放label 和做点击事件 可以使圆环和中间部分都能点击到
{
type: 'pie',
silent: false,
radius: ['0%', '43%'],
center: ['50%', '30%'],
itemStyle: {
opacity: 0,
},
hoverAnimation: false,
z: 10,
label: {
show: true,
position: 'center',
formatter() {
return '{a|事件发现\n途径分析}';
},
rich: {
a: {
fontSize: 24,
lineHeight: 27,
fontFamily: 'AlibabaPuHuiTi,sans-serif',
fontWeight: 400,
color: 'rgba(255,255,255,0.8)',
},
},
},
data: this.echartsData,
labelLine: {
show: false,
},
},
...tempSeries,
],
};
this.chart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
// 中间的背景图
$pieBg: '~@/assets/img/event-monitor/questrion-pie-bg.png';
.solution-pie {
box-sizing: border-box;
width: 100%;
height: 100%;
background-image: url($pieBg);
background-position: 166px 30px;
background-repeat: no-repeat;
}
</style>
2025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
