实现一 :自定义坐标轴 提示信息
option = {
// 当前列提示信息拼接 :params.value[1]:当前点的y坐标值
tooltip: {
// 触发类型:坐标轴触发
show: true,
trigger: "axis",
backgroundColor: '#FDF5F6',
borderColor: '#FDF5F6',
position: [0, -40],
padding: 0,
margin: 0,
textStyle: {
color: "#F21612"
},
hideDelay: 0,
showDelay: 0,
alwaysShowContent: false,
transitionDuration: 0,
axisPointer: {
show: false,
type: 'line',
axis: 'x',
snap: true,
showContent: true,
label: {
backgroundColor: '#FDF5F6',
borderColor: '#FDF5F6',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#fff'
},
formatter: function(params, b) {
return params.value;
}
},
lineStyle: {
color: '#a9b2bb',
width: 1,
type: 'solid'
},
},
triggerOn: 'click|mousemove',
// extraCssText: 'width:100%;height:50px;background:#FDF5F6;',
// trigger: 'axis',
// backgroundColor: 'rgba(255,255,255,0.9)', // 通过设置rgba调节背景颜色与透明度
// borderColor: '#C5CCD1',
// textStyle: {
// color: '#8E989E'
// },
// hideDelay: '10',
formatter: '{b0}<div style="position: relative; padding-left: 12px; color:#EB1F10;"><i style="display:block; width:8px;height:8px;border-radius:10px;background:#EB1F10; position:absolute; top: 7px; left:0;"></i>{a0}: {c0}%</div><div style="position: relative; padding-left: 12px; color:#2B67E8;"><i style="display:block; width:8px;height:8px;border-radius:10px;background:#2B67E8; position:absolute; top: 7px; left:0;"></i>{a1}: {c1}%</div>',
color: '#8E989E',
borderWidth: '1',
// formatter: function (params) {
// params = params[0];
// var date = new Date(params.name);
// return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
// },
// axisPointer: {
// animation: false
// },
// extraCssText:'background:rgba(0, 0, 0, 0.5);'
},
grid: {
left:57,//margin-left
right:10,
top:24,
bottom:33
},
animation: false,//静态绘制echarts
xAxis: {
type: 'category',
z: 8,
boundaryGap: false,//边界间隙
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//x轴样式修改
axisLine: {
show: true, //是否显示坐标轴轴线。
onZero: false,//设置坐标轴(x、y)不从0开始
lineStyle: {
color: "#e5e8ef"//坐标轴颜色
}
},
// x轴字体样式修改
axisLabel: {
show: true,
interval: 1,//每间隔1个一展示【中间空一个位置】展示信息
margin: 3,
textStyle: {
color: '#757E85', //x轴字体颜色
fontSize: 12
},
padding:[3,0,0,0],
fontFamily: 'DIN-Regular'
},
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
scale: false,
min: -400,//最大值
max: 400,//最小值
type: 'value',
interval:200,//每间隔200个一展示【中间空200个位置】展示y轴信息
splitNumber:7,//y轴均分
z: 8,
axisLabel: {
inside: true,
align: 'left',
padding: [0, 0, 0, -55],
verticalAlign: 'middle',
fontFamily: 'DIN-Regular',
formatter: function (params) {
return params+'%';
},
rich: {
a: {
verticalAlign: 'bottom',
padding: [5, 0, 0, 0],
lineHeight: 10,
fontSize: 10,
z: 16
}
},
textStyle: { color: '#757E85', fontSize: 12 }
},
//控制横向网格线属性
splitLine: {
lineStyle: {
color: '#E5E9EF',
type: 'dashed',
width: 1
}
},
axisLine: { show: false, onZero: false },// 不显示坐标轴轴线
axisTick: { show: false },//不显示坐标轴刻度
alwaysShowContent: false
},
series: [{
name: "aaa的值",
type: 'line',
smooth: true, //是否平滑显示
symbol: 'circle',//每个小点点的样式风格
showSymbol: false,//默认不展示小点点 经过再显示
showAllSymbol: false,
z: 10,
symbolSize: 5,
data: [320, 332, 301, 334, 30, -30, -320],
silent: false,
itemStyle: {
normal: {
color: '#F21612',//轨迹线和小点点的颜色
borderColor: '#F21612',//小点点的边框颜色
}
},
lineStyle: {
normal: {
width: 1, //连线粗细
color: "#F21612", //轨迹线颜色
}
},
// 阴影区域
areaStyle: {
// 渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(243, 78, 98, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}]),
// 常规设置
// normal: {
// opacity: 1,//阴影面积 0无 1全
// color: "#ddd",
// origin: "start"
// },
}
},{
name: "bbb的值",
type: 'line',
smooth: true, //是否平滑显示
symbol: 'circle',//每个小点点的样式风格
showSymbol: false,//默认不展示小点点 经过再显示
showAllSymbol: false,
z: 10,
symbolSize: 5,
data: [222, 111, -333, 234, -30, 100, 110],
silent: false,
itemStyle: {
normal: {
color: '#A9B2B8',//轨迹线和小点点的颜色
borderColor: '#A9B2B8',//小点点的边框颜色
}
},
lineStyle: {
normal: {
width: 1, //连线粗细
color: "#A9B2B8", //轨迹线颜色
}
},
// 阴影区域
areaStyle: {
// 渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(169,178,184, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}]),
// 常规设置
// normal: {
// opacity: 0,//阴影面积 0无 1全
// color: "#ddd",
// origin: "start"
// },
}
}]
}
实现二:无坐标轴 提示信息等
option = {
grid: {
left:0,
right:10,
top:0,
bottom:0
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
scale: false,
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
axisLine: { show: false, onZero: false },
axisTick: { show: false },
alwaysShowContent: false
},
series: [{
name: "aaa的值",
type: 'line',
smooth: true, //是否平滑显示
symbol: 'circle',//每个小点点的样式风格
showSymbol: false,//默认不展示小点点 经过再显示
showAllSymbol: false,
z: 10,
symbolSize: 5,
data: [320, 332, 301, 334, 30, -30, -320],
silent: false,
itemStyle: {
normal: {
color: '#F21612',//轨迹线和小点点的颜色
borderColor: '#F21612',//小点点的边框颜色
}
},
lineStyle: {
normal: {
width: 1, //连线粗细
color: "#F21612", //轨迹线颜色
}
},
// 阴影区域
areaStyle: {
// 渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(243, 78, 98, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}]),
}
}]
}
阴影区域 不以x轴为边界 仅在曲线下展示 :通过origin: "start"属性实现
option ={
grid: {
left:0,
right:10,
top:0,
bottom:0
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
// scale: false,
// axisLabel: {
// show: false,
// },
splitLine: {
show: false,
},
axisLine: { show: false, onZero: false },
// axisTick: { show: false },
// alwaysShowContent: false
},
series: [{
name: "bbb的值",
type: 'line',
smooth: true, //是否平滑显示
symbol: 'circle',//每个小点点的样式风格
// showSymbol: false,//默认不展示小点点 经过再显示
showAllSymbol: false,
hoverAnimation:false,
z: 10,
symbolSize: 5,
data: [222, 111, -333, 234, -30, 100, 110],
// silent: false,
itemStyle: {
normal: {
color: '#A9B2B8',//轨迹线和小点点的颜色
borderColor: '#A9B2B8',//小点点的边框颜色
}
},
lineStyle: {
normal: {
width: 1, //连线粗细
color: "#A9B2B8", //轨迹线颜色
}
},
// 阴影区域
areaStyle: {
// 渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(169,178,184, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}]),
origin: "start"
// 常规设置
// normal: {
// opacity: 0.3,//阴影面积 0无 1全
// color: "#ddd",
// origin: "start"
// },
}
}]
}
效果对比
静态绘制echarts:animation: false,
Echarts中属性areaStyle折线图线下方区域颜色修改
echarts折线图 鼠标移入不改变小点显示样式:hoverAnimation:false,==》echarts饼图鼠标移入,悬停部分不放大突出
饼图
Echarts 饼图中间添加文字、title、graphic
根据条件:取消ios端 左滑返回上一页的默认事件:@touchstart.prevent
<template>
<div :id="id" class="chart" :ref="id" @touchend="remove" @touchstart="start"></div>
</template>
<script>
import echarts from 'echarts'
export default {
props: {
// 取消走势图默认事件
stopPrev: {
type: Boolean,
default: false,
},
},
//...
methods: {
start(e) {
if (this.stopPrev) {
e.preventDefault()
}
},
},
}
</script>
隐藏tip和轴线
<template>
<div :id="id" class="chart" :ref="id" @touchend="remove" @touchstart.prevent></div>
</template>
methods: {
// 隐藏tip
remove(){
// 鼠标移出 隐藏tip
this.chart.dispatchAction({
type: 'hideTip'
})
// 鼠标移出 隐藏轴线
this.chart.dispatchAction({
type: 'updateAxisPointer',
currTrigger: 'leave'
})
}
},