echarts環(huán)形圖內(nèi)部圓、外部圓形及陰影設(shè)置方法
更新時(shí)間：2023年11月23日 10:13:28 作者：西洛.sco
近期要做圖表,我選擇了ECharts做可視化圖表,圖表的樣式有陰影,這篇文章主要給大家介紹了關(guān)于echarts環(huán)形圖內(nèi)部圓、外部圓形及陰影設(shè)置的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
環(huán)形圖
修改圖例自定義icon
完整代碼圖
Chart1() { // 折算價(jià)值戶新增構(gòu)成
let chartDom = document.getElementById('main');
let myChart = this.$echarts.init(chartDom);
let option;
option = {
// 設(shè)置占比圖顏色
color:['#FFA500','#66CDAA',' #1E90FF',' #E8E8E8'],
tooltip: { //提示框
trigger: 'item',
formatter: ' : <br/> {c} (wppm3vysvbp%)'
},
title:[ // 中心換行標(biāo)題
{
text: "總計(jì)",
left: '24%',
top: '43%',
textStyle: {
color: 'black',
fontSize: 12,
fontWeight: "400",
color:'#1787ff'
}
},
{
text: '100%',
left: '22%',
top: '35%',
textStyle: {
color: 'black',
fontSize: 14,
fontWeight: "400",
color:'#1787ff',
fill: 'red',
}
}
],
legend: {// 圖例
orient: 'vertical',//horizontal 水平顯示，vertical 垂直顯示
right: 0,
top: 20,
bottom: 20,
itemWidth:10,//圖例寬度
itemHeight: 10,
itemGap: 35,//圖例之間間距
},
series: [
{
name: '占比',
startAngle: 180,
label: {// 點(diǎn)擊展示方式
show: false,
},
type: 'pie',
radius: ['35%', '60%'],// 餅圖大小設(shè)置
roseType: 'area',
avoidLabelOverlap: true,// 是否啟用防止標(biāo)簽重疊策略
labelLine: { // z折線連接的標(biāo)題
show: false
},
center: ['30%', '40%'],//餅圖位置
data: [
{ value: 735, name: '25% 彭浦支行' },
{ value: 735, name: '25% 閘北支行' },
{ value: 580, name: '40% 芷江支行' },
{ value: 384, name: '10% 其他' }
]
},
{
name:'中心圓',
radius: ['0%', '30%'],
center: ['30%', '40%'],
type: 'pie',
color:"white", //內(nèi)圓顏色
itemStyle: {
normal: {
// 設(shè)置陰影
shadowBlur: 30,
shadowColor: 'rgba(147, 147, 147,0.3)',
shadowOffsetX: 0,
shadowOffsetY: 7
}
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: [{
value: 1,
}],
},
{
name: '外邊框',
type: 'pie',
color:"white", //內(nèi)圓顏色
clockWise: false, //順時(shí)加載
hoverAnimation: false, //鼠標(biāo)移入變大
center: ['30%', '40%'],
radius: ['60%', '65%'],
itemStyle: {
normal: {
// 設(shè)置陰影
shadowBlur: 30,
shadowColor: 'rgba(147, 147, 147,0.3)',
shadowOffsetX: 10,
shadowOffsetY: 7
}
},
label: {
normal: {
show: false
}
},
data: [{
value: 9,
name: '',
itemStyle: {
normal: { //可以設(shè)置樣式
// borderWidth: 2,
// borderColor: '#2ec7c9'
}
}
}]
},
]
};
option && myChart.setOption(option);
},柱狀圖
Chart2(){
let chartDom = document.getElementById('main2');
let myChart = this.$echarts.init(chartDom);
let category = ['彭浦支行', '閘北支行', '芷江支行', '其他'];
// let barData = [310, 212, 118, 81];
let option;
option = {
tooltip: {
trigger: 'item',
},
legend: {
x:'center',
y:'bottom',
icon: "circle", // 修改形狀
temHeight: 1, // 修改icon圖形大小
itemGap: 14, // 修改間距
textStyle: {
fontSize: 10,
color: "#333",
},
},
grid: {
left: '3%',
right: '4%',
top: '2%',
containLabel: false
},
xAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine:{ // 背景線條
show:true,
lineStyle:{
color:' #d6d6d6',
width:0.2,// 線條寬
}
}
},
yAxis: [
{
type: 'category',
show:false,
inverse:true,
data: category,
axisLine: {
show: false
},
axisTick: {
show: false
}
},
],
series: [
{
name: '彭浦支行',
data: [310, null, null, null],
type: 'bar',
barWidth:10,// 柱子寬度
stack: 'Mon',
itemStyle: {
normal: {
barBorderRadius: 17,
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#FFD700'
}, {
offset: 1,
color: '#FFA500'
}]),
},
},
label: {
show: true,
position: 'right',
formatter: '{c}',
}
},
{
name: '閘北支行',
data: [null, 212, null, null],
type: 'bar',
stack: 'Mon',
itemStyle: {
normal: {
barBorderRadius: 17,
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#87CEFF'
}, {
offset: 1,
color: '#5284DE'
}]),
}
},
label: {
show: true,
position: 'right',
formatter: '{c}',
}
},
{
name: '芷江支行',
data: [null, null, 118, null],
type: 'bar',
stack: 'Mon',
itemStyle: {
normal: {
barBorderRadius: 17,
//這里是顏色
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#76EEC6'
}, {
offset: 1,
color: '#66CDAA'
}]),
}
},
label: {
show: true,
position: 'right',
formatter: '{c}',
}
},
{
name: '其他',
data: [null, null, null, 81],
type: 'bar',
stack: 'Mon',
itemStyle: {
normal: {
barBorderRadius: 17,
//這里是顏色
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#F5F5F5'
}, {
offset: 1,
color: '#E8E8E8'
}]),
}
},
label: {
show: true,
position: 'right',
formatter: '{c}',
}
},
]
};
option && myChart.setOption(option);
},半圓圖
Chart3(){
let chartDom = document.getElementById('main3');
let myChart = this.$echarts.init(chartDom);
let option;
// 進(jìn)度百分比
let value = 95
option = {
title: [{
text: value + '%',
left: 'center',
top: '40%',
textStyle: {
color: 'rgba(64, 140, 255, 1)',
fontSize: 20
}
}, {
text: '目標(biāo)完成率',
left: 'center',
top: '55%',
textStyle: {
color: 'black',
fontSize: 10,
color:'grey'
}
}],
legend: {
bottom:'20',
itemWidth:15,
itemHeight: 10,
itemGap: 45,//圖例間距
data: ["價(jià)值戶新增數(shù):45個(gè)", "目標(biāo)總數(shù):90個(gè)", ],
},
angleAxis: {
show: false,
// 后面的180表示圓環(huán)的跨越的角度， 如max設(shè)置為100*360/270,startAngle設(shè)置為-135
max: 100 * 360 / 180,
type: 'value',
startAngle: 180,
splitLine: {
show: false
}
},
// 修改環(huán)形的寬度
barMaxWidth: 15,
radiusAxis: {
show: false,
type: 'category'
},
polar: {
// 設(shè)置環(huán)形的位置
center: ['50%', '60%'],
// 設(shè)置環(huán)形大小
radius: '150%'
},
series:[
{
name:'價(jià)值戶新增數(shù):45個(gè)',
color: 'rgba(23, 135, 255, 1)',
type: 'bar',
roundCap: true, // 開(kāi)啟圓角
data: [
{
value: value,
itemStyle: {
normal: {
opacity: 1,
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#25BFFF'
}, {
offset: 1,
color: '#5284DE'
}]),
shadowColor: '#2A95F9'
}
}
}
],
barGap: '-100%',
coordinateSystem: 'polar',
z: 3
}, {
name:'目標(biāo)總數(shù):90個(gè)',
color: 'rgba(244, 249, 253, 1)',
type: 'bar',
roundCap: true,// 開(kāi)啟圓角
data: [{
value: 100,
itemStyle: {
// 這里是環(huán)形底色
color: 'rgba(244, 249, 253, 1)',
borderWidth: 0
}
}],
barGap: '-100%',
coordinateSystem: 'polar',
z: 1
}]
}
option && myChart.setOption(option);
},折線圖
Chart4() {
let chartDom = document.getElementById('main4');
let myChart = this.$echarts.init(chartDom);
let option;
option = {
tooltip: { //提示框
//觸發(fā)類型；軸觸發(fā)，axis則鼠標(biāo)hover到一條柱狀圖顯示全部數(shù)據(jù)，item則鼠標(biāo)hover到折線點(diǎn)顯示相應(yīng)數(shù)據(jù)，
trigger: 'item',
formatter:'
價(jià)值戶新增:{c}',
},
xAxis: {
type: 'category',
boundaryGap: false,// 坐標(biāo)軸兩邊是不是留白
data: ['04/28', '04/30', '05/02', '05/04','05/08','05/10','5/20'],
axisLine: {//坐標(biāo)系
show: true,
lineStyle:{ //x坐標(biāo)系字體樣式
color:'#E8E8E8',
width:0.5
}
},
axisLabel: {
interval:1,//0代表顯示所有x軸標(biāo)簽顯示,1不顯示全
color:'grey'//x軸字體顏色
},
axisTick: { // 刻度線
show: false,
},
},
yAxis: {
type: 'value',
axisLabel:{//字體
color:'grey'
},
axisLine: {//y軸線
show: true,
lineStyle:{
color:'#BEBEBE'
}
},
axisTick: {//y刻度線
show: false
},
splitLine: { // 背景線 分割線
show: true,
lineStyle:{
type:'dashed',
color:' #F5F5F5'
}
}
},
series: [
{
data: [13, 26, 30, 66, 30,8,40],
type: 'line',
smooth: true,//顯示平滑曲線
lineStyle:{
color:'#00BFFF' //折線顏色
},
itemStyle : { //折線點(diǎn)顏色
normal : {
color:'#00BFFF'
}
},
areaStyle: { //區(qū)域漸變色
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#87CEFF'
}, {
offset: 1,
color: '#ffffff'
}
]),
}
},
}
]
};
option && myChart.setOption(option);
}總結(jié)
到此這篇關(guān)于echarts環(huán)形圖內(nèi)部圓、外部圓形及陰影設(shè)置方法的文章就介紹到這了,更多相關(guān)echarts環(huán)形圖設(shè)置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
前端url拼接參數(shù)格式&?用&和??=拼接方法實(shí)例
在一些情況下需要直接往url上拼接請(qǐng)求參數(shù),下面這篇文章主要給大家介紹了關(guān)于前端url拼接參數(shù)格式&?用&和??=拼接的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義底部導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
用JavaScript繪圖 ——JS2D函數(shù)集...2007-01-01
這篇文章主要給大家介紹了關(guān)于微信小程序前端自定義分享的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了javascript遞歸函數(shù)定義和用法示例分析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
JavaScript?為我們提供了很多操作符，用于操作表達(dá)式。下面就來(lái)盤(pán)點(diǎn)一下?JavaScript?中那些強(qiáng)大的操作符，感興趣的小伙伴可以了解一下2022-09-09
uniapp 對(duì)于scroll-view滑動(dòng)和頁(yè)面滑動(dòng)的聯(lián)動(dòng)處理方法
這篇文章主要介紹了uniapp 對(duì)于scroll-view滑動(dòng)和頁(yè)面滑動(dòng)的聯(lián)動(dòng)處理方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-08-08
zTree插件之多選下拉菜單實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
題意：在界面上有一張圖片，下面有四個(gè)單選按鈕，點(diǎn)擊每一個(gè)按鈕圖片變換成不同的圖片2013-04-04
在Web前端實(shí)現(xiàn)流式TTS播放的排坑過(guò)程
在前端實(shí)現(xiàn)流式TTS,核心目標(biāo)是把文本輸入轉(zhuǎn)化為沉浸式的、幾乎無(wú)感延遲的音頻輸出,并且在音頻進(jìn)入瀏覽器的瞬間就能開(kāi)始播放,這篇文章主要介紹了在Web前端實(shí)現(xiàn)流式TTS播放的排坑過(guò)程,需要的朋友可以參考下2026-05-05