Echarts图表的修改合集
1、柱状图
1、修改柱状图的柱宽度，柱状体上方显示数值
series: [
{
name: '证券产品',
type: 'bar', //柱状图
data: [6, 4, 10, 8, 3, 1],
barWidth: '8%', //柱状体的宽度
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#767676',
fontSize: 12,
},
},
},
},
},
]
2、柱状图的总宽度
grid: {
//图表和父盒子之间的距离
left: '3%',
right: '4%',
bottom: '3%',
top: '17%',
containLabel: true,
width: '88%',//柱状图的总宽度
},
3、修改y轴的数值
yAxis: {
min: 0,//最小值
max: 10,//最大值
interval: 2.5,//间隔值
nameTextStyle: {
fontSize: 16,
color: '#DBDBDB',
},
},
关于legend的修改默认在上方中间
legend: {
//图例
x: 'left' | 70, // 'center' | 'left' | {number},
y: 'top' | 20, // 'center' | 'bottom' | {number}
itemWidth: 10,
itemHeight: 10,
icon: "circle", // 字段控制形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
itemGap: 70, // 设置间距
padding: -10, // [5, 10, 15, 20]
data: [
{
name: '证券产品',
textStyle: {
color: '#A4A4A4',
},
},
{
name: '理财通',
textStyle: {
color: '#A4A4A4',
},
},
],
},
关于hover的那些修改
let options = {
color: ['#73A0FA', '#7DCB58', '#7585A2'],
tooltip: {
backgroundColor: 'rgba(255,255,255,1)',//背景颜色，透明度
borderWidth: 1,//边框
borderColor: '#E7EAEF',//边框颜色
extraCssText: 'width:200px;height:100px;',//设置高，宽
trigger: 'axis',
padding: [10, 10], // [5, 10, 15, 20]//设置字体与hover的内边距
textStyle: {
color: '#626469',
fontSize: '14',
},
trigger: 'item',
formatter: (params) => { //这段代码请看下图，用来设置后面数值的距离
let dataStr = `<div><p style="color:#6A6C70;margin-left:10px">${params.name}</p></div>
<span style='display:inline-block;width:5px;height:5px;margin-left:10px'>${params.marker}<span/><span style='display:inline-block;margin-left:10px'>${params.name}<span/><span style='display:inline-block;margin-left:20px'>${params.percent}%</span>
`;
return dataStr;
},
},
},
饼图的修改中间显示百分比
1、饼图的位置
grid: {
//图表和父盒子之间的距离
left: '3%',
right: '4%',
bottom: '3%',
top: '17%',
containLabel: true,
width: '50%',
height: '50%',
},
2、对内圈增加内容
graphic: [
{
//环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
top: 70,
left: 'center',
style: {
text: '总人数',
textAlign: 'center',
fill: '#666', //文字的颜色
width: 30,
height: 30,
fontSize: 14,
fontFamily: 'Microsoft YaHei',
},
},
{
//环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
top: 90,
left: 'center',
style: {
text: '8',
textAlign: 'center',
fill: '#000', //文字的颜色
width: 30,
height: 30,
fontSize: 26,
fontFamily: 'Microsoft YaHei',
},
},
],
关于折线图
this.chartLine = echarts.init(document.getElementById('chartLineBox'));
var option = {
tooltip: {
//设置tip提示
trigger: 'axis',
showDelay: 0,
// hideDelay: 50,
transitionDuration: 0,
backgroundColor: 'rgba(255,255,255,0.9)',
borderWidth: 1,
borderColor: '#E7EAEF',
// backgroundColor: '#E7EAEF',
extraCssText: 'width:180px;height:170px;',
trigger: 'axis',
padding: [10, 10], // [5, 10, 15, 20]
textStyle: {
color: '#626469',
fontSize: '14',
},
formatter: (params) => {
let dataStr = `<div><p style="color:#6A6C70;margin-left:10px;">${params[0].name}</p></div>`;
params.forEach((item) => {
dataStr += `<div>
<div style="margin: 10px;">
<span style="display:inline-block;width:10px;height:10px; border-radius: 100%;background-color:${item.color};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#6A6C70;margin-left:20px;">${item.data}</span>
</div>
</div>`;
});
return dataStr;
},
},
legend: {
//设置区分（哪条线属于什么）
x: 'left',
y: 'top',
padding: [10, 0, 0, 130],
itemWidth: 15, // 设置宽度
itemHeight: 2, // 设置高度
icon: 'rectangle',
data: [
{
name: '在线实验',
textStyle: {
color: '#A4A4A4',
fontSize: 14,
// fontFamily: 'Times New Roman',
},
},
{
name: '新建实验',
textStyle: {
color: '#A4A4A4',
fontSize: 14,
// fontFamily: 'Arial',
},
},
],
},
color: ['#409EFF', '#FBD657'], //设置区分（每条线是什么颜色，和 legend 一一对应）
grid: {
bottom: '30%',
},
xAxis: {
// //设置x轴
type: 'category',
axisLabel: {
interval: 0, //横轴信息全部显示
rotate: 45, //倾斜度可以根据需求设置
},
boundaryGap: true, //坐标轴两边不留白
// axisTick:true,
axisTick: {
alignWithLabel: true,
},
data: [
'2020-12-1~2020-12-7',
'2020-12-8~2020-12-14',
'2020-12-5~2020-12-21',
'2020-12-22~2021-12-28',
'2020-12-29~2021-1-4',
'2021-1-5~2021-1-11',
'2021-1-5~2021-1-11',
'2021-1-5~2021-1-11',
'2021-1-5~2021-1-11',
'2021-1-5~2021-1-11',
'2021-1-5~2021-1-11',
'2021-1-5~2021-1-11',
],
nameTextStyle: {
//坐标轴名称的文字样式
color: '#777777',
fontSize: 16,
// padding: [0, 0, 0, 20],
},
axisLine: {
//坐标轴轴线相关设置。
lineStyle: {
color: '#777777',
},
onZero: false,
},
},
yAxis: {
min: 0,
max: 100,
interval: 25,
nameTextStyle: {
fontSize: 16,
color: '#640A26',
},
axisLine: {
show: false,
lineStyle: {
color: '#777777',
},
},
type: 'value',
},
series: [
{
symbol: 'circle',
name: '在线实验',
data: [81, 65, 59, 91, 95, 42, 70, 56, 74, 48, 45, 37],
type: 'line', // 类型为折线图
symbolSize: 5,
lineStyle: {
// 线条样式 => 必须使用normal属性
normal: {
fontSize: 40,
color: '#409EFF',
//折点显示数值,
},
},
itemStyle: {
normal: {
color: '#8BC4FF',
fontSize: 40,
borderColor: '#8BC4FF',
lineStyle: {
color: '#8BC4FF',
},
label: { show: true, color: 'black' },
},
},
},
{
symbol: 'circle',
name: '新建实验',
symbolSize: 5,
data: [38, 55, 24, 84, 60, 58, 50, 82, 60, 35, 60, 40],
type: 'line',
lineStyle: {
normal: {
color: '#FBD657',
},
},
itemStyle: {
normal: {
color: '#FBD964',
lineStyle: {
color: '#FBD657',
},
label: {
show: true,
color: 'black',
},
},
// normal: {
// },
},
},
],
};
this.chartLine.setOption(option);
动态生成series
let seriesData = res.data.seriesData;
var serLineItem = function () {
return {
name: '',
type: 'line',
data: [],
type: 'bar',
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#767676',
fontSize: 12,
},
},
},
},
};
};
let bb = Object.values(res.data);
if (bb.length === 0) {
this.barShow = true;
this.view = false;
} else {
this.barShow = false;
this.view = true;
}
var newData = [];
var lengenData = [];
for (var i = 0; i < seriesData.length; i++) {
var lineItem = new serLineItem();
lineItem.name = seriesData[i].name;
lineItem.data = seriesData[i].data;
lengenData.push(seriesData[i].name);
newData.push(lineItem);
}
series: newData,
扫一扫
4875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
