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)資料,文中通過代碼介紹的非常詳細(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} (vvxyksv9kd%)'
},
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, // 開啟圓角
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,// 開啟圓角
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)文章
bootstrap table實(shí)現(xiàn)單擊單元格可編輯功能
這篇文章主要為大家詳細(xì)介紹了bootstrap table實(shí)現(xiàn)單擊單元格可編輯功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Invalid?Host?header問題該如何解決的幾種方式
Invalid Host header是一個(gè)常見的錯(cuò)誤信息,通常發(fā)生在Web應(yīng)用程序中,下面這篇文章主要給大家介紹了關(guān)于Invalid?Host?header問題該如何解決的幾種方式,需要的朋友可以參考下2024-09-09
注冊(cè)模塊中輸入密碼需要顯示密碼強(qiáng)度（低中高）本例將做的效果給大家分享下2014-06-06
Base64(二進(jìn)制)圖片編碼解析及在各種瀏覽器的兼容性處理
這篇文章主要介紹了Base64(二進(jìn)制)圖片編碼解析及在各種瀏覽器的兼容性處理,需要的朋友可以參考下2017-02-02
本文主要介紹了JS中arguments的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了詳解require.js配置路徑的用法和css的引入,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
微信小程序?qū)崿F(xiàn)事件傳參與數(shù)據(jù)同步流程詳解
這篇文章主要介紹了微信小程序開發(fā)中實(shí)現(xiàn)事件傳參與數(shù)據(jù)同步的詳細(xì)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
layui實(shí)現(xiàn)鼠標(biāo)移動(dòng)到單元格上顯示數(shù)據(jù)的方法
今天小編就為大家分享一篇layui實(shí)現(xiàn)鼠標(biāo)移動(dòng)到單元格上顯示數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了圖解js中的原型,原型對(duì)象,原型鏈,幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-01-01
VSCode中如何利用d.ts文件進(jìn)行js智能提示
這篇文章主要給大家介紹了關(guān)于VSCode中如何利用d.ts文件進(jìn)行js智能提示的相關(guān)資料，文中通過圖文以及示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2018-04-04