一、echarts更改坐标轴文字颜色及大小
X，y，轴坐标，中间刻度线都显示虚线的代码
xAxis: {
data: anameArr,
axisLabel: {
show: true,
textStyle: {
color: '#c3dbff', //更改坐标轴文字颜色
fontSize : 14 //更改坐标轴文字大小
}
},
axisTick: {
show: false
},
axisLine:{
lineStyle:{
color:'#FFE8B7', //更改坐标轴颜色
1,
type:'dashed'
}
},
}
}
yAxis: [
{
type: 'value',
scale : true,
min : 0,
splitNumber : 5,
axisLine: {
show: true,
lineStyle: {
1,
color: "#FFE8B7",
type:'dashed'
}
},
splitLine:{
show: true,
lineStyle: {
1,
color:'#FFE8B7', //更改中间刻度线颜色
type:'dashed'
}
}
},
],
二、EChart图中的文字调整
1.legend 文字调整 textStyle 属性里
"legend": {
"orient": "vertical",
"left": "left",
"textStyle": {
"fontSize": 18
}},
2.tooltip 文字调整 textStyle 属性里
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c}%",
"textStyle": {
"fontSize": 18
}},
3.series 文字调整 label 属性里
"series": [{
"label": {
"normal": {
"show": true,
"textStyle": {
"fontSize": 18
}
},
},
"lableLine": {
"normal": {
"show": true
},
}
}]
三、echarts坐标轴的name属性更改位置
name: 'name',
nameTextStyle: {
padding: [0, 0, 0, 10] // 四个数字分别为上右下左与原位置距离
}
四、echarts环形图如何添加指示线指示文字
如何在环形图上添加指引线和文字呢？
在series中label：中加上
normal: {show: true,position: 'outside'},
labelLine：中加上 labelLine: { normal: {show: true, length: 20,length2: 20,lineStyle: {color: '#333' } } }
chart07(){
let myChart = echarts.init(document.getElementById("Circlechart"));
let option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'horizontal',
x: 'center',
y : 'bottom',
data:[]
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'outside'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
//添加指示线，长度可以自己调整，线的颜色可以不用写，会根据环形图的颜色显示现的颜色
labelLine: {
normal: {
show: true,
length: 20,
length2: 20,
lineStyle: {
color: '#333'
}
}
},
data:[]
}
]
};
myChart.setOption(option);
}，
五、解决echarts图形由于label过长导致文字显示不全问题
字符串模板
模板变量：
｛a｝:系列名
｛b｝:数据名
｛c｝:数据值
｛d｝:百分比
正常直接会写成 formatter: '{b|{b}} {c} {per|{d}%} ',
问题：当指示线处的文字过长的时候我们就需要做处理，进行折行操作
label: {
normal: {
formatter(v) {
let text = v.name;
let value_format = v.value;
let percent_format = Math.round(v.percent) + '%';
if (text.length <= 6) {
return `${text}
${value_format}
${percent_format}`;
} else if (text.length > 6 && text.length <= 12) {
return text = `${text.slice(0, 6)}
${text.slice(6)}
${value_format}
${percent_format}`
} else if (text.length > 12 && text.length <= 18) {
return text = `${text.slice(0, 6)}
${text.slice(6, 12)}
${text.slice(12)}
${value_format}
${percent_format}`
} else if (text.length > 18 && text.length <= 24) {
return text = `${text.slice(0, 6)}
${text.slice(6, 12)}
${text.slice(12, 18)}
${text.slice(18)}
${value_format}
${percent_format}`
} else if (text.length > 24 && text.length <= 30) {
return text = `${text.slice(0, 6)}
${text.slice(6, 12)}
${text.slice(12, 18)}
${text.slice(18, 24)}
${text.slice(24)}
${value_format}
${percent_format}`
} else if (text.length > 30) {
return text = `${text.slice(0, 6)}
${text.slice(6, 12)}
${text.slice(12, 18)}
${text.slice(18, 24)}
${text.slice(24, 30)}
${text.slice(30)}
${value_format}
${percent_format}`
}
},
textStyle: {
fontSize: 14
}
}
},
六、从后台拿到echarts的数据值，求出百分比
legend: {
orient: 'vertical',
icon:"circle",
x:'left', //可设定图例在左、右、居中
y:'bottom', //可设定图例在上、下、居中
padding:[80,50,15,30], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
formatter(name) {
let totals = oneNew + oneRepeat + light;
switch (name) {
case '新':
return '新'+ ' ' +(Math.round(oneNew/totals * 10000) / 100.00 + '%');
case '重':
return '重'+ ' ' +(Math.round(oneRepeat/totals * 10000) / 100.00 + '%');
case '轻':
return '轻'+ ' ' +(Math.round(light/totals * 10000) / 100.00 + '%');
}
return name + "({d}%)"
},
textStyle: {
color: "#FFE8B7", // 文字的颜色。
fontSize: this.getW(30), // 文字的字体大小。
}
},
series：[
label:{
normal:{
show : false,
formatter(v) {
let text = v.name;
let value_format = v.value;
let percent_format = Math.round(v.percent) + '%';
return `${percent_format}
${text}`;
},
textStyle:{
fontSize:this.getW(24),
color:'#FFE8B7'
},
}
}
]
七、echarts图上当鼠标移入显示内容名称后加上冒号
getecharts(){
let chart3 = echarts.init(document.getElementById('echarts'))
let option3 = {
tooltip: {
trigger: 'axis',
axisPointer : {
type : 'shadow'
},
formatter:function(params)//数据格式
{
var relVal = params[0].name+"
";
relVal += params[0].seriesName+ ' : ' + params[0].value+"
";
relVal +=params[1].seriesName+ ' : ' +params[1].value+"
";
relVal += params[2].seriesName+ ' : ' + params[2].value+"%";
return relVal;
}
},
toolbox: {
},
legend: {
show:true,
x: 'right', //居右显示
data: ['直接访问','邮件营销', '联盟广告','视频广告','搜索引擎','百度'],
textStyle: {
fontSize: 12,
color:'#999999',
}
},
grid: {
top:'13%',
left: '0',
right: '4%',
bottom: '5%',
containLabel: true
},
xAxis: [
{
type: 'category',
name: '年龄',
data: this.ageList,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '人数',
// min: 0,
// max: 250,
// interval: 50,
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '邮件营销',
type: 'bar',
barWidth : 20,//柱图宽度
data: this.agedata1List,
itemStyle:{
normal:{color:'#E93F33'}
}
},
{
name: '联盟广告',
type: 'bar',
barWidth : 20,//柱图宽度
data: this.agedata2List,
itemStyle:{
normal:{color:'#FF9900'}
}
},
{
name: '视频广告',
type: 'bar',
barWidth : 20,//柱图宽度
data: this.agedata3List,
itemStyle:{
normal:{color:'#FFD500'}
}
},
{
name: '搜索引擎',
type: 'bar',
barWidth : 20,//柱图宽度
data: this.agedata4List,
itemStyle:{
normal:{color:'#95C81A'}
}
},
{
name: '百度',
type: 'bar',
barWidth : 20,//柱图宽度
data: this.agedata5List,
itemStyle:{
normal:{color:'#46A2FF'}
}
},
{
name: '直接访问',
type: 'line',
data: this.agedata6List,
itemStyle:{
normal:{color:'#FFBF51'}
}
}
]
}
chart3.setOption(option3,true)
},
八、设置柱子之间的间距
series : {
name:'',
type:'bar',
barWidth:20,
barGap:'80%',/*多个并排柱子设置柱子之间的间距*/
barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
data:[],
itemStyle: {
normal: {
barBorderRadius: false,
color: '#1E9FFF',
}
}
}
后期遇到新的问题，解决方案继续添加