Echarts圖表的那些事
阿新 • • 發佈：2020-12-19
技術標籤：Echartsjavascriptvue.jshtml5css3
Echarts圖表的修改合集
1、柱狀圖
1、修改柱狀圖的柱寬度，柱狀體上方顯示數值
series: [
{
name: '證券產品',
type: 'bar', //柱狀圖
data: [6, 4, 10, 8, 3, 1],
barWidth: '8%', //柱狀體的寬度
itemStyle: 2、柱狀圖的總寬度
grid: {
//圖表和父盒子之間的距離
left: 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);