上面先說注意事項
1.如果使用show hidden控制圖表顯示隱藏，某些切換效果很奇怪，比如餅圖，會從左上角開始放大，很丑，這個時候我們可以設置其寬高來解決問題,給其設置寬高后，切換的奇怪效果即可消失。
<!-- 餅圖組件 -->
<div class="chart01" echarts #myEchart01 [options]="option01"></div>
.chart01{
width: 23.426vw;
height: 21.523vw;
}
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { NgxEchartsService } from 'ngx-echarts';
@Component({
selector: 'app-echart04',
templateUrl: './echart04.component.html',
styleUrls: ['./echart04.component.less']
})
export class Echart04Component implements OnInit {
constructor(
private es: NgxEchartsService,
) { }
ngOnInit(): void {
}
ngAfterViewInit() {
this.setEcharts01()
}
@ViewChild('myEchart01', { static: false }) myEchart01: ElementRef;
option01 = {
title: {
text: '2323',
textStyle: { fontSize: 26 },
left: 'center',
top: 'center',
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
},
series: [
{
type: 'pie',
radius: ['34%', '57%'],
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 100, name: '中' },
{ value: 200, name: '高' },
{ value: 50, name: '低' },
],
emphasis: {
// 這個是鼠標放上去時候的陰影
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 5,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
};
setEcharts01() {
this.es.getInstanceByDom(this.myEchart01.nativeElement).setOption(this.option01);
}
}
1.餅圖怎么調整左右位置
只需要調整option.series里的center: ['30%', '50%']
option = {
title: {
text: '某站點用戶訪問來源',
subtext: '純屬虛構',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series : [ // 把餅圖挪到了左邊
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['30%', '50%'], // 這個代碼~~
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
]
2.更改x軸樣式,控制樣式里的X軸字在中間, 距離Y軸還有點距離
xAxis: {
type: 'category',
axisTick: { alignWithLabel: true }, // 控制樣式里的X軸字在中間距離Y軸還有點距離
data: ['5', '10', '15', '20', '25', '30'],
},
3.echarts將網格線設置成虛線
yAxis: {
splitLine :{ //網格線
lineStyle:{
type:'dashed' //設置網格線類型 dotted：虛線 solid:實線
},
show:true //隱藏或顯示
}
}
4.x軸刻度居中
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐標軸指示器，坐標軸觸發有效
type: 'shadow',
// 默認為直線，可選為：'line' | 'shadow'
},
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
grid: { top: '12%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: [
{
type: 'category',
data: ['8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30', '20:30'],
axisTick: { alignWithLabel: true }, // 刻度居中核心代碼
axisLabel: {
textStyle: {
// color: 'black', // 修改X軸文字的顏色
fontSize: '9', // 修改X軸文字大小
}
},
},
],
// xAxis: [
// {
// data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],
// show: false,
// },
// {
// data: ['8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30', '20:30', '21:30'],
// position: 'bottom',
// boundaryGap: false,
// axisPointer: {
// show: false,
// },
// nameTextStyle: {
// color: '#999',
// },
// axisLine: {
// show: false,
// },
// axisTick: {
// show: false,
// },
// axisLabel: {
// // interval: 0,
// // color: '#999999',
// textStyle: {
// color: 'red', // 修改X軸文字的顏色
// fontSize: '9', // 修改X軸文字大小
// }
// },
// // splitLine: { // 背景豎着的刻度線
// // show: true,
// // lineStyle: {
// // color: '#F1F1F1',
// // },
// // },
// },
// ],
yAxis: [{
type: 'value',
splitLine: { //網格線
lineStyle: {
type: 'dashed' //設置網格線類型 dotted：虛線 solid:實線
},
show: true //隱藏或顯示
}
}],
series: [{
name: '直接訪問', type: 'bar', barWidth: '60%', data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],
itemStyle: {
normal: {
//這里是重點
color: function (params) {
// var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
// return colorList[params.dataIndex]
return '#0eb30e'
}
}
}
}],
}
5.echarts X軸區間柱形圖，X軸 刻度數組長度 比 數據數組長度 多一個
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐標軸指示器，坐標軸觸發有效
type: 'shadow',
// 默認為直線，可選為：'line' | 'shadow'
},
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
grid: { top: '12%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
// xAxis: [
// {
// type: 'category',
// data: ['8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30', '20:30'],
// axisTick: { alignWithLabel: true }, // 刻度居中核心代碼
// axisLabel: {
// textStyle: {
// // color: 'black', // 修改X軸文字的顏色
// fontSize: '9', // 修改X軸文字大小
// }
// },
// },
// ],
xAxis: [ // 核心代碼--雙x軸刻度
{
data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],
show: false,
},
{
data: ['8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30', '20:30', '21:30'],
position: 'bottom',
boundaryGap: false,
axisPointer: {
show: false,
},
nameTextStyle: {
color: '#999',
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
// interval: 0,
// color: '#999999',
textStyle: {
color: 'red', // 修改X軸文字的顏色
fontSize: '9', // 修改X軸文字大小
}
},
splitLine: { // 背景豎着的刻度線
show: true,
lineStyle: {
color: '#F1F1F1',
},
},
},
],
yAxis: [{
type: 'value',
splitLine: { //網格線
lineStyle: {
type: 'dashed' //設置網格線類型 dotted：虛線 solid:實線
},
show: true //隱藏或顯示
}
}],
series: [{
name: '直接訪問', type: 'bar', barWidth: '60%', data: [100, 80, 50, 120, 120, 30, 100, 100, 80, 50, 120, 120, 30, 100],
itemStyle: {
normal: {
//這里是重點
color: function (params) {
// var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
// return colorList[params.dataIndex]
return '#0eb30e'
}
}
}
}],
}
6.設置y軸區間，最大值最小值,顯得數據波動很好~~~
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
yAxis: {
type: 'value',
min:50,
max:300,
splitNumber:10 // 好用切割成十份
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
7.dataZoom控制Y軸滾動
看圖
option = {
title: {
text: '2011年世界人口總量',
subtext: '數據來自網絡',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
// legend: {
// data: ['2011年']
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
inverse: true,
data: [
'巴西',
'印尼',
'美國',
'印度',
'中國',
'世界人口(萬)',
'巴西1',
'印1尼',
'美1國',
'印度1',
'中1國',
'世界1人口(萬)',
],
},
dataZoom: [
{
show: false,
zoomLock: true,
},
{ type: 'slider',
show: true,
startValue: 0, // 控制顯示幾個數據
endValue: 5, // 控制顯示幾個數據
orient: 'vertical',
showDetail: false, // 拖動時候滾動條上下是否顯示詳情
showDataShadow: true,
zoomLock: true,//設置為 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放
backgroundColor: 'white',
fillerColor: 'red', // 滾動條顏色
handleSize: '10', // 滾動條上面的那個把手大小
x2: 20, // 滾動條距離右邊的距離
width: 20, // 滾動條的寬度
zoomOnMouseWheel:true, //滾輪是否觸發縮放
moveOnMouseMove:true, //鼠標滾輪觸發滾動
moveOnMouseWheel:true
}
],
series: [
{
name: '2011年',
type: 'bar',
data: [
18203,
23489,
29034,
104970,
131744,
630230,
18203,
23489,
29034,
104970,
131744,
630230,
],
},
],
}
鼠標滾動控制Y軸數據上下移動
option = {
title: {
text: '2011年世界人口總量',
subtext: '數據來自網絡',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
// legend: {
// data: ['2011年']
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
inverse: true,
data: [
'巴西',
'印尼',
'美國',
'印度',
'中國',
'世界人口(萬)',
'巴西1',
'印1尼',
'美1國',
'印度1',
'中1國',
'世界1人口(萬)',
'巴西12',
'印12尼',
'美12國',
'印度12',
'中12國',
'世界12人口(萬)',
],
},
dataZoom: [
{
show: false,
zoomLock: false,
},
{ type: 'inside', //改為slider的話就會出現滾動條，inside隱藏滾動條
show: true,
startValue: 0, // 控制顯示幾個數據
endValue: 5, // 控制顯示幾個數據
orient: 'vertical',
showDetail: false, // 拖動時候滾動條上下是否顯示詳情
showDataShadow: true,
// zoomLock: true,//設置為 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放
backgroundColor: 'white',
fillerColor: 'red', // 滾動條顏色
handleSize: '10', // 滾動條上面的那個把手大小
x2: 20, // 滾動條距離右邊的距離
width: 20, // 滾動條的寬度
zoomOnMouseWheel:false, //滾輪是否觸發縮放，同時要設置zoomLock: false
moveOnMouseMove:true, //鼠標左鍵拖動觸發滾動，同時要設置zoomLock: false
moveOnMouseWheel:true // 鼠標滾輪帶動滾動，同時要設置zoomLock: false
}
],
series: [
{
name: '2011年',
type: 'bar',
data: [
18203,
23489,
29034,
104970,
131744,
630230,
18203,
23489,
29034,
104970,
131744,
630230,
18203,
23489,
29034,
104970,
131744,
630230,
],
},
],
}
折線圖+離散圖
option = {
title: {
text: '折線圖+離散圖'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最小值', '聯盟廣告', '最大值']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
// boundaryGap: false, // 控制折線圖距離Y軸是否有距離
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日','周一1', '周二1', '周三1', '周四1', '周五1', '周六1', '周日1']
},
yAxis: {
type: 'value'
},
series: [
{
name: '最小值',
type: 'line',
symbol: "none", // 去掉折線上面的小圓點
// stack: '總量', // 幾個設置一樣的會變成堆疊
data: [100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100]
},
{
name: '聯盟廣告',
type: 'scatter',
// stack: '總量', // 幾個設置一樣的會變成堆疊
data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
},
{
name: '最大值',
type: 'line',
// symbol: "none", // 去掉折線上面的小圓點
// stack: '總量', // 幾個設置一樣的會變成堆疊
data: [300, 300, 300, 300, 300, 300, 300,300, 300, 300, 300, 300, 300, 300]
},
]
};
配置了橫坐標旋轉，同一個X軸所屬柱子間距，非同一個X軸柱子間距，上下左右距離
option = {
// 配置了橫坐標旋轉，同一個X軸所屬柱子間距，非同一個X軸柱子間距，上下左右距離,以及橫坐標部分塗色
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: { top: '10%', left: '3%', right: '4%', bottom: '5%', containLabel: true },
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: 90
},
data: [
'Mon-TEST-TEST-TEST-TEST',
'Tu-TEST-TEST-TEST-TESTe',
'We-TEST-TEST-TEST-TESTd',
'Th-TEST-TEST-TEST-TESTu',
'Fr-TEST-TEST-TEST-TESTi',
'Sa-TEST-TEST-TEST-TESTt',
'S-TEST-TEST-TEST-TESTun'
]
},
yAxis: {
type: 'value'
},
series: [
{
name: '蒸發量1',
barWidth: 20, //設置柱子的寬度
barGap: '0%' /*控制的是單個X坐標的多個柱子的間距*/,
// barCategoryGap:'0%',/*控制非自己孩子之間的間距*/
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
},
{
name: '蒸發量2',
barWidth: 20, //設置柱子的寬度
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
}
餅圖添加中間的數字
option = {
title: {
text: '1024',
left: 'center',
top: 'center',
// center: ['50%', '50%'],
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
type: 'pie',
// radius: '65%',
radius: [50, 80],
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{value: 100, name: '中'},
{value: 200, name: '高'},
{value: 50, name: '低'}
],
emphasis: { // 這個是鼠標放上去時候的陰影
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 5,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
鼠標滾輪滾動移動數據，以及添加標識字
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
toolbox: {
feature: {
saveAsImage: {}
}
},
// legend: {
// data: ['2011年']
// },
grid: {
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
inverse: true,
data: [
'巴西',
'印尼',
'美國',
'印度',
'中國',
'世界人口(萬)',
'巴西1',
'印1尼',
'美1國',
'印度1',
'中1國',
'世界1人口(萬)',
'巴西12',
'印12尼',
'美12國',
'印度12',
'中12國',
'世界12人口(萬)',
],
},
dataZoom: [
{
show: false,
backgroundColor: 'red',
zoomLock: false,
},
{ type: 'inside', //改為slider的話就會出現滾動條，inside隱藏滾動條
show: true,
startValue: 0, // 控制顯示幾個數據
endValue: 5, // 控制顯示幾個數據
orient: 'vertical',
showDetail: false, // 拖動時候滾動條上下是否顯示詳情
showDataShadow: true,
// zoomLock: true,//設置為 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放
backgroundColor: 'white',
fillerColor: 'red', // 滾動條顏色
handleSize: '10', // 滾動條上面的那個把手大小
x2: 20, // 滾動條距離右邊的距離
width: 20, // 滾動條的寬度
zoomOnMouseWheel:false, //滾輪是否觸發縮放，同時要設置zoomLock: false
moveOnMouseMove:true, //鼠標左鍵拖動觸發滾動，同時要設置zoomLock: false
moveOnMouseWheel:true // 鼠標滾輪帶動滾動，同時要設置zoomLock: false
}
],
series: [
{
name: '2011年',
type: 'bar',
itemStyle: {
color: '#599fff' // 柱子的顏色
},
label: {
show: true, // 柱子后面的字體
precision: 1,
position: 'right',
valueAnimation: true,
fontFamily: 'monospace'
},
data: [
18203,
23489,
29034,
104970,
131744,
630230,
18203,
23489,
29034,
104970,
131744,
630230,
18203,
23489,
29034,
104970,
131744,
630230,
],
},
]
};
多種樣式調節，X軸顏色Y軸顏色 、分割線顏色
option = {
title: {
text: 'XXX',
x: 'center'
},
//color: colorArr,
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
y2: 140
},
xAxis: {
type: 'category',
name: '案例',
data: [''],
axisLabel: {
interval: 0,//橫軸信息全部顯示
rotate: -30,//-30度角傾斜顯示
},
axisLine: {
lineStyle: {
color: 'red', // x軸顏色
width: 1,//這里是為了突出顯示加上的
}
}
},
yAxis: {
type: 'value',
name: '單位: 次',
splitLine: {
lineStyle: {
// 使用深淺的間隔色
color: ['#0087ED', 'blue', 'pink']
}
},
nameTextStyle: {
color: ['#ddddd'] // y軸的標識字
},
axisLine: {
show: true, // 控制y軸這個線是否出來
lineStyle: {
color: 'purple', // y軸字體顏色
width: 1,//這里是為了突出顯示加上的
}
}
},
series: [{
name: '這里放名字',
type: 'bar',
stack: '次數',
label: {
normal: {
show: true,
position: 'top'
}
},
data: ['100'],
color: ['#0087ED'],
itemStyle: {
normal: {
barBorderRadius: 5,
}
},
barWidth: 30,
}]
};
修改標題到中間，調整大小
{
title: {
text: '1024',
textStyle:{fontSize:50},
left: 'center',
top: 'center',
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
series: [
{
type: 'pie',
// radius: [120, 200],
radius: ['50%', '80%'], // 這個是按比例，上面那個是按固定值
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 100, name: '中' },
{ value: 200, name: '高' },
{ value: 50, name: '低' }
],
emphasis: { // 這個是鼠標放上去時候的陰影
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 5,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
修改部分字體顏色
let data1 = [150, 230, 224, 218, 147, 260, 500]
option = {
xAxis: {
type: 'category',
axisLabel: {
color: function (value, index) {
console.log(value, index)
return data1[index] > 200 ? 'red' : 'blue'
}
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: data1,
type: 'line'
}]
};
修改柱狀圖每個柱子的顏色,根據數據橫坐標部分字體顏色，修改柱子間距
myData = {
nameData: [ // 橫坐標顯示的值
'TEST-數據名字01',
'TEST-數據名字02',
'TEST-數據名字03',
'TEST-數據名字04',
'TEST-數據名字05',
'TEST-數據名字06',
'TEST-數據名字07'
],
pData: [120, 200, 150, 80, 70, 110, 130],
rData: [120, 0, 150, 80, 0, 110, 130]
}
option = {
toolbox: {
feature: {
saveAsImage: {}
}
},
legend: {
data: ['Pr', 'Ro'],
right: 20,
itemHeight: 10,
itemWidth: 10,
itemGap: 30,
},
// 配置了橫坐標旋轉，同一個X軸所屬柱子間距，非同一個X軸柱子間距，上下左右距離,以及橫坐標部分塗色
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: { top: '10%', left: '3%', right: '4%', bottom: '5%', containLabel: true },
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: 90,
color: (value, index) => {
// 柱狀圖用紅色框線標出壓力值為0的設備Station ID ，若進行壓力參數名稱的點選，紅色框線隨之改變
return this.myData.rData[index] === 0 ? 'red' : 'black'
}
},
data: this.myData.nameData
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Press',
barWidth: 20, //設置柱子的寬度
barGap: '0%' /*控制的是單個X坐標的多個柱子的間距*/,
// barCategoryGap:'0%',/*控制非自己孩子之間的間距*/
data: this.myData.pData,
itemStyle: {
normal: {
color: '#599fff'
}
},
type: 'bar'
},
{
name: 'Robot',
barWidth: 20, //設置柱子的寬度
data: this.myData.rData,
itemStyle: {
normal: {
color: '#ffb752'
}
},
type: 'bar'
}
]
}
修改echarts折線圖拐點大小樣式以及添加點點的邊框，改變折線的樣式
option = {
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: ['6-8', '6-9', '6-10', '6-11', '6-12', '6-13', '6-14'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
symbol: 'circle', //拐點設置為實心
symbolSize: 8, //拐點大小
animation: true, //false: hover圓點不縮放 .true:hover圓點默認縮放
lineStyle: {
normal: {
color: '#599fff', //折線的顏色
width: '2', //折線粗細
},
},
itemStyle: {
normal: {
color: '#599fff', //拐點顏色
borderColor: 'rgba(89, 159, 255, 0.24)', //拐點邊框顏色
borderWidth: 5, //拐點邊框大小
},
// emphasis: {
// color: '#000000'//hover拐點顏色定義
// }
},
},
],
}
折注混合，X軸的顏色，X軸字體顏色，調整柱子顏色，調整小圖標圖例的大小和位置,鼠標hover時候的樣式，用縱向陰影
// 折注混合，X軸的顏色，X軸字體顏色，調整柱子顏色，調整小圖標圖例的大小和位置,鼠標hover時候的樣式，用縱向陰影
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐標軸指示器，坐標軸觸發有效
type: 'shadow', // 默認為直線，可選為：'line' | 'shadow'
},
},
legend: {
// 調整小圖標圖例的大小和位置
data: ['蒸發量', '降水量', '百分比'],
right: 20,
itemHeight: 10,
itemWidth: 10,
itemGap: 30,
},
xAxis: [
{
type: 'category',
data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
axisPointer: {
type: 'shadow',
},
axisLabel: {
color: '#828c99', // x軸字體顏色
},
axisLine: {
lineStyle: {
color: '#d9d9d9', // x軸顏色
width: 1, //這里是為了突出顯示加上的
},
},
},
],
yAxis: [
{
type: 'value',
// name: '水量', 左側y軸標題
min: 0,
max: 350,
interval: 50,
// axisLabel: { 左側y軸單位
// formatter: '{value} ml'
// }
},
{
type: 'value',
name: '百分比',
min: 0,
max: 35,
interval: 5,
axisLabel: {
formatter: '{value} %',
},
},
],
series: [
{
name: '蒸發量',
type: 'bar',
stack: '堆疊',
itemStyle: {
normal: {
// 柱子顏色--藍色
color: '#599fff',
},
},
data: [
1.0,
4.9,
76.0,
2.2,
25.6,
70.7,
13.6,
102.2,
20.6,
0.0,
6.4,
3.3,
],
},
{
name: '降水量',
type: 'bar',
stack: '堆疊',
itemStyle: {
normal: {
// 柱子顏色--黃色
color: '#ffb752',
},
},
data: [
2.6,
5.9,
9.0,
26.4,
28.7,
9.7,
15.6,
12.2,
8.7,
18.8,
6.0,
2.3,
],
},
{
name: '百分比',
type: 'line',
itemStyle: {
normal: {
// 顏色
color: '#599fff',
},
},
label: {
show: true,
position: 'top',
},
yAxisIndex: 1,
data: [
2.0,
2.2,
3.3,
4.5,
6.3,
10.2,
20.3,
23.4,
23.0,
16.5,
12.0,
6.2,
],
},
],
}
去除餅圖標注省略號配置
option = {
title: {
text: '2323',
textStyle: { fontSize: 26 },
left: 'center',
top: 'center',
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} {d}%',
},
series: [
{
type: 'pie',
radius: ['28%', '50%'],
label: {
alignTo: 'edge', // 去除標注省略號配置
edgeDistance: 5, // 去除標注省略號配置
lineHeight:20, // 去除標注省略號配置
formatter: '{b} :\n {c} {d}%', // 去除標注省略號配置
},
data: [
{ value: 100, name: '中' },
{ value: 200, name: '高' },
{ value: 50, name: '低' },
],
emphasis: {
// 這個是鼠標放上去時候的陰影
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 5,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
};
修改餅圖顏色
option = {
title: {
text: '2323',
textStyle: { fontSize: 26 },
left: 'center',
top: 'center',
},
toolbox: {
feature: {
saveAsImage: {}
}
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} {d}%',
},
series: [
{
type: 'pie',
radius: ['28%', '50%'],
label: {
alignTo: 'edge', // 去除標注省略號配置
edgeDistance: 5, // 去除標注省略號配置
lineHeight:20, // 去除標注省略號配置
formatter: '{b} :\n {c} {d}%', // 去除標注省略號配置
},
data: [
{ value: 100, name: '中',itemStyle: {color:"orange"} },
{ value: 200, name: '高' ,itemStyle: {color:"red"}},
{ value: 50, name: '低' ,itemStyle: {color:"blue"}},
],
emphasis: {
// 這個是鼠標放上去時候的陰影
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 5,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
};